Mockup image of investment app designed in Figma

Shield

Summary

Preventing online fraud is a crucial aspect of running an online business that many people don’t even think about.

The process of identifying online fraud can be time-consuming and difficult, especially for those who are not familiar with the industry. I set out to create a business-to-business fraud prevention and order verification web application that could be used by online retailers. This application was designed to be used even when businesses don’t have dedicated fraud prevention teams and was built to simplify the order verification process and make it less time-consuming.

See Prototype

Role

UX Design
User Research
User Interviews
Information-
Architecture
Prototyping
Usability Testing

Deliverables

Interview Questions
Competitive Analysis
User Stories
User Flows
Personas
Journey Maps
Site Map
Wireframes
Mockups
Prototype

Tools

Figma
Color Oracle
Google Forms
Google Docs
Contrast Checker

Problem

Many business owners in the online retail space don’t have the time or knowledge to efficiently prevent online fraud, but if they do nothing, they can lose thousands of dollars each year.

Internet crime reported to the FBI’s Internet Crime Complaint Center in 2020 amounted to losses of more than $4.2 billion.

Audience

Business owners that realize online fraud is a major issue and want to do something to prevent it.

Solution

Shield is an application that analyzes a business’s online orders and identifies the risk factors. The user can then view the risk factors and use them to make decisions about the order. This application is designed in a way that makes the risk factors clearly identifiable and easy to understand. Additionally, it makes recommendations, allowing users to better interpret the information they are given, and it offers a built-in verification option, allowing its users to save time. It also has a feature that allows the process to be completely automated, bypassing the time-consuming need for manual review by a business owner or employee.

A gif of a fraud prevention application

Scope

I had close to three weeks to design the app from start to finish. After splitting my time up, I had the following schedule.

Process

Discovery and Research

I began my journey with research, hoping to identify any common problems. I conducted user interviews and develop surveys, which helped me gain insight from both fraud prevention professionals, as well as people who have had experiences with fraud, such as unauthorized charges on their accounts.  

While I have over six years of experience in the fraud prevention field, I didn’t want to make any assumptions. I knew any decisions I made needed to be backed by further research. Additionally, I aimed to make this application to be as functional and easy to use as possible. 

My surveys helped me confirm that most people have experienced unauthorized transactions and most people appreciate when businesses go out of their way to prevent fraud. 

I also discovered people want fast order verification solutions to make their experience positive, as 83% of people say they would only want to spend 5 minutes or less verifying an order. Additionally, 25% of people said a major issue with order verification is that it takes too long.

56% of people prefer to be contacted by text, and 41% prefer to be contacted by email. This helped me to determine how customers should be contacted for order verification.

Survey question and graph
Survey question and graph

25% of business owners and fraud analysts said they don’t understand the metrics when attempting to identity fraud using a fraud prevention tool. I used this information to make sure the metrics on my design were clear and understandable.  

I then conducted a competitive analysis to determine what already exists on the market. It wasn’t immediately clear how I should design the app, so this process helped to give me ideas and identify things that work well and things that can be improved. 

I did a SWOT analysis for 3 different fraud prevention tools and noted my conclusions.  

Logos of fraud prevention companies

Strengths

  • Showed risk factors
  • Included all necessary information
  • Included risk indicators
  • Configurable fraud filters

Weaknesses

  • Not aesthetically pleasing
  • Sometimes confusing
  • Can’t reach out for verification within the app
  • Feels cluttered

Opportunities

  • Add options for reaching out for verification within the application
  • Simplify the design
  • Add recommendations
  • Add automation

I then used the data I collected from my surveys and interviews to create user personas.

Samuel D

Persona Image for fraud prevention application application case study.

Bio

Samuel D is a business owner of a small online retail clothing and accessories company. Samuel started his company eight years ago and it has grown significantly in that time. His business just started shipping worldwide in the last couple of years and has recently started selling flashy items, both of which are causing Samuel to see an increase in fraudulent orders on his website. Samuel is extremely busy operating his business and would rather focus his time on growth rather than fraud prevention.

