Trusti

Helping consumers shop securely, stress-free.

INTRODUCTION

Trusti is a browser extension that helps consumers engage in safe online shopping practices by alerting them when they’re on an unsafe website. By providing rationale and safer alternatives, consumers can shop online securely without disruption.

Team

1 Product Design Lead (me)
1 Visual Designer
1 Researcher
1 Product Manager

My Role

Product Design
Interaction Design
Visual Design

Context

MHCI+D Graduate School Project
Designing Information Experiences

Timeline

May - Jun 2024

My Contributions

I served as the primary Product Designer for Trusti, guiding a team of graduate students unfamiliar with UX Design from research to developer handoff. I was responsible for shaping the concept of safe, seamless shopping experiences and designing the core touchpoints that grounded our product in user experience rather than feature-centric design.

Interaction Design

I created customer journey maps, user personas, and user flows, specifically the scam detection and suggested alternatives flow.

Visual Design

I led all facets of designing the mobile app’s interface, including reusable components, colors, typography, and layout.

Rapid Prototyping

I rapidly iterated low-high fidelity prototypes based on feedback to ensure they were intuitive and met user needs.

User Research

I spearheaded user research, leading user interviews and 2 rounds of usability testing to directly inform design decisions.

SOLUTION OVERVIEW

Problem Space

Online shopping scams have inflicted over $40 billion in losses from payment fraud alone, with Millennials & Gen Z users being the most likely to fall victim to attacks.

As a result, users experience heightened anxiety and a diminished sense of trust and reluctancy in purchasing from online retailers, especially smaller or newer businesses.

Final Designs

01
Scam Detection
Consumers will understand why Trusti determined the e-commerce site they’re on as fraudulent with sources to support their findings.
02
Safe Shopping Alternatives
Consumers will be provided with safe alternative websites to explore immediately to encourage their online shopping experience disruption-free.

03
On-Demand Support
Consumers can streamline their ability to get questions answered & receive clear guidance without having to leave their browser.
RESEARCH

Methodologies

I employed multiple user research methods to understand the magnitude of online shopping scams nationwide, understand the experiences of users who have been scammed, and identify actors trying to tackle the same issue.

Desk Research
18 articles
User Interviews
5 participants
Competitive Analysis
6 market solutions
User Personas
gen Z & seniors
User Personas ➚

Primary Research Questions

01
What does the day-to-day of a caregiver in an assisted living facility look like?
02
How do staffing shortages influence the experiences and responsibilities of care staff?
03
What initiatives are in place to address the challenges care staff face in understaffed facilities?
04
What initiatives are in place to address the challenges care staff face in understaffed facilities?
Research Plan  ➚

Competitive Analysis

After conducting a competitive analysis evaluating current market solutions, I determined that while none of them sufficiently addressed e-commerce, they each had qualities that could collaboratively address our identified problem space.

Key Research Insights

01 Users are still falling for scams despite Google's cybersecurity measures.

52.5% of users who were a victim of cybercrime fell for phishing attacks despite Google’s cybersecurity measures blocking 99.9% of phishing attempts from reaching users.

02Scammers are growing increasingly sophisticated as technology advances.

The majority of participants fell for scams because the website looked legitimate & offered realistic deals, making it harder to detect red flags.

03 Getting scammed is a highly negative emotional experience resulting in increased anxiety & reduced trust in online retailers.

i am inputting some filler text here, please ignore. i am inputting some filler i am inputting some filler text here, please ignore

04 Users prefer proactive scam prevention over reactive solutions that come into play after they’ve been scammed.

All participants expressed frustration trying to recover from scams, suggesting current systems are insufficient in helping users prevent and/or effectively respond to scams.

DESIGN PROCESS

How might we redesign the online shopping experience to allow consumers to feel safe and confident when making a purchase?

Brainstorming Concepts

With the research findings in mind, I led our team through a brainstorming session. I established 3 design principles that met both our course requirements and user needs:
01 - Educate
Provide learning opportunities to  help users understand why certain websites are scams
02 - Experience
Enable users to continue their shopping experience without disruption
03 - Goal Fulfillment
Allow users to achieve their goal of making a well-informed, safe purchase

Chosen Design Concept - Browser Extension

After analyzing our research findings, it was noted that all users had used a computer when making the fraudulent purchase - which led us to believe a browser extension would be the best tool in facilitating a safe online shopping experience.

We focused on 2 primary touchpoints:
Browser Alert
Browser extension alerts the user when they’re on an unsafe website, providing the ability to learn why.
Safe Suggestions
Browser extension suggests safe alternatives to explore, allowing their shopping experience to continue.

Mapping the User Experience Roadmap

With severe time constraints for this project, I employed 2 UX design methods to identify the key touchpoints for intervention and optimize the user’s path towards accomplishing their goal. This guided our design concept to ensure that it was user-centered and optimized for a cohesive, fulfilling user experience.

Customer Journey Map
User Flows
Link  ➚
Link  ➚

Low-Mid Fidelity Wireframes

I created low fidelity wireframes to serve as the basis for the first round of usability testing.
SAFE DETECTION FLOW
UNSAFE DETECTION FLOW
USABILITY TESTING

Round 1 - User Feedback & Design Iterations

