User Persona - Meet Shantel
PRECIOUS UKACHUKWU
UI/UX designer
Food O' Clock
A story of how I designed an application that help people order meal from their convenience.
Project Overview
Food O'Clock is a food vendor located in Lagos, Nigeria. They attempt to deliver healthy, special meal(s) to their customers. They offer a wide range of healthy meals at affordable prices and target customers like workers and students who lack the time to prepare their meal.
The Challenge
People are often very busy with their work and school schedule and often struggle to spend time on meal preparation hence resort to ordering food from restaurants. As a UX designer, the challenge here was to find a unique solution that helps these people get their meals quickly and easily.
The Goal
To identify and understand frustrations people experience during the process of ordering healthy food from restaurants, to enable me design an accessible and inclusive mobile app that let users order healthy food quickly and easily at their convenience.
Project Timeline
December 2021 - (2 weeks)
My Role
UX Researcher
UI Designer
Responsibilities
User research
User personas
Userflow
Sitemap
User journey map
Wireframing
Usability studies
Prototyping
The Design Process
Empathize
User Research: Summary
At this stage, Primary research (user interview) was used as the research method.
I conducted interviews to understand the users I am designing for and their needs. A primary user group identified through research was working class adults and students within the age range of 20 to 45 years who do not have time to cook meals.
This user groups confirmed initial assumptions of time being the major factor as to why users resort to ordering of meals, but research also reveals that time wasn’t the only factor limiting users from cooking at home.
From the interviews, user problems included obligations, interest or challenges that make it difficult to get groceries for cooking or go to restaurants in person.
User Research: Pain point 1
In-accurate Estimated Delivery Time
In accurate time estimate for delivery of the food as they would have to wait longer than expected for their food to be delivered
User Research: Pain point 2
Inability to Live Track Orders
Inability to live track orders from the point where it's ready to leave the restaurant to the point it is delivered to them.
User Research: Pain point 3
Limited Varieties of Food Options
Varieties of food options is limited and users are constrained with the type of meals available, hence cannot try out new dishes.
User Research: Pain point 4
Low Delivery Coverage
Due to poor delivery coverage of existing food delivery apps, users are unable to conveniently order food when they are in locations where there are little or no delivery coverage.
Competitive Analysis
Competitive Audit goal:
To compare the ordering experience of each competitor's app.
I conducted a secondary research to better understand the market. Our key direct competitors are Jumia food, Chop Nownow and Uber eat. While Glovo, is an indirect competitor, and is famous for other services other than food delivery they offer.
Jumia food, Uber eat, Glovo’s apps are visually more ornate and geared towards helping users navigate its large menu. It lets users select their restaurant, order their meal, do one-click payment through saved account information, but does not track the delivery process every step of the way. They place strong emphasis on “fast food,” but don't offer healthy customization options. All 3 apps don't offer any audio accessibility features. Both Uber eat and Jumia food apps are available in English and other languages. While the Glovo app is only available in English. Chop NowNow’s app is simple and incredibly easy to use. Their menu offers a limited variety of traditional Nigerian food, but doesn’t specifically offer health-conscious options. The app doesn’t offer audio and multi-language accessibility features.
Names of competitors include:
Jumia Food
Chop Nownow
Uber Eat
Glovo
Define
Problem Statement:
Shantel is a busy accountant who is married with 2 children and needs to be able to order from a varieties of healthy meal options so she can spend less time planning meals and devote more time to her work.
User Persona - Meet Emmanuel
Problem Statement:
Emmanuel is a final year student that has allergies and cannot cook, who needs to see the ingredients used in preparing meals because he wants to eat healthy while also preventing allergic reactions.
User Journey Map
User Journey
I mapped out the users’ steps to see how I could simplify their journey to help them reach their most important goals with the product.
The user journey map captured the various steps and tasks involved to reach their goal. it also describes the emotions or feeling of the user while carrying out these tasks and also ways to improve their experiences to ensure they have an obstacle free path.
Userflow
User Flow
I constructed a clear and easy flow for users to get from the entry point of opening the app, to task completion of an order confirmation. This helps in understanding ways users can interact with the product, as well as allowing us to see navigation through user goals. we designed a structural flow focused on the problem statement. Our idea is to visualize the complete journey that the user would follow throughout the solution. This allowed us to see where they could get stuck or feel lost and then we would offer the easiest way out of an error.
Site map
Site Map
I created a hierarchical diagram of how the application would look like, that shows how pages are prioritized, linked, and labeled.
Ideate
Paper Sketch
Sketch
With an idea of all the necessary screens, I put pen to paper and sketched several iterations of each screen.
Taking the time to draft iteration of each screen of the app on paper, ensured that the elements that made it to the digital wireframes would be well suited to address user's pain points.
To make the experience fast and stress-free for the users, for the home screen, I prioritized an easy ordering process to help users save time.
Low Fidelity Wireframes
Digital Wireframes
As the initial design phase continued, I made sure to base screen designs on feedback.
Every navigation was a key user need to address in the designs in addition to equipping the app to work with assistive technologies.
Low Fidelity Prototype
Low Fidelity Prototype
I created an interactive clickable prototype of my low fidelity wireframes so I could carry out early usability study with research participants to identify road blocks and obstacles while carrying out specific tasks.
User Testing (Usability Studies)
Before creating the high fidelity Wireframes of the product, I did a testing round with the low fidelity prototype in order to reveal possible usability problems. The method of usability studies used was moderated usability studies.
Research goals:
To determine if users can complete core tasks within the prototype of the food o’clock app.
To determine if the food o’clock app is difficult to use.
My research questions were created and structured in a way it provided answers to the following:
How long does it take a user to search for meals and order meals in the app?
What can we learn from the user flow, or the steps that users take, to order meals?
Are there parts of the user flow where users get stuck?
Are there more features that users would like to see included in the app?
Do users think the app is easy or difficult to use?
Participants were workers and students who don’t have time to cook due to their busy schedules. A total of 6 participants were recruited for this stage of testing. Three males and three females between the ages of 20 and 45. One participant is a person with visual impairment.
All participants were asked same set of questions and observed as they carried out and completed tasks within the app which helped identify possible usability problems. These findings were grouped and categorized by placing similar observations in a group using affinity diagram.
Adjustment were made both to the user flow and also some of the wireframes (screens) were redesigned to simplify the flow there by creating a better experience for the users based on the insights gotten from the study.
Prototype
Homepage of the Food O'Clock App
UI Design
Once I tested out all usability mistakes from the first usability testing, I started designing the final screens (mockups) in Figma after which I created an interactive clickable prototype of my high fidelity wireframes.
The final design was refined and improved to suit users’ needs and provide an easy navigation process for users. It also met the fast order/delivery needs of most users..
More Screens of the High Fidelity Wireframes
Test
Usability Testing For High Fidelity Designs
Another round of usability testing was conducted using the high-fidelity prototype. By testing the design at this stage, I could observe an interaction that most closely resembles a real-life interaction with the final product.
Accessibility Consideration
The main goal was to create a design that puts every user in mind irrespective of their age, diversity, and other factors. I wanted every user to have similar experiences while using the app.
To achieve this, I put a few things in mind such as:
Iconography: I used Icons to make navigation faster and easier.
Imagery: Use of images to enable users understand the design properly.
Takeaways
While designing, I learned that the first ideas for the app are just the beginning of the process. Usability studies influenced each iteration of the app’s designs. I also learned to overcome my own biases and to create a product that is useful to everyone.
The app put the users and their needs, front and center.
Next Steps
For the next steps, I would do the following:
Conduct another round of usability studies to confirm if all user pain points have been addressed.
Conduct more user research to determine any new areas of need.
Build the app and have it on the play store or app store.