Company:
LegitScript

Product:
Merchant Monitoring

Summary:
I contributed to the development of three new features for LegitScript's product, Merchant Monitoring. This included the addition of a new tab called 'Test Transactions,' tailored specifically for Visa, one of our major clients.

Team:
2 Product Owners, 3 Software Developers, 1 Engineering Lead, 2 UX Designers

Tools:
Figma, Principle

My Role:
User Research, Wireframes, High-Fidelity, Prototyping

Length:
12 Weeks

My Postion:
Senior UX Designer

What is Merchant Monitoring?

LegitScript Merchant Onboarding is a product helps you quickly vet prospective merchants before they enter your ecosystem, while LegitScript Merchant Monitoring helps you rapidly and confidently action existing merchants with accurate and detailed analysis of website content risk.

Merchant Monitoring is only a desktop web application.

What is Test Transactions?

Test Transactions is a tab within Merchant Monitoring but Test Transaction information is at the core of LegitScript’s deliverables for customers such as Visa, and also a component of our deliverables for Merchant Monitoring customers.

Test transactions are purchases (often with a zero-balance card) our analysts conduct on violative websites (targets) that produce valuable intelligence about merchants in the payments industry, have the potential to confirm transaction laundering, and help both us and our customers understand the flow of payments for violative goods and services.

Who is the client of LegitScript for this effort?

Core Stakeholders

  • Product Marketing Manager

  • Engineering Lead

  • 2 Visa Analysts

Measures of Success

Since this experience was not going live right away, our core measures of success focused on our usability tests and user feedback through Google forms. We had Immediate and down the road goals.

Immediate:

  • Visa and their Analysts are happy with the overall UX since Test Transactions is a very client facing feature

  • Overall satisfaction increase through Google forms


Down the road once live:

  • Exit pages Metrics: How long a user spends on a page to find what they are looking for

  • Pages per session Metrics: So we can understand the quality and order of the content.

Problem Statement

The old LCP test transaction features were designed years ago, without input from Visa Analysts. There are known bugs in the features, and Visa is requesting additional functionality. Rather than addressing the old LCP, our plan is to add the new Test Transactions features to MyLS and redesign these features in the process.

List View and Search

  • Search functionality needs to be condensed.

  • We need a different way to filter

  • Overall UX looks clunky

  • There are currently only 7 rows and could display more

  • Cases look secondary

Request Transactions

  • Requesting testing seems tucked away in its current state

  • Currently you can only submit domains with one on each line.

  • Can this be done in a different way

Transaction Details

  • Theres currently a lot going on and its hard to know where to look

  • Screenshots are lower down the page and almost shown as secondary

  • Documents are shown as last on the page and can get buried under history.

User Interviews

Suggested Improvements

Reframe the Challege

How might we create an experience that improves the old LCP Test Transaction features and makes the lives of Visa Analyst’s work process more easier?

Use Cases

I partnered with a product owner, user researcher, and Visa to brainstorm various use cases in a workshop. Our aim was to gain deep insights into their objectives, essential features, and primary tasks. This collaborative effort enabled us to comprehensively understand how to seamlessly integrate these features into the new Test Transactions platform.


We Started with Use cases as the forefront to baseline the design. Check them out below:

Features Outlined from Use Cases

  • The ability to view screenshots and be able to download them within the detail view of a transaction.

  • The ability to download one and all documents within the detail view of a transaction.

  • The ability to add a comment to a test transaction while viewing the details.

Use Case 4

Test Transactions User Flow

After talking through the case studies with my team, I came up with a simple user flow that would kickstart the low fidelity design process. With this user flow it gave me a clear understanding of how the user would navigate test transactions through out MyLS and reach their goal of the detail view.

With this user flow I was able to communicate with the core stakeholders and software development team the overall direction I was going with navigation during our meetings.

User Research

