The Brief
For this project, I was tasked with designing the full visual identity and mobile app for Miles & Meals. It is a subscription service delivering authentic street food straight to customers’ kitchens, focusing on the dishes locals actually eat, from tacos al pastor in Mexico City to bánh mì in Vietnam.
My role was to define how the brand looks, feels, and communicates through the logo, colour, typography, tone of voice, and photography direction. Then, I carried that whole identity through into a working app design.
This project was split into two parts: a brand board communicating the visual direction, and an app letting users manage their box subscriptions and browse recipes.
Design a visual identity that feels worldly, social, and trend-forward without anchoring to a single country or culture.
Build an identity flexible enough to stay cohesive across three distinct box types (Local Legends, Street Made, Neighbourhood Bakes) while letting each feel distinct.
Design a clickable app prototype based on provided wireframes, ensuring strong usability and visual hierarchy.
Target Audience: The Discoverer
The brief defined a single target audience for this project: The Discoverer. These are urban professionals aged 25 to 50 with some experience cooking at home. They actively seek authenticity over mainstream food trends and are drawn to discovery in everything from restaurants to travel. They value convenience, but not at the cost of losing authenticity.
That meant the identity couldn’t tip too far in either direction. If it gets too polished or corporate, it loses the authenticity this audience is actively searching for. If it gets too niche or inaccessible, it loses the convenience and ease-of-use they also expect.
The Process
This is the short version. Want the messy middle, every version and every scrapped idea? It's all in Figma.
Finding the Brand’s Personality
To translate The Discoverer into a visual identity, I explored brand archetypes to define personality and voice. I landed on the Explorer, which is the only archetype driven by curiosity and the hunger for new experience over simple comfort.
Researching Explorer-brand visual language like North Face, Subaru, and Patagonia pointed toward an earthy, bold palette with olive greens, steel blues, and rust tones. However, that palette reads as outdoor gear, not street food. I kept the boldness and warmth from that research, but shifted it toward something more culinary and social, choosing terracotta orange and golden ochre instead of olive and steel blue.
The Big Idea: The Road
Everything about Miles & Meals comes back to one idea: the road. Not just the route a delivery takes, but the roads that connect us all. It is about the hidden alleys and paths that lead somewhere real, like street cones, red stools, or a street corner at night. These are the small, human details of a journey, not just a destination. It shows in the name itself, putting “Miles” before “Meals.”
Building the Visual Identity
I built the mood direction in layers rather than landing on one board straight away. The first moodboard captured the soul through the raw, sensory energy of street food and night markets using warm burnt oranges, deep reds, and dark browns. The second moodboard grounded that energy in Antwerp, the actual city where the brand launches. It used cooler tones like charcoal, blue, terracotta, and cream drawn from Antwerp’s cobblestones and architecture.
Merging those two moodboard layers created the final direction: The Modern Navigator. This board pairs two neutrals (Cream and Charcoal) with three story-driven colours: Terracotta Orange for the “Miles” of the journey, Golden Ochre for a golden-hour café glow, and Deep Teal for the shift from a busy street to a calm late-night dinner.
Finding the Right Typeface
Logo Design
Three concepts made it to the shortlist: a flowing cursive mark, a target location pin, and the mm + bowl symbol. The cursive mark looked good, but it came from playing around rather than from the concept. It didn’t carry the playfulness or the idea of sharing a meal.
Early feedback pushed me to merge the “why” and “how” moodboards, which is where the real concept surfaced: the roads that connect us all, the busy pace of the city, and the secret paths an explorer takes to find the best meal.
The mm + bowl mark won, but the early version relied on a tall, rigid mark with small text stacked underneath. I reworked it into a flexible lockup system built like a badge. Placing the mm icon inside a terracotta container next to a dark block for the name gives the brand an adaptable signature that scales easily across packaging, stickers, and app screens. Every detail in the mark carries intention, from the uniform strokes to the gaps between letterforms.
App Design
I reworked the given wireframes rather than redrawing them from scratch, keeping the structure but rebuilding the visual layer around the brand.
My first attempt used the full brand palette across every screen with teal, ochre, and terracotta all at once. After building several pages, the problem was obvious: there was no consistency. Consult feedback confirmed it, suggesting I stick to 2 to 3 core colours and one consistent CTA colour throughout. I rebuilt everything around a tighter system using ochre, terracotta and charcoal, which finally read as one cohesive app instead of a scattered mood board.
Onboarding
I wanted the logo to actually appear somewhere in the app, so onboarding became its stage. I designed the transition to feel like the logo popping on like a sticker.
My first idea for the delivery-frequency screen used a dotted path to echo the brand’s road concept, but it read as too childish. I replaced it with a house that lights up window by window as you drag the slider, showing the box bringing light home instead of just showing a path.
My Box
I went through a lot of tryouts for the box contents screen, testing different container sizes, grid layouts, and color treatments. The earlier grid and small-card versions felt too cramped and made the dishes hard to scan.
I landed on full-width horizontal containers stacked underneath each other. This layout gives each dish enough breathing room while keeping the list clean and easy to scroll through. Colour was the harder problem, since full yellow or full terracotta across the section overwhelmed the food photography itself. I solved it with a muted beige circle behind each dish, letting the food stay the visual focus instead of the background colour.
Recipe & Cooking
The recipe detail page went through several rounds of design changes to optimize the scroll experience. Secondary sections like equipment and nutrition facts were moved into pop-up modals to keep the main page short and focused.
To keep ingredient lists and step overviews clean without overwhelming the user, I added a segmented tab toggle near the top. Switching between “Overview” and “Ingredients” swaps out the content area while keeping the recipe header fixed. I also added a sticky bottom CTA for “Start Cooking” so the user can jump straight into action at any point on the page.
Cooking mode uses a charcoal background so the screen reads as its own distinct mode rather than just another page. I colour-coded each step, and pulled the timer step out into its own dedicated accent card so it stands out while cooking.
Final Result
Miles & Meals pairs a bold, story-driven identity with a practical app designed for real kitchen use. Here is how the final deliverables came together.
Brand Board
The full brand board is linked in the sidebar. See the buttons below to explore the brand board.
App Design
The full clickable prototype is linked in the sidebar — explore it in Figma. See the buttons below to explore the prototype in Figma.
