Mobel Yummies Food App Old

Mobel Yummies was a local restaurant known for great meals but only for walk-in customers. Post-pandemic, eating habits shifted toward fast delivery, revealing the restaurant's limitations. To stay relevant, it needed a digital platform that matched its in-store warmth.

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:

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.

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.

Existing competing platforms...

The deliverables

Adhere to the Human Interface Guidelines while ensuring that the app was easy to use and navigate
Provide a convenient and efficient way for new and existing customers to place meal orders from the restaurant
Add scheduling and reservation options, meal tracking progress, and provide real-time updates on orders
Sort and prioritize feature requests by the user during research
Integrate the branding elements into the app to establish a cohesive brand identity which helps to improve recognition and consistency for the restaurant

The high-res mockups made in Figma will be available for you to view at the end of this page. Ready? Let’s get started!

↓ Jump to Figma mockups

From concept to reality: My design process

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.

From concept to reality: My design process

Understanding the user 🔭

User research

I conducted interviews with 8 customers (4 males and 4 females, within the age bracket of 20-55) to understand their experiences with managing meals while juggling busy schedules. The interview questions were designed to uncover the factors that limited participants from preparing meals for themselves at home. The primary user groups included working-class individuals and students.

The major factors that were revealed were:

Time Factor
Participants reported that they often did not have enough time to cook a meal after a long day at work or school.

Taste and Preferences
Some participants said they did not enjoy cooking or did not have the time to learn how to cook.

Exhaustion State
Others said they were simply too tired to cook after a long day.

Problems with Current Solutions

I then explored the competitor offerings in the market, identifying both the benefits and pain points users faced. This analysis revealed four major concerns that deterred potential users from ordering meals online:

Inability to make quick meal orders
Users expressed frustration with the lengthy process required to place meal orders on current food apps. They desired a feature to save menu items as favorites, allowing them to quickly and easily checkout without having to search the whole menu each time they needed to place an order.
Inaccurate delivery time
Users got frustrated when their orders arrived later then they were informed during the checkout process. They felt that if there was a way to keep track of their meal order progress, it would make them more reassured of the platform's efficiency.
‍Cancelled meal orders
Users were frustrated when they placed an order for an unavailable menu item. They wanted real-time notifications if an item was out of stock to avoid going through the entire checkout process only to have their order canceled and waiting for refunds.
Lack of quality customer service
Users of competitor products complained that they often faced challenges in reaching customer service. They desired a more accessible and responsive support system to address their concerns promptly.

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

Feature prioritization

From the data gathered, I was able to identify key features that would address the pain points the users pointed out as obstacles towards them making meal orders online. The features were:

A more streamlined checkout process: Users want to be able to complete their meal orders quickly and easily. This means having a checkout process that is easy to follow and does not require too many steps.
Real-time availability of menu items: Users want to be able to see which menu items are available before they place their order. This will help them to avoid placing an order for an item that is not available.
Meal tracking progress: Users want to be kept informed about the status of their order. This means providing them with updates about when their order is placed, when it is being prepared, and when it is ready for pickup or delivery.
Easy-to-use customer service: Users want to be able to contact customer service if they have any problems with their order. This means providing them with multiple ways to contact customer service, such as by phone, email, or live chat.

Starting the design 🎨

With the research data I had gathered and key user feature analysis I had made, I then proceeded to begin the design process. I began with paper sketches in order to just brainstorm design concepts for the product, all the while taking into consideration easy navigational ability. Carrying out a mini-user research, I then picked out certain design elements from the sketches I made that would be the framework of the product's design going forward.

Sketches

Sketch 1

Sketch 2

Sketch 3

wireframes

Anatomy of the Homepage

Visual Language

Typography

Color Palette

Usability study

Three usability studies were conducted during the prototyping phase of this product.

Initially, after creating paper sketches and low-fidelity digital wireframes, I performed a usability study to assess if users could navigate the prototype and complete the main user flow with minimal issues. I also aimed to gather feedback on the features in the prototype and identify any bugs introduced during the design process. The first study was conducted after designing the low-fidelity prototype, the second after producing version 1 of the high-fidelity designs, and the third after version 2 of the high-fidelity prototypes was completed. My main goals were to:

determine if the app design was modern and appealing as well as easily navigable
determine if the key features requested by users were offered by the prototype
Identify any parts of the app where users were getting stuck when trying to complete the main user flow.
assess how user friendly the design of the product was
gather user feedback in order to iterate further on the design

The participants included individuals who had previously ordered food online and those who frequently purchased meals from nearby restaurants. I ensured that participants with various accessibility needs were included, as designing with accessibility in mind benefits everyone.

The test was conducted remotely using Google Forms, where participants were given a link to the prototype and asked to complete several tasks.

Usability Study Findings

Users were able to navigate through the prototype easily! The most time spent was on the home screen, the first screen presented in the product, where they tended to click around, to check if it was a fully interactive application. Once they understood the concept of the product, they wasted no time going to the menu to check out the meal options. Some participants told me that the prototype made them realize how hungry they were! 😅

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
30% of the participants commented on the fact that the buttons didn't have a unified look
Some of the users needed a detailed breakdown of the delivery process
Some elements and text didn’t follow the accessibility guidelines and as a result 20% of participants had trouble deciphering tasks

Round 3 Findings: 8 anonymous participants
100% success rate on navigating the prototype and adding and checking out meal items from the cart
100% success rate on meal order tracking
100% of the users commented on the fact that they loved the overhauled user interface.

Insights

Based on the results from these usability studies, I was able to map out key insights that would be my guidelines for iterating on the prototype which includes:

Further refinement to the interface of the app ensuring visual appeal
Increase button padding and apply a consistent design system for improved clickability and a more cohesive design standard.
Ensure better accessibility design guidelines while iterating on the porotype to enable better user experience
Rework the 'add/update address' user flow for a more intuitive experience
Create a better onboarding experience and include subtle guides to prompt users while navigating the prototype

Refining the design 🧑🏽🔧

High Fidelity Mockups

Due to the insights generated from the usability tests, I made some iteration on the app interface which included a complete visual overhaul of the interface. This new look gave a cleaner and more organized layout and user flow for meal ordering. I ensured that the buttons were resized, meal tracking option made available, accessibility standards abided by all while still maintaining the company's branding.

Splash Screen

After the First Usability Study (1 screen)

Onboarding Flow

After the First Usability Study (2 screens)

After the Second Usability Study (4 screens)

Home Screen/Search

After the First Usability Study (2 screens)

After the Second Usability Study (4 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)

Iconography

Icons created by me

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

Wrapping up

Impacts and Learnings

This project taught me the value of designing with the user in mind, focusing on simplicity and functionality. Users who tried it out complimented its ease of use and aesthetics and said they would use and recommend it when it became a real product. I learned that while initial ideas are great, usability studies provide a clearer picture of what users truly need. A UI is effective, not because of its aesthetics but because it is designed with the user in mind.
This project also taught me much about the importance of working within an existing design framework such as Material Design and that creating reusable items such as sticker sheets and components would go a long way in allowing for rapid iterations across the designs (Note to self: start creating assets from the beginning of every project 😰). I learned that the hard way, but I guess it's all part of the learning process! These experiences will enable me to be 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 your thinking. Don't forget to say hi, as I do enjoy hearing from different people. Until the next project...

Au revoir👋🏽

My time is...