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
Competitive Audit
Wireframes
Visual Design
Testing
Type
Personal
Duration
2 months
Idea Synthesis
I came across the scientific term for peanuts that are often hidden in products.
Common name
Peanuts
Name found in food and skincare products
Arachis hypogaea
This can pose serious health threats to those who are allergic to peanuts. So, it got me thinking…
Initial question
How do people with allergies and food intolerances avoid specific ingredients when they are listed under scientific or less recognizable names?
Understanding the users
One-on-One Interviews
Gaining first-hand insights
My goal in conducting this interview is to connect with end users, learn about their experiences, and understand theirs unique needs to inform the design of my product.
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.
User pain points
Allergies and food intolerances often discourage people from trying new products.
It takes too much time and effort to look through ingredient lists.
The terms used in ingredient lists are too confusing.
Competitive Audit
Analyzing competitors
Based on 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 on food and cosmetics
•
Some has scanning ability that let users scan product's barcode to learn more about its ingredients
Defining the problem & ideating solutions
Using findings from the user interviews and the competitive audit, I defined the problem my product aimed to address.
Problem
People with allergies or food intolerances struggle to try new products due to hidden allergens and confusing ingredient terms. Existing solutions have limitations, making it hard to quickly access clear and accurate information.
Product Goal
With the problem defined, the goal of my product is to create a mobile app that helps individuals with allergies or food intolerances easily access ingredient information, enabling them to safely try new products.
Key Features
I defined the following key features to help my product address the above goal while keeping users front and center.
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.
Simple ingredient and allergen lists
Provide easy-to-understand ingredient and allergen lists to help users make informed decisions quickly.
Prototyping Solutions
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
To transition from low-fidelity to high-fidelity wireframes, I created an 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.
Design System
This design system includes components, color schemes, and typography to ensure a cohesive and consistent user experience.
High-Fidelity Wireframes
Bringing research and design together
Incorporating insights from the research phase with the visual design elements from the design phase, I created these high-fidelity wireframes to showcase the seamless and intuitive interface intended for my product.
Onboarding
First-time users will be welcomed by four introductory screens that highlight the app's key features. These screens provide a brief overview, combining visuals and concise text to ensure users quickly understand the main functionalities of the app.
Filtering
One of our core features is advanced filtering. Users can customize their search results by including or excluding specific ingredients and even add their own ingredients. On the filtered results page, users can easily remove any applied filters by clicking the 'x' on the filter tags.
Profile
On the user's profile page, they can configure their search preferences, which will be applied to all future searches. These settings can be adjusted at any time. Additionally, users can access their saved products and manage other app settings from this page.
Testing
Accessibility Testing
Ensuring product is accessible
Before going into usability testing, I wanted to make sure my product is accessible to all kinds of users.
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 interface through a color blindness simulator to ensure information remain distinguishable to users with various forms of color blindness.
Usability Testing
Evaluating effectiveness, efficiency, and user satisfaction
I conducted a usability test 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.
Findings
Positives:
Intuitive and clean interface
Easy-to-use filters
Easy access to saved products
Helpful personal preferences
Areas for improvement:
Improve ingredient lists further
Add safety ratings
Assure information accuracy with resources
Access to search from anywhere within the app
What's next?
Reiterate design based on feedback
Develop a safety rating system
Keep the search bar at the top of every page
Ability to scan and translate non-English products
Improve and simplify ingredient lists further