UX/UI Design
Brand Design
A self-initiated mobile app that helps users check nutrition and allergen info at a sandwich shop (Lite Bite Subs), supporting healthier meal choices.
2024
LITE BITE SUBS
The Problem
Many restaurant menus provide limited nutritional information, making it difficult for users to make informed meal choices.
-
Users with dietary preferences (vegetarian, lactose-free, high-protein diets) struggle to find suitable options.
-
Allergen-conscious users often don’t have clear ingredient breakdowns.
-
Fitness-focused individuals need quick access to nutrition facts but don’t have time to calculate meals manually.
-
People who want to make healthier choices when eating out lack the tools to compare meal options easily.
The Goal
Lite Bite Subs helps customers quickly check nutritional values, build custom meals, and save their preferences, ensuring they make healthier and more informed meal choices with ease.
Role in the Project
Designed the entire user experience, user interface, and branding from scratch.
KEY PERSONAS
Key Insights
Users need a clear and quick way to check nutrition facts and allergens.
Many users struggle to customize their meals in a way that fits their diet.
Time constraints make it difficult for users to manually calculate nutritional values.
USER JOURNEY MAP - ANNA
COMPETITIVE AUDIT ANALYSIS
Friendly and transparent brand identity that reflects the app’s purpose: helping people make healthier food choices with clarity and ease.
The tone is approachable and casual, designed to feel helpful and trustworthy without being too formal.
Adds energy and highlights CTAs.
Suggest health and freshness.
Softens interface and keeping it easy to read.
BRANDING & UI DESIGN
Jomhuria
Headers; clean and geometric
Jost
Poppins
The logo combines stacked sandwich layers with bold type to reflect both the product and the layered nature of nutritional information.
Consistent, easy-to-recognize icons support quick navigation and reflect the app’s clean, straightforward personality.
Body text; modern and soft
Display font to add visual interest in branding
The final mockups reflect a clearer, more purpose-driven experience. By removing ordering-style visuals and emphasizing nutrition data, the app now feels more like a meal-planning companion than a delivery tool. The updated layout, navigation, and messaging guide users toward smarter, more informed food choices from the start.
These wireframes introduced color, iconography, and more structured layouts to bring the interface closer to its final form. While visually clearer than earlier drafts, the design still leaned too heavily on food delivery patterns that is leading to usability issues around the app’s core focus. This feedback guided the next round of changes.
I started with low-fidelity wireframes to map the app’s basic flow and structure.
These early drafts helped shape screens like the menu and nutrition view but initially looked too much like a standard food ordering app.
Realizing it didn’t highlight the app’s core focus -nutrition guidance- the design later evolved into a more purpose-driven direction.
USABILITY TESTING FINDINGS
Usability testing confirmed that users valued quick access to nutrition information over decorative or ordering-related visuals. Many participants initially mistook the interface for a food delivery app, which highlighted the need to better communicate the app’s purpose.
In response, ordering-style elements were removed, and the visual hierarchy was restructured to place calorie, macro, and allergen details front and center. The navigation was simplified to help users reach nutrition data in fewer taps, while concise, goal-oriented messaging guided them toward healthier choices.
As a result, the app evolved into a clear, purpose-driven meal-planning companion that helps users make informed decisions from the very start of their browsing experience.