I did 5 user interviews with different Visa Analysts and we focused on understanding the use of the technology, objectives and motivations of the user, and the pain points. These interviews were constructed over zoom and took no longer then 30 minutes.

How it works

Frustrations and Pain Points

  1. Search Functionality: The search functionality is huge and takes up most of the screen and needs to be condensed.

  2. View Screenshots: Viewing screenshots is a essential part of their process and its not prominent in the current UI

  3. Downloading Documents: Like Screenshot, the analysts need to be able to easily see if theres documents and download them. Currently, its not easy to view them.

  4. Commenting: Commenting to notify other Analysts or LegitScript is a huge part of their process and currently its functional but could be improved.

  1. List View UI: The overall is at the bottom of the screen and is unlike current list views today.

  2. Search Functionality: Our users want to a functionality that’s smaller and takes up less of the screen

  3. Screenshots: Our users want a way to have screenshots more accessible and for theme to be bigger

  4. Comments: Our Users want comments to be easily accessible

  5. Overall UI: The overall UI is old and outdated and it needs to be updated.

Neuron Design System Example

New Features in Low Fidelity

Using the LegitScript Neuron Design System and the components I created, I effortlessly crafted wireframes for my use cases and user flows while collaborating with the product owner and software development team every step of the way.

Feature 1
The ability to view screenshots and be able to download them within the detail view of a transaction.

Feature 2
The ability to download one and all documents within the detail view of a transaction.

Feature 3
The ability to add a comment to a test transaction while viewing the details.

Usability Testing

I was able to do 4 usability tests with two different Visa analysts. We asked them general questions to see if there were any stumbling points in their journey using these features and interacting with Test Transactions. These User interviews were 30 minutes and done with Figma via Zoom. We asked them generic questions but also asked them numeric based value questions from 1-10 to get their satisfaction level and recorded them on Google Forms.

Overall we made about 5+ changes to the design that focused more on importance of order but our Visa Analysts loved it. We saw a Satisfaction level of 91% with new features, and 92% average with the overall experience in the product.

Results

4

Tests

5

Iterations

91%

Satisfaction

Through out this process, I contributed to maintaining and expanding LegitScript's established design system by creating components. Their extensive library includes over 100 components spanning Colors, Typography, Grid, Icons, Buttons, Cards, Modals, Forms, and more. While leveraging existing components, I also had the opportunity to enrich the system with many new components of my own design from this project.

Development , Handoff, and Documentation

During design, we involved developers in project discussions to ensure alignment on design and feasibility and address technical challenges. We include detailed annotations and design artifacts to facilitate smooth handoff from design to development. Handoff conversations at the end of the design phase clarified expectations and resolved any potential challenges, ensuring alignment across teams.

Final Prototype

After hitting a final design, I designed a final prototype that made it easy for our developers and core Visa stakeholders to see
the end goal of our efforts highlighting the key features we implemented.

Redesigning Test Transactions

Below is the current Test Transactions experience used by Visa Analysts, which we will integrate into Merchant monitoring.

Business goals with this Update

  1. Visa has a lot of Analysts so this would improve their work flow tremendously

  2. . If done correctly, this would speed up their process with vetting transactions. Thus, being able to do more work and catch more faulty transactions.

Revisiting Measures of Success

Imediate:

  • We saw a 91% satisfaction level with the new features. They were more then satisfied!

  • We saw a 92% satisfaction level with the overall experience.

In the future:

In the future we plan on testing Exit page metrics to understand if users are engaging with the content and Pages per session to see if the quality of content is in a good order.

One of the hardest parts was creating a flow that solved Visa’s core needs. This required a lot of trial and error but overall the solution we came up with solved the problem and they were very happy with where things turned out. We met in person at the offices and they were more then happy with the overall flow that focused on their needs.

Working with the new design system made scenarios easy and it was great to being able to contribute to a ever growing new design system with LegitScript. I am excited for future projects on the design system and i’m excited to able to contribute to it over time.

Takeaways: