InScan
InScan is a mobile app designed to help users make informed health choices. It allows users to search and filter products based on their ingredient preferences as well as scanning products to instantly reveal common allergens and ingredient lists.
Roles
UX Researcher
Product Designer
Brand Designer
Responsibilities
User Research
Visual Design
Wireframing
Prototyping
Testing
Team
Individual
Duration
2 months
Why a personal project?
I enrolled in the Grow with Google UX Design course to further hone my skills. While learning, I encountered a problem close to my heart, and decided to tackle it as a personal project, applying what I learned and setting time constraints to simulate a real-world experience.
Defining the Problem
Discovery & Research
One day, I came across a peanut product with no peanuts listed in the ingredient list. It wasn’t until I dug deeper that I realized peanuts were hidden under the unfamiliar name ‘Arachis hypogaea.’ This hit close to home because my sister had once been rushed to the ER due to a severe allergic reaction. That experience made me wonder: how many others in the U.S. are unknowingly exposed to hidden allergens?
So, I did some research and found that:
>25%
of Americans have at least one allergy
200K
Americans sent to the ER due to food allergy alone each year
377%
increase in anaphylactic food reactions between 2007 and 2016
Given the alarming rise in allergic reactions and the challenges in identifying allergens in everyday products, the core question became clear.
Problem Scope
How might we empower individuals to easily identify and avoid hidden allergens or intolerances in both food and products, ensuring their safety and peace of mind?
To better understand the end users, I conducted 1:1 interviews and found these main pain points that greatly shaped the core features of the product.
Hidden allergens
Like peanuts, there are many allergens hidden in food and skincare products under their scientific/chemical names.
Difficulty finding safe products
People with allergies or food intolerances struggle to find products free from certain ingredients.
Time-consuming process
It takes too much time and effort to go through ingredient lists and try to understand the confusing terms.
Limitations with existing solutions
Existing solutions only offer search for either food or beauty products, not both.
Product Goal
It is evident that any solution must not only provide clear and accessible ingredient information but also address the fragmented search experience between food, beauty products, and even medications. The goal is to offer users a streamlined, personalized way to ensure their safety—whether they’re at home or shopping on the go.
Final Solution
After researching existing solutions, it became clear that a key feature for managing allergens and intolerances is allowing users to control which ingredients they include or exclude in their searches. Additionally, users need quicker ways to understand ingredient lists, especially when allergens are hidden under unfamiliar names.
InScan solves both problems by offering customizable searches alongside a scanning feature that highlights common allergens, saving users time and reducing the stress of navigating complex labels.
Let's walk through my design solutions by following Neath's journey!
Scenario 1
Onboarding, searching, and filtering
Neath is looking for a new concealer but needs to avoid allergens like fragrance and silicone, both of which have caused skin irritation in the past. So, she downloaded InScan to make the search easier.
Task 1
Onboarding
Key Feature
Introductory screens
Justification
Based on recent research, 80% of users have reported uninstalling an app because they didn’t know how to use it effectively. This highlights how crucial onboarding is for user retention and engagement
Task 2
Searching for concealers
Key Features
Category display + real-time product suggestions
Justification
Research shows that 74% of users are more likely to abandon a product search if they can’t easily navigate or understand available options. By displaying the top three categories (food, cosmetics, and medication) under the search bar, the app provides clarity on the product types available.
Task 3
Filtering out silicone and fragrance
Key Feature
Ingredient exclusion/inclusion filter
Justification
This advanced filter gives users control over their product searches, helping them avoid allergens or irritants and saving time. This ensures users like Neath can quickly find safe products without manually reviewing long ingredient lists.
After applying these filters, Neath decides she also wants to make sure the concealer contains hyaluronic acid, which is beneficial for her dry skin.
Task 4
Adding an extra filter for hyaluronic acid
Key Features
Ingredient exclusion/inclusion filter + customization
Justification
By letting Neath exclude silicone and fragrance while including hyaluronic acid, InScan enhances user control and flexibility, allowing Neath to easily tailor her search to her preferences with minimal effort.
Feature Detail
Users can easily remove any filter by simply clicking the 'x' on each tag, or 'clear all' to remove all applied filters.
Scenario 2
AI-powered scanning
Neath is out shopping and spots a new primer that catches her interest. Concerned about hidden allergens, she decides to use InScan to check if the product is safe for her to use.
Task 1
Scanning a primer for hidden allergens
Key Features
AI-powered scanning and highlighted allergens
Justification
The AI-powered scanning feature allows Neath to scan any product with or without a barcode. The app then highlights any potential allergens in the product, ensuring Neath can quickly and confidently assess product safety.
Scenario 3
Profile customization
Neath is tired of repeatedly applying filters for allergens whenever she searches for new products. To streamline her experience, she goes to the profile page to configure her search preferences once, ensuring that all future searches and scans are tailored to her needs.
Task 1
Configuring search preferences for future searches
Key Feature
Personalized search settings
Justification
This saves Neath significant time and effort by eliminating the need for manual filtering every time she looks for a product. Studies show that personalization increases user satisfaction by up to 80%, as it reduces decision fatigue and enhances user confidence.
Results
Success Metrics
After implementing these key features, I conducted user testing with 18 participants to evaluate the app’s effectiveness. The testing focused on how users interacted with the allergen filtering, search, and scanning features.
90%
Task Completion Rate
45
NPS (Net Promoter Score)
Process & Challenges
I followed the Design Thinking framework for this project, which guided me through the process of deeply understanding user needs and iterating on my solutions.
One-on-One Interviews
Gaining first-hand insights
I started by conducting 1:1 interviews to connect with end users, learn about their experiences, and understand theirs unique needs to inform the design of InScan. I followed these following steps:
1.
Craft interview script
I created a script for a semi-structured interview with 7 open-ended questions to learn more about the needs of people with allergies or food intolerances.
2.
Select participants
The participants were selected based on their relationship with allergies and food intolerances.
3.
Conduct Interviews
I scheduled and met up with 3 participants to conduct in-person interviews.
4.
Aggregate findings
Some allergens are easier to avoid than others, like shellfish and seafood. While others are more hidden and would require more time and effort to identity.
Competitive Audit
Analyzing competitors
Based on the user interviews, I analyzed both the competitors mentioned by interviewees and those I identified myself. The goal of this audit is to uncover the strengths and weaknesses of these competitors. This allows me to identify usability problems and reveal gaps and opportunities in the market.
Competitors
During this audit, I focused on 5 aspects: searching, ingredient lists, filtering options, scanning ability, and product categories.
Findings
•
Some allow users to choose specific ingredients to include or exclude in search results
•
Some ingredient lists contain too many details which makes them confusing and overwhelming
•
All competitors focus either on food or cosmetics
•
Some has scanning ability that let users scan product's barcode to learn more about its ingredients
Challenge
Given the time constraints, what features will deliver the most value to users and should be prioritized for implementation?
To address the time constraints, I prioritized features that directly tackle the core problem—helping users avoid allergens. While offering a simplified ingredient list would be beneficial, it required significantly more time for research and testing.
After conducting a quick survey to assess user needs, I found that most users primarily care about whether products contain specific ingredients they want to avoid or include. This insight confirmed that a simplified ingredient list, while useful, wasn’t an urgent feature for this first version of the product.
Key Features
Addressing core user needs
Quick search across categories
Instantly search for any product, including food, cosmetics, and even medications.
Ingredient inclusion/exclusion filters
Customize search results by including or excluding specific ingredients to meet user's dietary and safety needs.
AI-powered product scanning
Easily scan any products, even those without barcodes.
Customized user profiles
Show products based on users' unique preferences.
Information Architecture
Structuring content
After establishing the key features for my product, I started to explore a structure that allows users to efficiently learn about any product with just a few taps.
Low-Fidelity Wireframes
Conceptualizing design ideas
The IA above allowed me to quickly go from one wireframe to another. While sketching these layouts, I took into consideration the hierarchy of information as well as the visual balance of the overall interface.
Visual Design
Creating brand identity
As the sole designer on this project, I also took on the role of brand designer, creating a unique identity mark and a visual design system to ensure consistent branding throughout the product.
Identity Mark Ideation
I used Crazy 8's to brainstorm identities marks. Then, I selected my favorite designs from this exercise for further digital exploration.
Accessibility Testing
Ensuring product is accessible
Contrast Check
I conducted a contrast review and implemented necessary changes to guarantee essential components are perceptible by all users.
C2C2C2
8F8F8F
Color Blindness Check
I run my color palette through a color blindness simulator to ensure information remain distinguishable to users with various forms of color blindness.
Design System
Once I ensured that my color palette passed accessibility testing, I finalized the design system. This included components, color schemes, iconography and typography, all carefully crafted to provide a cohesive and consistent user experience.
Usability Testing
Evaluating effectiveness, efficiency, and user satisfaction
After I finished my high-fidelity prototypes, I conducted a usability testing with 18 participants to identify usability issues and gather qualitative feedback on the user experience.
Key Performance Indicators (KPIs)
In this usability testing, I measured performance using the following KPIs: task completion rate, time on task, user error rate, and user satisfaction.
Tasks
Participants were asked to complete these main tasks:
Search for products to avoid certain allergens
Search for products that contain a custom ingredient
Add allergens and preferred ingredients to their profile
Results
90%
Task Completion Rate
30-45s
Time on Task
10%
User Error Rate
45
NPS
Qualitative Feedback
Positives:
Intuitive and clean interface
Easy-to-use filters
Easy access to saved products
Helpful personal preferences
Areas for improvement:
Improve ingredient lists
Add safety ratings
Assure information accuracy with resources
Access to search from anywhere within the app
What I learned
User-centered decisions
Through qualitative research and user testing, I learned that users prioritize identifying allergens and safe ingredients over secondary features. This guided the design choices, ensuring the product directly addressed users’ most pressing needs.
Balancing design and functionality
As the sole designer, I not only had to focus on creating a visually appealing product but also ensure that every design element enhanced functionality. Creating a cohesive brand identity and a consistent design system helped maintain both clarity and usability across the product.
Iterative improvements
Throughout the design process, adapting to user feedback and testing insights was essential in creating a product that evolves with user needs.