Appetite
Food Delivery App
A mobile food delivery app designed from zero, from hand drawn sketches to a complete dark mode UI system with 11 screens covering the full ordering journey.
11
Screens covering the complete user journey
Splash to profile management
Full
End to end process from sketch to hi fi
Hand sketch, wireframe, hi fi
Dark
Fully realized dark mode visual system
Custom palette, typography, components
Solo
Research, UX, visual system, and UI design
All stages, one designer
Solo designer on a personal portfolio project. Responsible for the full process: competitive benchmarking, user research, persona creation, hand sketched wireframes, Figma hi fi design, and visual system definition. Year: 2018 to 2019.
Research
Understanding the market. Competitive benchmarking of iFood, Uber Eats, and Rappi. User research focused on what Brazilian users found frustrating about existing food delivery apps, including speed of ordering, restaurant discovery, and order tracking visibility.
Sketching and Wireframes
From paper to Figma. Full app flow sketched by hand before moving to digital. Paper sketches validated the structure before any visual design decisions were made. Figma wireframes then established spacing, hierarchy, and interaction patterns.
Hi Fi and Visual System
Building the dark mode system. Complete visual system defined from scratch, including color palette, typography scale, component library, and iconography. All 11 screens brought to hi fidelity with full dark mode implementation.
What Brazilian users actually
wanted from food delivery
Competitive benchmarking and user research focused on identifying the gaps between existing apps and what Brazilian users found frustrating, forming the design brief for Appetite.
Benchmarking
iFood, Uber Eats, Rappi
Systematic review of the three dominant food delivery apps in Brazil, mapping strengths and weaknesses in restaurant discovery, ordering flow, tracking, and reorder experience. Restaurant photography quality and order transparency were consistent weak points.
User Research
Brazilian food delivery users
Informal research conversations with frequent food delivery users in Brazil. Key themes included frustration with cluttered restaurant lists, distrust of delivery time estimates, and the friction of rebuilding orders placed before.
Flow Mapping
The complete ordering journey
Mapped the full journey from app open to meal delivered, identifying the moments with the highest drop off risk, such as restaurant selection, customization, and payment, and designing directly for those friction points.
Visual Benchmarking
Dark mode food apps
Analysis of dark mode implementations in food and lifestyle apps showed that dark mode worked best for food delivery when it enhanced food photography contrast rather than competing with it. The palette was designed with this in mind.
01
Restaurant discovery was overwhelming, not delightful
Existing apps used long flat lists of restaurants with inconsistent photography and minimal filtering. Users defaulted to searching for restaurants they already knew rather than discovering new ones.
02
Order tracking caused anxiety instead of reassurance
Delivery time estimates were often inaccurate and the tracking experience was a static progress bar with no real information. Users wanted to feel informed, not just hopeful.
03
Reordering was unnecessarily complex
Users who ordered regularly from the same restaurants had to rebuild their orders from scratch every time. Quick reorder was either absent or buried, a missed opportunity to serve the most loyal users.
Designing a food delivery app
worth using
Design decisions built directly from research, prioritizing discovery clarity, tracking transparency, and reorder speed as the three core differentiators.
HMWMake restaurant discovery feel curated and personal rather than overwhelming
HMWDesign a tracking experience that gives users genuine information rather than a static progress bar
HMWMake reordering feel like a first class feature rather than an afterthought
HMWBuild a dark mode visual system that makes food photography look better, not worse
Category first discovery
Home screen leads with food categories and curated collections rather than a raw restaurant list, helping users who do not know what they want narrow down quickly. Featured restaurants shown with high quality photography against the dark background.
Live tracking with context
Order tracking screen shows real time delivery progress with map view, driver information, estimated arrival, and step by step status, giving users actual information rather than a generic on its way message.
Quick reorder from profile
Order history accessible from profile with one tap reorder functionality, rebuilding the exact previous order with a single action. Favorite restaurants pinned for fast access.
Dark mode visual system
Custom dark palette with a deep background, warm white text, and amber accent, designed so that food photography appears bright and appetizing against dark backgrounds. Clean sans serif typography throughout.
From hand sketches
to 11 hi fi screens
The full design process: paper sketches establishing structure, Figma wireframes defining layout, hi fi screens realizing the visual system.
Appetite was designed in 2018 and 2019 as a personal portfolio project. The process deliberately followed a rigorous design discipline: no Figma until the sketches were right, no color until the wireframes were validated. Each phase served as a constraint that pushed the final design to be more intentional.
Wireframes, full app flow from onboarding to order tracking
Hi Fi, dark mode visual system across 11 screens
Sketching Phase
Paper sketches for all 11 screens
Every screen was sketched by hand before any digital work. The constraint forced decisions about what information was essential on each screen, preventing the common trap of adding elements just in case.
Wireframe Phase
Grayscale Figma wireframes
Monochromatic wireframes established spacing, type hierarchy, and component placement. Decisions made here, such as where the cart summary sits or how tracking steps are displayed, are much cheaper to change at wireframe than at hi fi.
Visual System
Building the dark mode palette
Defining the color system before applying it to screens prevented inconsistency. Background, surface, text, accent, and state colors were all defined in a token system before any screen used them.
A complete product
built with discipline
11 screens covering the full user journey, from splash to profile management, with a consistent dark mode visual system.
11
Hi fi screens covering full journey
Dark
Complete dark mode design system
Full
Sketch, wireframe, hi fi process
Solo
Research through visual design
Design Decisions
Category first discovery replacing flat restaurant list
Real time tracking with map and driver info
One tap reorder from order history
Dark mode optimized for food photography contrast
Screens Covered
Splash and Onboarding
Home, Discovery
Restaurant Detail
Cart and Checkout
Live Order Tracking
Order Confirmation
Profile and Order History
Reflection and
key learnings
What a self directed portfolio project taught me about discipline, process, and the value of constraints.
The sketch first constraint forced better decisions. Problems that would have been invisible in wireframes were caught on paper, where they cost nothing to fix
Building the visual system before applying it to screens created real consistency. Every color and type choice came from a defined token, not an in the moment decision
Focusing the research on three specific differentiators, discovery, tracking, and reorder, gave the design a clear point of view instead of trying to be everything at once
Dark mode for food apps is a genuine design challenge, not just an aesthetic choice. It only works if the palette actively enhances the photography
Designing for a competitive, well understood market
Food delivery apps are well established, with users holding high expectations set by iFood and Uber Eats. Differentiating Appetite required finding genuine gaps in existing products, not just adding features.
Self imposed process discipline without external accountability
On a solo portfolio project, there is no PM or stakeholder to enforce process. The temptation to skip sketching and go straight to Figma was real. Resisting that temptation made the final design better.
"This was early work, but it was real work. Every screen was a problem to solve, not a canvas to fill. The discipline I built here, sketch first, system before application, constraint before creativity, is still how I approach every project."
Otávio Bonato, Product Designer, Slideworks, 2018 to 2019