Motivations

Samuel doesn’t know a whole lot about fraud or fraud prevention but he knows he needs to do something about it. Samuel doesn’t want to hire a full-time fraud analyst and he doesn’t have time to learn a lot about fraud prevention, so he needs something that can automate the bulk of the work. He also wants something that will walk him through the fraud prevention process and make it as easy as possible. 

Goals

Prevent fraud and charge-backs 
Verify orders with customers

Frustrations

Time-consuming to learn about
Lack of understanding
Complicated processes

Miranda S

Persona Image for fraud prevention application case study.

Bio

Miranda has been the leader of a small team of fraud analysts for an online retail company based out of New York. Miranda has had a leadership role for the last four years and has been a fraud analyst for seven years. Miranda has decided that the team should have a more efficient fraud tool, as review and verification tend to take too long. Miranda is tasked with choosing a new program that could free up some time for the fraud team and make their process more efficient. 

Motivations

Miranda understands fraud prevention very well but finds that new and seasonal employees can sometimes slow the process down or have difficulty with verification. Miranda wants a tool that makes verification understandable for anybody. She wants the tool to have built-in features for contacting customers. 

Goals

Verify orders with customers
Send emails and texts from within the application
Automate follow up emails and texts

Frustrations

Emailing, calling, and texting manually takes too much time
Fraud metrics are complicated and hard to read

Based on these personas, I took the time to better understand the users by developing journey maps. I used these to help define expectations, empathize with the user, and better develop my thought process around what users are going to need from this fraud tool.

User Journey for fraud prevention application case study.

Information Architecture

I then began writing user stories and made a list of the ones I considered high-priority. These high priority user stories were selected based on the user needs I discovered in the research phase. 

High Priority User Stories

1. As a fraud analyst, I want to contact a customer for verification so I can be sure that orders are legitimate.
2. As a business owner, I want to easily assess risk factors so I can decide if the order is good or bad.
3. As a business owner, I want to cancel fraudulent orders so I don’t lose money on unauthorized transactions.
4. As a fraud analyst I want to accept a legitimate order so that the order can begin processing for fulfillment.
5. As a fraud analyst, I want to automate the system so I don’t have to manually review orders.
6. As a business owner, I want to automate the review process so I don’t have to spend time on it.
7. As a business owner, I want to see a customer's order history so I can better determine the legitimacy of the order.
8. As a fraud analyst, I want to see customer's order history so I can make a better decision.
9. As a business owner, I want to edit an email template so I can better cater it to my business needs.

I then used the user stories to create user flows. This helped me to define how users would interact with the tool and it guided me in deciding which pages I would need to create for a functioning MVP. 

User flows for fraud prevention application case study

Referencing the user flows, I began sketching what the needed pages might look like. I experimented with several variations, finally choosing the ones that were simple, clean, and understandable. 

Wireframe sketches of a fraud prevention application.
Wireframe sketches of a fraud prevention application.

And then I started adding a bit more detail to the sketches, iterating on previous versions, and exploring my ideas.

Wireframe sketches of a fraud prevention application.
Wireframe sketches of a fraud prevention application.

With my sketches laid out as a guide, I create low-fidelity wireframes in Figma. These wireframes went through a couple of iterations, gradually adding more detail and refining my ideas. 

Wireframe of a fraud prevention application.
Wireframe of a fraud prevention application.
Wireframe of a fraud prevention application.
Wireframe of a fraud prevention application.

I realized my designs needed to present the most important information clearly and understandably, so I reduced the unnecessary clutter that is included in some of the other fraud tools. I decided to add cards at the top of the page that shows the most important information, making the review process simple and easy. These cards include the information that my research indicated fraud analysts are most likely to want to look at and understand quickly to make a decision about the order.

Risk factor cards for a fraud prevention application.

