Afrilish Mobile App
Afrilish is a UK-based African food delivery app helping Africans in the UK order meals that feel like home. It also helps foreigners experience the African culture through food, breaking the myths surrounding African meals.
An overview of the project
This case study offers a look into the redesign journey of the Afrilish customer mobile app. Afrilish connects users in the UK with authentic African cuisine, bringing the flavors of Africa directly to their doorsteps while catering to a variety of customer preferences. The app addresses the increasing demand for authentic African food by making it more accessible to the diaspora and a diverse range of consumers eager to explore new culinary experiences.
One of the goals of the app redesign was to improve the user interface, user experience and address key challenges, such as streamlining and improving the ordering process. These improvements involved adding user friendly features to enhance the overall experience of the app and make it stand out in a competitive market.
For this project, I worked as the sole designer and product lead. I collaborated closely with the developers to build a fully functional MVP that adheres to the design, user needs and business goals. In this case study, I’ll walk you through some of the key processes I followed during the app redesign, within the scope of what I’m permitted to share.
The problem
There is a growing population of African migrants and food enthusiasts in the UK, but access to authentic African food can be limited. Traditional delivery platforms deliver, but they often don’t focus on the nuances of African cuisine, such as the wide range of dishes available. These platforms also tend to neglect small-scale vendors looking to break into the market. This gap presented an opportunity to create a platform that makes African cuisine both accessible and convenient for Africans abroad and adventurous food lovers eager to explore new flavors.
The solution
The app was developed with a user-centered approach, ensuring it catered to various user personas. The app sought to address the emotional and cultural needs of Africans in the diaspora while introducing African cuisine to people from diverse backgrounds. By offering a centralized platform and user-centered features that simplifies the process of ordering authentic African food, the app helps customers enjoy a richer dining experience.
A shot from the past🚀
Apart from enhancing the user interface and the overall user experience of the app, the redesign was also aimed at introducing features to address user pain points, such as a spice level indicator, bulk food ordering, event theme planning, order tracking, allergen and hygiene information, and the ability to schedule orders up to a month in advance. Below, you’ll find screenshots of the app before the redesign, essentially a snapshot of its earlier form. At that time, these features were not added, which made the app less user-friendly and not as competitive in the market.
This frame shows the previous restaurant detail page, the home/explore page with the search and restaurants page
This frame shows previous food detail page, the add item to cart page and the cart page
But first, what's my design process like?
Before diving into the processes, I'll provide a brief introduction to the approach I followed for this redesign. To ensure the best design outcome, I adhere to the design thinking process. It's important to note that my design process is not linear; each step allows for revisits and iterations. For example, if I’m brainstorming solutions (Ideation stage) and realize I’ve missed something during the user research phase, I will go back to the Define stage (where I gather user insights) and repeat the process to ensure all information is thoroughly covered.
Who are our users, in a nutshell
I started my process by conducting quantitative and market research to understand my users and their nedds. I sent out surveys to users and performed SWOT analysis on competitor apps in relation to the Afrilish app. After evaluating the data from this research through affinity mapping, I categorized our users into two groups: the busy African professional living abroad and the food explorer seeking to try African meals. It's important to note that these personas also represent a broader demographic of our users. For example, the busy professional could be a family man or woman looking to order food for their household. Similarly, the food explorer could be a Moroccan interested in trying Rwandan cuisine. Below, I’ve included visual representations of these personas, highlighting their goals, needs, concerns, and app features they will find useful.
Piecing it together
Apart from helping me empathize with users, the data gathered from research provided insights into additional user-friendly features the app needed for a better user experience. Using this data, I created a comprehensive mind map to compile all existing and newly discovered features. The mind map outlines the core features of the African food delivery app and how they should be organized based on the research insights. It visually represents the data, showing how each feature should be structured to address specific challenges and improve the user experience. By mapping these insights, I ensured that key aspects like accessibility, convenience, and efficiency were prioritized, guiding the strategic placement of features and the overall design of the app. This process allowed me to focus on delivering a seamless and user-friendly solution.
Skeletons, but not in the cupboard
You might be wondering what skeletons 😄. Well, these "skeletons" are called wireframes. They are skeletal frames of what the final design will look like—usually in black and white, and sometimes illustrated as simple iPad or paper-and-pen sketches. Using the mind map as a foundation, I created mid-fidelity wireframes to visually represent the initial concept and provide a blueprint of what the final design could look like for the client. While wireframes offer a clear first look at the product, it's important to acknowledge that the final version may evolve throughout the design and development process. As new insights emerge or improvements are identified, adjustments are made to ensure the final product is the best version possible. Below is an image of some of the wireframe screens:
Mid fidelity Wireframes
High Fidelity Designs
Following the wireframing stage, the design process moved into high-fidelity designs and prototyping, taking the initial skeletons and transforming them into polished, near-complete versions of the product. At this stage, the designs incorporate all key visual elements such as colors, typography, and detailed components, providing a more realistic representation of how the final product will look and feel. The focus here is on refining the user interface to ensure it aligns with the intended user experience. These high-fidelity designs serve as the foundation for the next phase; user testing, 'where functionality and usability are evaluated before progressing to full development. Below, I’ve included some screens from the high-fidelity design:
Sign up/Login screens
The sign-up screens were designed to not limit users by offering them the option to continue as guests without creating an account, among other features. It also includes easy sign-up options via Google and Apple, and captures only the necessary fields to reduce the time spent signing up and prevent overwhelming the user.
Direct order screens
These screens show the process of placing a direct order. Direct orders are regular orders that you place and either pick up or receive immediately. Remember, this app also supports scheduled orders. The screens provide a clear view of the meals, display the types of vendors, and show other details crucial to the user, such as the UK's hygiene rating of the seller, the spice level of the meals, and dietary content to align with users' fitness and health goals. It also links to the allergen section, where users can find out if the meal is suitable for them.
Empty state screens
There will likely always be screens that aren't populated with content for first-time users. For me, it's important to present these in a fun and engaging way. These screens show the interactive empty states, which provide clear call to actions for users to complete the necessary tasks needed to get them started. Where appropriate, they also include important information to help encourage users to take the desired action.
Order tracking screens
One aspect we aimed to improve from the previous app was order tracking. We wanted users to be informed of the stage their food is at. These new screens provide real-time updates, allowing buyers to track the progress of their orders.
Schedule order screens
This was one of the most challenging parts of the redesign, simplifying the process of scheduling meals for up to a month without overwhelming the user. To tackle this, I broke the process down into four steps, also saving users' uncompleted scheduled orders and allowing them to return later in the day to continue. These four steps include easily choosing a restaurant, previewing the restaurant menu, setting an order time frame, and next, straight to scheduling, providing a seamless experience.
Wallet screens
This screen displays users' wallet and transaction information. They can easily top up their wallets by clicking "Fund Wallet." The invite screen shows users insights into their bonus points earned.
Calorie Tracker Sreens
To help users stay on track with their health, dietary, and fitness goals, the calorie tracker screens show insights into the dietary content of food as set by the sellers. These screens also provide dietary analytics for users who choose to track and view them.
A peek into the dark mode view
The dark mode was created to enhance accessibility for people sensitive to bright screens
Improvements recorded
The redesign of the Afrilish buyer app brought several key improvements. The onboarding process was simplified by incorporating Google, Apple, and guest sign-up options, making it easier for users to get started. The app now features a modern and visually appealing interface, with improved color palletes, typography, and layout, creating a more engaging user experience. Meal scheduling was added in an intuitive way, with a four-step process that allows users to save and resume orders effortlessly. Real-time order tracking was introduced, giving users clear insights into the progress of their deliveries. Additionally, the app now includes expanded health and dietary information, such as calorie tracking and allergen details, which cater to health-conscious users. Performance was also optimized, resulting in smoother overall functionality. These improvements combined to create a more efficient and user-friendly app that aligns with the evolving needs of Afrilish customers.
Impact made
The Afrilish app redesign created a more cohesive and enjoyable user experience, playing a key role in boosting user adoption by over 100%. By refining the app’s flow and designing each interaction with the user in mind, we enhanced both satisfaction and ease of use. This transformation has strengthened Afrilish’s ability to serve its audience, positioning it as the go-to platform for authentic African cuisine in the UK
