Category
Show all Projects
Mobel Yummies
Mobel Yummies Food App
Have you ever experienced the frustration of coming home after a long day at work, only to discover an empty fridge and go to bed hungry? Or rushing out in the morning without grabbing breakfast because you're in a hurry to get to work on time? Maybe you've wished for a quick and convenient way to enjoy a delicious meal without even stepping outside your home or office. Trust me, I've been there too!
Mobel Yummies Restaurant recognized these challenges and answered these questions but lacked a digital means to reach customers outside their restaurant. They know that sometimes, life gets in the way of eating. With this in mind, I designed a food app that focused on user convenience, making it effortless to place meal orders that arrive promptly.
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. It aims to transform how users interact with food, offering 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.
Mobel Yummies Restaurant recognized these challenges and answered these questions but lacked a digital means to reach customers outside their restaurant. They know that sometimes, life gets in the way of eating. With this in mind, I designed a food app that focused on user convenience, making it effortless to place meal orders that arrive promptly.
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. It aims to transform how users interact with food, offering 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
I conducted research, defined the design language and branding, created & refined the UI components, as well as built tokens, and so on for the design library which improved product consistency, and increased overall team productivity.
Customer insights & ideation
I conducted extensive product research and competitive analysis to identify best practices and trends, translating these insights into features that cater to customer behaviors and motivations. I learned that customers often seek quick and easy food ordering solutions. Consequently, I introduced features such as one-click re-ordering and real-time order tracking.
The Challenge: Balancing convenience, Seamless user experience & Visually appealing design
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. This required creativity in spending and utilizing free and open-source resources. The goal was to create an app that could compete with industry leaders, meeting high standards in features, functionality, visual appeal, and user experience.
Additionally, convincing existing customers to transition from in-store experiences to using the app was crucial. Emphasizing the convenience of ordering from anywhere, eliminating the inconvenience of waiting in-store was key.
Ensuring a seamless delivery experience with real-time updates on delivery times was also essential, balancing reliable service with the restaurant's resource limitations.
Additionally, convincing existing customers to transition from in-store experiences to using the app was crucial. Emphasizing the convenience of ordering from anywhere, eliminating the inconvenience of waiting in-store was key.
Ensuring a seamless delivery experience with real-time updates on delivery times was also essential, balancing reliable service with the restaurant's resource limitations.
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
.gif)
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.
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:
The major factors that were revealed were:
1
Time Factor
Participants reported that they often did not have enough time to cook a meal after a long day at work or school.
Participants reported that they often did not have enough time to cook a meal after a long day at work or school.
2
Taste and Preferences
Some participants said they did not enjoy cooking or did not have the time to learn how to cook.
Some participants said they did not enjoy cooking or did not have the time to learn how to cook.
3
Exhaustion State
Others said they were simply too tired to cook after a long day.
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:
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.
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)
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)
- 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)
- 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.
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👋🏽