Additionally, I added a “request verification” button. This button is meant to both email and text a customer with a request that they verify their order. This would allow customers to communicate via their preferred method. It would also increase the likelihood that customers would see the notification, which my survey indicated is one of the main customer frustrations. This button also bypasses the need for the user to manually call or email the customer to request verification. 

Buttons for a fraud prevention application.

I then began developing the brand identity so that I could start adding some color and personality to the project. I sketched out a few logo ideas and selected a name for the tool. Using the sketches, I built the logo in Figma. 

Logo sketches and mockups for a fraud prevention application.

I then selected a color palette. The blue-green variations were selected because blue is representative of security and the darker green tones make it easier to look at and read. I was sure to consider accessibility and contrast while selecting the color profile by running my colors through a contrast checker. I also tested for accessibility by using Color Oracle, which allowed me to take into account vision disabilities, such as Deuteranopia and Tritanopia. I made adjustments accordingly.

A Sans Serif font was selected to make it easily legible and clean.   

Color palette and font selection for a fraud prevention application.

This meant it was time to add the selected colors and font to my designs. This process went through a few iterations, slowly building up the design to make it more and more visually appealing. 

Mockups for a fraud prevention application.
Mockups for a fraud prevention application.
Mockups for a fraud prevention application.
Mockups for a fraud prevention application.

I then used these mockups to create a clickable prototype. Hoping to test the design and validate my ideas, I conducted usability testing with four different users. Among other things, I tested whether or not users understand what they were looking at and if they could accomplish the given fraud prevention tasks.  

Throughout this process, I made notes on how many errors were made, how long it took to accomplish tasks, and how quickly they were able to learn the interface. The feedback that they provided was invaluable. While the interface was understandable to them, I found that there was plenty of room for improvement.

Some of what I discovered includes:
• 100% of users were able to accomplish their given tasks.
• The “order history” card consistently caused confusion and needed to be improved.
• Some wording needed to be changed to improve clarity.
• All of the users wanted a way to learn more about what they were looking at.

While there was much more that I learned alongside this, I prioritized the most important feedback and used it to implement changes and iterate the design.

I first clarified the suspicious order history card. The “negative” along with the suspicious order history wording lead people to believe that there was not a suspicious order history, which was not my intention. So I changed to say SUS, short for suspicious.

Suspicious order history card changes for a fraud prevention application.

I also made some subtle changes to the dashboard to increase the clarity of the user experience and make it more consistent.

And then I added a way for users to learn more about what they were looking at. I created popups that provide more information when a user clicks on a card.

Popup information for a fraud prevention application.

Next Steps

The addition of these changes meant the project was complete, but there were still many modifications that could be made.

I lastly made notes of the things that could be improved upon in the future, as well as tests that could be done. This included:

AVS codes and evaluation for a fraud prevention application.

Final Thoughts

Conclusion

Not only was this project a pleasure to work on, but it also forced me to develop and flex my UX skills. I had to constantly consider what I knew the app needed to do along with what would be visually appealing and easily understandable, especially considering so few people are familiar with the fraud prevention industry. I also learned a lot from this process. 

I learned the value of usability testing. Testing is of course an important aspect of UX design, but the level of feedback I received from testing on this project felt unmatched. It was some of the most valuable feedback I have received, and I discovered just how much you can learn from users if you ask the right questions and facilitate the session with the right dialogue. 

I discovered that not all user tests are equal. There is something to be learned from every test, but some testers will elaborate in-depth, while others will not. 

I also learned how much I love the iterative process of creating designs. There’s always something to improve on, so you have to prioritize, focus, and experiment. It’s exciting watching your designs evolve as you better develop and define the product. 

I’m proud of how this application turned out, and I believe I created a tool that is functional, aesthetic, and solves some of the problems people experience when attempting to prevent fraud and verify orders.

Mac desktop mockup of a fraud prevention program
Mac Book laptop mockup of a fraud prevention program
Mac Book laptop mockup of a fraud prevention program
Logo and name of a fraud prevention application.

Connect with me!

Projects
About
Contact
Resume