Senje's Cuisines Food Delivery App Case Study
Come and explore how I helped a Nairobi-based food startup deliver fresh healthy meals and cocktails to busy work-from-home professionals in the heat of the COVID-19 pandemic.
1. Project Overview
Introduction: The Product
Senje’s Cuisines is a family restaurant and a healthy food business founded in 2019 and operated by Marion Ngayi, in the Nairobi uptown area. Their main target customers are family members who want to treat their loved ones to healthy delightful meals and cocktails outside their homes.
Through Senje’s Delivery App, the business strives to deliver a wide variety of fresh meals and cocktails to busy remote-working professionals during the pandemic.
My Role, Responsibilities, and Project Duration
I was a consulting UX/UI Designer and Researcher designing Senje’s Delivery App from conception to delivery with the support of the principal founder Ms. Marion Ngayi, and the entire Senje's staff members. My responsibilities included conducting user interviews, designing paper and digital wireframing, designing low and high-fidelity prototypes, conducting usability studies, accounting for accessibility, and iterating on designs.
The project lasted for 5 months, stretching from June to December 2021.
The Problem
Busy work-from-home professionals lack the time to prepare healthy and fresh meals for their family members in the heat of the Covid-19 pandemic.
The Goal
Design an easy-to-use meals & cocktails ordering app for Senje’s Cuisines that offers discounts and delivers quickly.
My Process, Deliverables & Tools
Senjes Delivery App is a new intellectual property in the market and the project brought with it unique time and financial constraints. There was a lot to be done, and tons of deliverables from both research and design processes. I used the design thinking framework and combined it with human-centered design principles and tools to come up with initial ideas and iterate the design solutions.
2. Research: Understanding the User
User Research Summary
I screened study participants, conducted interviews, and created empathy maps to understand the users I'm designing for and their needs. A primary user group identified through research was remote-working adults who don't have time to cook fresh meals for their families.
This user group confirmed initial assumptions about Senje’s Kitchen customers, but research also revealed that time was not the only factor limiting users from cooking at home. Other user problems included curfew restrictions, Covid19 protocols, and fear of contacting coronavirus made it difficult to get groceries for cooking or go to restaurants in person.
Persona & User Pain Points
Problem Statement
Faith is a busy program manager who works remotely and loves food who needs an easy-to-use meals & cocktails ordering app that offers discounts and delivers quickly because they have no time to cook because of her busy schedule.
User Journey Map
Mapping Faith’s user journey revealed how helpful it would be for users to have access to a dedicated Senje’s Cuisine app.
User Flow
Inspired by the initial customer journey map, I created a user flow to show how our persona, Faith might interact with our app. Depicting the flow allowed me to evaluate the user's happy path and optimize the experience, therefore increasing the conversion rate.
3. Starting the Design
Paper Wireframes
Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For the home screen, I prioritized meals and cocktails' discoverability to help users to order quickly.
I used stars to mark the elements and features of each sketch that would be used in the initial digital wireframes.
Digital Wireframes
As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research. Easy navigation was a key user needed to address in the designs in addition to equipping the app with powerful search and discovery features.
Low-fidelity Prototype
The low-fidelity prototype connected the primary user flow of placing meals & cocktails orders and applying discount codes during checkout, so the prototype could be used in a usability study for testing with users.
Usability Study Parameters
📊 Study Type: Remote Moderated Usability Study | 💻 Location: Remote/Online | 🧑🏿🤝🧑🏿 Participants: 5 Participants per Study | ⏳ Length: 30 mins to an hour per study
Usability Study Finding
I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
Round 1 findings (lo-fi prototype)
• Users need a robust filter screen that provides a range slider for narrowing down prices.
• Users need a visually accessible button that links them to the cart directly from the search & results page.
• Using visually accessible font labels and icons for the tab buttons will help improve navigation for all users.
• Adding a modal screen for meal details will help improve navigation for users.
• Adding an easily accessible search button at the top of all screens will help improve the search experience for all users.
• Users will easily be able to increase or decrease items when buttons for adding or subtracting items are implemented.
• Users need an easy way to cancel their order from the order tracking page.
• Users need more contextual details about discount codes before applying them.
• Users need an easily & visually accessible “Orders” button to view their orders.
• Users need a visually accessible button that links them to the cart directly from the search & results page.
• Using visually accessible font labels and icons for the tab buttons will help improve navigation for all users.
• Adding a modal screen for meal details will help improve navigation for users.
• Adding an easily accessible search button at the top of all screens will help improve the search experience for all users.
• Users will easily be able to increase or decrease items when buttons for adding or subtracting items are implemented.
• Users need an easy way to cancel their order from the order tracking page.
• Users need more contextual details about discount codes before applying them.
• Users need an easily & visually accessible “Orders” button to view their orders.
Round 2 findings (hi-fi prototype)
• Users want an improved user interface for more fluid navigation
• Users want MPesa payment integrated into the app
• Users want to order for family and friends and make multiple orders concurrently
• Users want a more secure way of canceling their order
• Users want MPesa payment integrated into the app
• Users want to order for family and friends and make multiple orders concurrently
• Users want a more secure way of canceling their order
4. Refining the Design & Handoff
Mockups
Early designs allowed for a quick but not so clear checkout experience, but after the usability studies, I updated the checkout screens by adding a stepper component which helped guide users during the checkout flow. I also revised the text to indicate what tasks users were supposed to perform on each step.
The second usability study revealed that users want to be able to edit their order’s delivery destination, add and remove items within 15 mins after placing their order while on the order tracker page. To enable this, I moved the “Cancel order” on the Order tracker screen to the right and added an “Edit order” ghost CTA button which pops up a modal screen where users can edit their order details when they tap it.
High-fidelity Prototype
The final high-fidelity prototype presented cleaner user flows for finding meals and cocktails. It also meets user needs for applying discount codes during the checkout process.
View the Senje's - High Fidelity Prototype App
Accessibility Consideration
1. Provided access to vision-impaired users by adding alt text to images for screen readers
2. Used easily recognizable icons from Microsoft’s Fluent Design System to improve navigation
3. Used detailed imagery for meals and cocktails to help all users better understand the designs
2. Used easily recognizable icons from Microsoft’s Fluent Design System to improve navigation
3. Used detailed imagery for meals and cocktails to help all users better understand the designs
Handshake & Engineering Support
After conducting the second round of usability study & implementing priorities 0 and 1 insights, the team decided that we roll out the MVP and improve the product as we go based on insights from subsequent research. For me, this meant handing over the UI kit to the engineering team and supporting them throughout the implementation journey. Below is a sample of some of the elements from the design kit that I shared.
5. Going Forward
Product Impact
The app makes users feel like Senje’s Kitchen really thinks about how to meet their needs. One quote from peer feedback:
“The app is very easy to use and has great potential in the market. I see myself using it every day given my busy schedule”
“The app is very easy to use and has great potential in the market. I see myself using it every day given my busy schedule”
What I learned
While designing the Senje’s Delivery App, I learned that the first ideas for the app are only the beginning of the process. Usability studies and peer feedback influenced each iteration of the app's designs.
Next Steps
1. Conduct research and design a new user flow and information architecture for users who want to be able to order meals for friends and family members and place multiple orders concurrently.
2. Conduct other rounds of usability studies to determine if the implemented changes met the requested user needs.
3. Conduct more user research to determine any new areas of need.
4. Finesse the user interface and the prototype.
2. Conduct other rounds of usability studies to determine if the implemented changes met the requested user needs.
3. Conduct more user research to determine any new areas of need.
4. Finesse the user interface and the prototype.
