Category
The Challenge
With no online presence, limited budget, and a customer base unfamiliar with online ordering, the goal was to expand beyond walk-ins as delivery demand surged.
The business goal was clear:
The business goal was clear:
✦
Launch a mobile experience that increases order volume and retention.
✦
Maintain brand warmth while matching the usability of major competitors like Jumia Food and Bolt Food.
✦
Build a design foundation the team could reuse as the restaurant grew.
Imagine a world where browsing and ordering meals was no longer a source of stress, but an enjoyable experience. That's the vision behind this app. I aimed to offer a stress-free and delicious journey from selection to delivery.
Here, I'll share how I helped the restaurant adapt to market demands, expanding its reach and boosting sales.
Here, I'll share how I helped the restaurant adapt to market demands, expanding its reach and boosting sales.
Contribution
Carl Emefo — Product designer 🎨
Product designer, UX Research, Prototyping, Usability testing, Design System
Tools used
Figma, Google Forms, Docs, Slides, Sheets, Jamboard
Duration
6 months
Led user research and defined the app’s design language and branding.
Created and improved UI components and set up a design library with tokens.
Developing the Mobel Yummies food app presented two major challenges: starting from scratch without an existing app to build upon and working within a limited budget approved by the company.
I led the full UX process, from research to design system setup. My goals were to understand user behavior, define must-have features, and build a visually clean, efficient experience within tight resource limits.
.gif)
From concept to reality: Understanding users’ need
From the beginning of this undertaking, my main aim was to create a visually appealing app that would connect with a variety of audiences through user-centered research while promoting the company's branding. I achieved this by conducting thorough investigations, carrying out extensive research and analyzing data to gain insights into what worked well and what needed improvement. Throughout this journey, I had the opportunity to refine my initial assumptions and incorporate valuable feedback.
User research
Before designing, I interviewed 24 users (15 males and 9 females, aged 20–55), including students, professionals, and parents who often skipped meals because of time. They all said the same things in different ways:
- “I get home too tired to cook.”
- “I skip breakfast because I’m always rushing.”
- “Food apps take too long to use.”
It wasn’t just about food, it was about saving time, reducing stress, and staying safe.
People wanted something fast, clear, and reliable. That insight became the foundation of the app.
People wanted something fast, clear, and reliable. That insight became the foundation of the app.
Problems with Current Solutions
When I compared existing food apps, I noticed that four recurring issues kept coming up:
- Long checkouts that made people quit halfway.
- Wrong delivery time estimates that broke trust.
- Meal orders canceled without notice because items were “out of stock.”
- Poor customer support that left users stranded.
To stand out, Mobel Yummies needed to make ordering feel human again, clear communication, fast checkout, and real-time transparency.
Existing competing platforms...
Personas
Using the data gathered, I created two personas that inherited the attributes I needed to solve the pain points I got as feedback during the user research and competitive analysis phase. These personas were used as a design guide for the product.
Reload page if other slide isn't visible
From Paper to Prototype
I started small, rough sketches, then low-fidelity wireframes to test navigation and task flow.
Each version focused on one question:
Each version focused on one question:
Can someone hungry at 10 PM use this app without thinking twice? 👀
I built features that solved the exact frustrations people shared:
- One-tap reorder for frequent meals.
- Real-time menu updates to prevent cancellations.
- Meal order tracking from kitchen to doorstep.
- Built-in support chat for quick help such as by phone, email, or live chat.
Sketches
Sketch 1
Sketch 2
Sketch 3
Wireframes
Anatomy of the Homepage
Usability study & Findings
Three rounds of usability testing helped shape the final design.
After developing initial sketches and low-fidelity wireframes, I conducted usability studies after each prototype phase: low-fidelity prototype, high-fidelity v1, and high-fidelity v2, to ensure seamless user navigation, successful order completion, gather actionable feedback, and identify issues.
After developing initial sketches and low-fidelity wireframes, I conducted usability studies after each prototype phase: low-fidelity prototype, high-fidelity v1, and high-fidelity v2, to ensure seamless user navigation, successful order completion, gather actionable feedback, and identify issues.
- Round 1 Findings: 16 anonymous participants
- 92% success rate on navigating the prototype and adding and checking out meal items from the cart
- 30% of the participants found some of the buttons hard to click
- 40% of the participants expressed confusion on how to edit their address in the app
- 20% of the participants found scheduling a meal too confusing
- Round 2 Findings: 24 anonymous participants
- 100% success rate on navigating the prototype and adding and checking out meal items from the cart
- Some elements and text didn’t follow the accessibility guidelines and as a result 20% of participants had trouble completing tasks
- Round 3 Findings: 8 anonymous participants
- 100% success rate on navigating the prototype and completing meal order checkout.
- Users loved the refreshed look and tracking feature. Some even joked that testing the app made them hungry. 😅
By the end, we had a product that felt familiar, modern, and fast with strong branding and visual appeal. Accessibility was a key focus: legible fonts, high-contrast colors, larger tap targets, and dark-mode support.
The Solution: Design That Feels Like Home
The final design kept the restaurant’s warmth; rich colors, friendly icons, and clear text that passed accessibility checks. I also built a clean, responsive design system with reusable components, typography scale and color tokens for consistency so that new ideas and future iterations would be faster and easier for developers to implement.
Visual Language
Typography
Color Palette
Iconography
Food icons created by me
Splash Screen
Usability study result: after v1 (left), after v2 (right)
Onboarding Flow
After v1 usability study
(2 screens)
(2 screens)
After v3 usability study
(4 screens)
(4 screens)
Home Screen/Search
After the First Usability Study (2 screens)
After the Second Usability Study (4 screens)
Menu/Product Detail
After the First Usability Study (5 screens)
After the Second Usability Study (5 screens)
Other Screens
Schedule Delivery Flow (8 screens)
Empty Cart (1 screen)
Signed in Checkout Cart Flow - Deliver to Me (6 screens)
Guest Checkout Cart Flow - Pickup from Store (7 screens)
Accessibility Considerations
The following accessibility considerations were taken into account:
- Ensuring that the product made use of legible and easy fonts as well as icons for better navigation
- Ensuring that the contrast of the colors applied was up to the WCAG guidelines
- Creating a dark mode version of the app for ease of usability in dark environments and for users who preferred dark apps
Impact
The prototype turned heads immediately:
- 100 % task completion in final usability tests.
- The restaurant saw about a 50% jump in online orders during the first trial month.
- The design system cut design time for new screens by roughly 30%.
What I Learned
This project reminded me that design is not just about screens, it’s about solving real, everyday problems. I learned that while initial ideas are great, usability studies provide a clearer picture of what users truly need.
People don’t remember the color of the button; they remember how easy it was to get dinner after a long day.
I also learned the power of working within an existing design framework such as Material Design System and building assets/components early; they make design faster, clearer, and easier for everyone involved.
People don’t remember the color of the button; they remember how easy it was to get dinner after a long day.
I also learned the power of working within an existing design framework such as Material Design System and building assets/components early; they make design faster, clearer, and easier for everyone involved.
(Note to self: Always create assets from the start of every project 😰.) I learned this lesson the hard way, but it's all part of the process. These experiences will help me become the best UX designer I can be.
Next Steps
- Conduct more user testing to enable me gain insight on how best to improve the product’s features for users.
- Iterate the prototype based on the new insights I'll gain from carrying out future usability studies.
- Use it as a stepping stone to work further on future products.
If you got to this stage, wow! I really do appreciate you and hope my work made a positive impact on you. Don't forget to say hi, as I do enjoy hearing from different people. Until the next one...
Au revoir.