AFI Case Study
Project
UX/UI Design
Tools
Figma, Miro, Adobe Suite.
Team
Role
User Research, Prototyping, Wireframing, and Visual Design.
Duration
3 Months
Fatimah-Zahra Yesuf
Oritsejolomi Skinn
African Food Incorporation (AFI) is a food delivery and reservation mobile application. This was a collaborative project that spanned the course of three months. The process involved user research, user journeys, interviews, prototyping, design testing, and re-iterations.
Problem
African Food Incorporated (AFI) is a chain of restaurants with a vision to deliver the best African cuisine to everyone across Africa. After a detailed analysis of the competitive landscape, the founders of African Food Incorporated, John Kiagiri, and Lola Mustafa decided to develop an online space for food reservation and ordering systems for all types of restaurants across the continent.
Their goal is that anyone anywhere in Africa can either order food from or book a table in any restaurant from the neighborhood food shack to the 5-star restaurant.
Solution
The mobile aggregator is an application that combines various thematic platforms in order that anyone anywhere in Africa can either order food from or book a table in any restaurant from the neighborhood food shack to the 5-star restaurant.
A distinctive feature of the application is a single design and user-friendly interface.
We decided to create a competing app (AFI) where making an order should be as simple as a few clicks on a mobile device and it should be easy to understand and informative about the options and choices the users have. One of the distinctive features we created was to enable users to reserve any restaurant they want to visit within Africa.
Process
We started the process with competitive research and we identified the top four competitors. Analyzing and comparing the content of their apps helped us to determine the direction of development for the AFI application.
In order for us to build an empathy map, we started with interviews. This then led us to create user personas and thus our extreme users were Identified. Our identified extreme users are shown below.
The Interviews we conducted enabled us to identify some pain points of the users which made us understand the needs of the users. Some of these include:
- Distance and Traffic
- Getting orders or reservations mixed
- Cost
- Environment; lack of aesthetics, ambiance, and views
- Late/ Slow Delivery
- Low Reviews
- Arduous
Empathy Map & User Personas
Major Challenges
- Inability to find good restaurants near their location
- Inability to reserve a table for a time of their choosing
- Unavailability of cuisine variety
- Not being able to choose their table size
- Unable to view the restaurants visited and go back to give a review
- Lack of rewards and cash-backs
- Being unable to sign up via social media
- Contactless dining support
- Unable to see the views of the restaurant
- Unable to track their order
.png)
.png)
Wireframing
Low-Fidelity Screens
UI Design
Choosing colors for designs in general does not come so easily. So why can’t we just choose colors for our projects based on how we feel about them? We conducted our research and found out that for every color there is a meaning attached to it. For Instance; green depicts healthy, and blue is used mostly for fintech companies. In carrying out our research we found out that colors used for Food Applications include but are not limited to yellow, orange, and red.
However, becoming aware of color theory, the preferences and background of the client, the culture of users, and comprehension of your audience and competitors is the best way to choose the right color for your project.
Thus, Researching the competition is the best way to avoid unintentional plagiarism. This gave us an idea of common color threads that run through the other companies and colors to avoid to ensure that we don't create something identical.
Screens
After carrying out all research, we focused on designing all the screens through which a user will experience the product and its interactive properties as well as the visual elements which were created, in order to facilitate an enjoyable experience.
Patterns, spacing, layouts, and colors were used to guide the designed visuals and interactive elements that responds in a way that feels natural to the user.
Wireframing
High-Fidelity Screens
Reflections
Whilst working on this project, as beginners in this industry, we learned the importance of user research and how it helps in shaping the design solution needed for the problems brought up and is quite crucial and needed for the whole process of design application. We also understood that readability and usability are other important factors to be considered. When the app shows the users the immediate consequences of their actions, there is a more personal connection.
In conducting Interviews, we realized that people want to both solve problems and feel aesthetic satisfaction when using apps. The balance of these things was our responsibility as UI/UX designers on this project.