Routezy
Routezy is a mobile transit app designed to help Gen Z users navigate public transportation easily and efficiently!
Roles
Product Designer
Responsibilities
User Research
Wireframing
Prototyping
Team
Individual
Duration
2 days
This project was completed within a limited timeframe (10/10/24 - 10/11/24) as part of a design assessment during a hiring process.
Design Prompt
Design a mobile transit app that enables Gen Z’ers to find and navigate public transit routes efficiently.
Understanding the users
Primary Research: Interview
After receiving the design prompt, I conducted primary research by interviewing a friend who is a daily public transport rider to gain insights into common pain points. Since the app's target audience is Gen Z, I also conducted secondary research through online resources to better understand what features and design elements appeal to this demographic and make an app enjoyable for them.
Given the alarming rise in allergic reactions and the challenges in identifying allergens in everyday products, the core question became clear.
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.
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?
Final Product
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
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.
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.
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.
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.