After creating wireframes, I led 2 rounds of usability testing to observe how users engage with the browser extension when browsing online retailers to identify opportunities for improvement. In the first round, I sought feedback to uncover whether the tool made it easy for users to determine if and why a website was safe to purchase from when browsing.
Key Takeaway: Information Overload & Mistrust in Safety Determinations
01     Users need the information presented to be succint.
All participants found the browser alert wordy and hard to skim, which led to feelings of overwhelm.
Improved Iteration: Reduce unnecessary text and emphasize visual hierarchy to make the alert scannable.
02     Users need to be redirected to relevant websites immediately.
All participants expressed that they would have exited the website immediately after it was flagged, thereby preventing them from viewing the suggested alternative websites page since it required them to report the website first.
Improved Iteration: Provide users with suggested alternative websites on the same screen that alerts them of the scam.
03      Users need alerts to appear trustworthy and disruptive to convey importance.
Half the participants thought the the alert was an ad and didn’t find it trustworthy, since they could continue scrolling without addressing it.
Improved Iteration: The user’s window is grayed out, forcing the user to direct their focus to the unsafe alert detection. This mimics the behavior of a site blocker, which users associate with taking immediate action since it feels more serious and hard to ignore.
04      Users need immediate guidance on how to recover from scams.
A few participants expressed anxiety over not knowing the immediate steps to take after realizing they had been scammed.
Improved Iteration: Provide users with an AI-driven chatbot that offers immediate guidance and resources to recover from a scam.

Round 2 - User Feedback & Design Iterations

I rapidly iterated the low-fidelity wireframes based on user feedback into mid-fidelity prototypes. I created a usability test plan to gather authentic feedback and identify pain points that would not be apparent in low-fidelity prototypes (ie. visual hierarchy, micro-interactions, unclear iconography) before investing resources into development.



These were my design goals:
01
Enable users to know why a website is safe or unsafe
02
Allow users to continue their online shopping experience without disruption
03
Allow users to feel more safe and confident when making online purchases

04

Provide users with immediate support should they get scammed online
Usability Test Plan  ➚
Key Takeaway: Misalignment with User Expectations
01       Users want to know how we determine a website to be fraudulent.
The majority of participants were hesitant to trust the rationale behind a website's safety, expressing a need for data to support these claims.
Improved Iteration: Added external data sources to support safety claims, boosting user confidence and trust in our assessments.
02      Users need at-a-glance information to quickly assess and decide which website(s) to explore.
Most participants expressed that there wasn't enough information about the suggested websites to help them choose the best option to explore. They expressed a need for transparency - in terms of price and whether the suggestions were advertisements.
Improved Iteration: Enhanced transparency by adding price tags and ad indicators to recommended websites, helping users make more informed purchasing decisions.
03       Users want more options to choose from when online shopping.
Although all users indicated they would use this feature in the future, they expressed a desire for more diverse options in case the suggested websites aren't of interest.
Improved Iteration: Added an 'Explore More' button to give users the option to refresh and discover additional vendors.
04       Users want direct contact options to resolve issues efficiently.
Most participants appreciated the concept of on-demand support but desired more direct options, like phone numbers, to streamline issue resolution.
Improved Iteration: Added direct contact links, such as phone numbers, to provide users with immediate support and eliminate the need for further web searches.

High-Fidelity Mockups

Scam Detection & Safe Shopping Alternatives
ON-DEMAND SUPPORT

Visual Style Guide

I created the app’s visual style guide to streamline our workflow and ensure consistency through reusable components and standardized patterns.
REFLECTION

Measuring Success

Ideally, I would track key metrics such as the reduction in users proceeding with unsafe websites, the percentage of users who engage with safer alternatives, and the increase in reported user confidence through post-use surveys. Additionally, measuring a decrease in reported incidents of scams and monitoring the average time users spend reviewing rationale before making informed decisions could provide valuable insights for future iterations.

Next Steps

Exploring Mobile Shopping Experiences
Our browser extension addresses scams discovered during desktop purchases, but with small businesses increasingly advertising on social media, how can we adapt the design to support consumers who make purchases on their mobile devices?
Assessing User Need for the Chatbot
Our on-demand chatbot supports users who override Trusti's safety alerts and fall victim to scams, addressing the anxiety and overwhelm reported post-scam in user research. However, is this feature necessary if alerts effectively prevent scams?

If we retain the chatbot, how can it help users recognize risky patterns in real-time to make safer decisions as they shop?

Key Learnings

Effective Prioritization Under Tight Deadlines
Given the tight 4-week timeline, prioritization was key. I had to assess which UX processes would have the greatest impact while making the tough decision to skip other  steps that may have been valuable if we had more time.
Rooted in Experience, not Features
Given the project scope, it would have been easy to focus solely on features. Instead, I prioritized the user's journey, enabling me to design an experience that seamlessly aligned with their online shopping habits. By focusing on their needs, we created a solution that met both functional and emotional requirements, ensuring a shopping experience that felt safe, simple, and uninterrupted.
Leading through Uncertainty
As the lead product designer on a team with limited UX experience, I faced the challenge of bridging the gap and guiding the team through the UX process. Despite feelings of imposter syndrome, this experience helped me strengthen my leadership and communication skills, enabling me to guide the team effectively and gain confidence in my design decisions.
Every Decision Should Be Driven by Logic
It’s easy to focus on aesthetics when designing interfaces, but every visual element must serve a purpose. If an icon or text doesn’t drive action or convey important information, it shouldn’t be included. By questioning the need for each element, we ensured that the UI was shaped by the user experience, with interaction flows and goals guiding the design of the browser extension.