People in the U.S. live with food allergies
SUN
16:00
PT
Case Studies / Mobile Product Strategy
A mobile product that helps users understand food labels, identify dietary risks, and make safer purchasing decisions through personalized guidance.
01
Overview
Clir: Scan Clear, Eat Clear
Clir connects personalized dietary preferences with barcode and ingredient information, helping people understand whether a food product fits their individual needs.
The product was shaped across strategy, user experience, interface design, and delivery, with a focus on making complex food-label information clear enough to support decisions in the moment.
- Role
- Product Manager,
UX/UI Designer - Platform
- React Native
Mobile App - Focus
- Food Safety,
Personalization - Priority
- Label Clarity,
Decision Support
02
Problem & Strategy
Making Food Information Personally Actionable
People with dietary restrictions often struggle to determine whether a product is safe. Ingredient labels are technical and difficult to interpret quickly, while the available information is rarely organized around individual dietary needs.
Clir connects each user’s dietary profile with barcode and ingredient-label data, transforming complex information into clear guidance.
Experience difficulty interpreting food labels
Avoid products due to uncertainty
03
Brand & Design System
Designing for Clarity and Trust
The Clir identity combines clarity, camera-based scanning, and food-label transparency. The circular logo references a camera lens and the process of revealing information that was previously difficult to understand.
Deep green communicates trust and safety, while soft mint backgrounds make complex information feel calm and approachable. Pretendard supports clear communication across the interface.
- Primary
- Deep Green
- Secondary
- Soft Mint
- Typography
- Pretendard
- Design Tone
- Clear, Calm, Accessible
Clear + Camera :
Combining clarity and camera-based scanning, Clir helps users reveal food-label information that is usually difficult to understand at a glance.
04
UX Process
From User Needs to Product Flow
The information architecture was organized around the key actions users perform before and during shopping: creating dietary profiles, scanning products, understanding personalized results, searching alternatives, and saving trusted products.
Low-fidelity wireframes were used to test hierarchy and reduce the number of steps between scanning a product and making a decision.
Core Journey
- 01Set Preferences
- 02Scan Product
- 03Identify Risks
- 04Understand Results
- 05Decide
Wireframe
Low-fidelity screens were used to test the main shopping flow, from dietary preference setup to scanning, result interpretation, profile management, and saved product history.
05
Product
From Flow to Final Product
The final product translates the scanning journey into clear mobile screens that support setup, product search, barcode scanning, personalized results, and profile management.
