Afrilish Rider Mobile App
Afrilish is a UK-based African food delivery app that connects customers with authentic African food vendors. The riders' app ensures efficient and timely delivery, helping Africans in the UK enjoy familiar flavors while introducing foreigners to the richness of African food and culture.
Overview
Afrilish is a UK-based food delivery platform that connects customers with authentic African cuisine from local vendors. It allows Africans in the UK to enjoy meals that remind them of home, while also introducing African food culture to a wider audience. The platform bridges the gap between African food vendors and customers, offering a seamless way to order and enjoy diverse, traditional dishes.
The rider app plays a crucial role in ensuring timely and efficient delivery of authentic African cuisine to customers across the UK. By addressing the specific challenges faced by delivery personnel, the app was re-designed to enhance the overall customer experience, streamline delivery processes, and improve coordination between riders, vendors, and customers.
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. 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
While there are numerous delivery platforms in the UK, Afrilish identified an opportunity to enhance the delivery experience through a more tailored app design. The existing app needed a redesign to better address the challenges faced by riders and vendors alike. Although integrating a delivery platform within the Afrilish app would streamline operations for African food vendors and customers, research uncovered specific pain points, particularly for delivery riders. One of the most significant issues was inconsistency in earnings, leading to uncertainty and frustration. With the redesign, Afrilish aims to address these challenges by providing a more reliable and efficient system, improving the rider experience while ensuring smooth, timely deliveries for customers.
The solution
Afrilish re-design addresses key challenges for riders by offering a transparent and consistent earnings model through scheduled orders, helping riders achieve greater financial stability. The app features a user-friendly interface for easy delivery management and performance tracking, allowing riders to handle deliveries efficiently. By streamlining operations and providing essential tools, Afrilish ensures a smoother, more reliable experience for both riders and customers. Let's take a peek into how these were acheived below
Let's take a dive back🥽
While the original riders app version served its purpose, it had several areas that needed improvement. The initial app provided basic functionality for riders and vendors, but it lacked the streamlined experience, modern design, and advanced features required to improve delivery efficiency and rider satisfaction. As the needs of riders evolved, it became evident that a redesign was essential to enhance the overall experience and address key pain points for both riders and vendors.
This frame shows the previous screen for accepting orders and the wallet screen
This frame shows the riders insights and delivery confirmation screen
What my design process looks like
To ensure an optimal design outcome, I follow the design thinking process. It's important to note that my design process is not linear; each step is open to 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 return to the Define stage (where I gather user insights) and repeat the process to ensure all information is thoroughly covered.
Our ideal users✨
As shown in my design process, the first thing for me was to understand and learn about the users I'm designing for. To do this, I conducted qualitative user and market research to deeply understand the riders’ experiences, needs, and challenges. I gathered insights from this resaerch which was used to create detailed user personas that reflect the diverse profiles of riders using the platform, ranging from full-time professionals to part-time and new riders. To keep this case study concise, I’ll be showcasing just two of these personas, while still providing an accurate representation of the rider experience and their unique requirements.
Placing it together
Using the data gathered from research, I created a mind map to identify key features and the best ways to implement them, ensuring accessibility and alignment with users' mental models. In this section, I'll show the simple mind map that guided the feature placement for the redesign, ensuring the new app directly addresses rider needs while improving overall efficiency.
Next, Sketches
Just like Mysaria said in one of my favorite TV series, House of the Dragon: "There are many ways to win a war." In this case, there are many ways to create a wireframe 😄. For this design, I took a different approach in drawing up the skeletal frames. After gathering and organizing insights through the mind map, the next step in my design process was translating these insights into actionable solutions. Instead of the mid-fidelity wireframes I had used throughout the Afrilish project, I took a different approach by sketching low-fi wireframes on my iPad. Using this approach allowed for quick presentations, iterations, and adjustments, making it an efficient way to visualize ideas while staying flexible. For me, this method is particularly useful when working under time constraints. These wireframes served as the initial visual framework for the rider app redesign, focusing on the structure and functionality of the app. They helped me better organize key features before moving into more detailed design stages. This section provides a view of the wireframes and how they laid the visual foundation for an intuitive, user-centered app experience.
The slightly normal crazy 8's
High Fidelity Designs
Leveraging on the groundwork laid by the low-fidelity wireframes, we moved on to crafting detailed high-fidelity wireframes for the Afrilish rider app. These wireframes incorporated typography, color schemes, and interactive elements, providing a more polished and refined representation of the app's design. By aligning the high-fidelity wireframes with the previously identified user needs, we ensured a seamless and functional experience for riders. This step brought the Afrilish rider app closer to its final form, paving the way for user testing and subsequent development. Below, you'll find a selection of screens showcasing the high-fidelity design. Please note that these screens were designed in both light and dark modes, but currently, the implementation has been done in just dark mode.
Sign up/Login screens
A look into the rider registration process, showing steps designed to ensure efficient knowledge of the riders. While it may be slightly longer than our previous apps, the additional steps are necessary. To help ease this process, the rider can track their progress and has the option to save and continue the onboarding later.
Rider registration- the continuation
This is a continuation of the riders registration screen
Accept order screens
These screens display delivery information, informing riders about the order and giving them the option to either accept or reject it. The screens cater to both direct/regular orders and scheduled orders. While riders can set their working times, they also have the flexibility to go online and offline as they choose.
Order management screens
Due to the different order types, I organized the orders in a way that prevents riders from feeling overwhelmed and helps them deliver efficiently without mixing up deliveries.
Wallet screens
The wallet screens provide transparency into the rider's earnings. Riders can see how much they’ve made, as well as how much is pending from scheduled orders that are yet to be completed. It also displays their withdrawal screen.
Empty states
This screen displays informative empty states to let users know what actions to take next or why the page is empty.
Set working hours
When considering riders who don’t intend to work full-time, the option to set working hours became essential. You might wonder how this differs from simply coming online. Outside of their set working hours, riders won’t receive work-related notifications, unlike when they come online, as we understand this is their time off. This feature helps them maintain a healthy work-life balance.
Trips overview , profile and notification screens + Light mode snippet
Improvements recorded
The redesign of the Afrilish rider app introduced significant enhancements that improved the overall user experience. Order management was streamlined, allowing riders to handle deliveries more efficiently, preventing confusion and reducing delays. Scheduled deliveries were added in a simple way, helping riders achieve a more stable income. The addition of flexible working hours gave riders control over when they work, ensuring a better work-life balance. Transparency around earnings was also improved, with a redesigned wallet screen providing clear insights into completed and pending payments. Communication between riders and vendors was enhanced, allowing for smoother coordination and more timely deliveries. These improvements combined to create a more organized, transparent, and rider-friendly app.
Impact made
These improvements not only make the app easier for riders to navigate but also enable them to manage their work schedules more effectively. The transparency in earnings and improved communication tools also contribute to smoother deliveries and better overall rider satisfaction. The redesign positions Afrilish to meet the evolving needs of its riders, ensuring the platform supports them in delivering a seamless experience to vendors and customers alike.
