Case Study: Food ordering and delivery app
Sometime ago while I was still just transitioning from Brand design into UI/UX, I started designing random stuff which included a food delivery application, I used a fictional brand identity idea I had in the past and created the layout. I designed foodini 1.0 with the limited knowledge I had in UI/UX and came up with four basic screens and the dark mode.
Later in October, while doing some research into the food sector, I challenged myself to take the project all over again with full research and a complete iOS application. I came up with foodini 2.0.
What does foodini do?
Foodini is a food ordering and delivery platform where you can order food instantly from the conveinence of your phone and get your order cooking as soon as you request.
My mission
Improve usability and the overall user experience of food delivery applications.
My role — design process
- Market analysis — trying to understand the market better.
- Competitive analysis — trying competitor apps and reading app reviews.
- I created and posted surveys online and got 32 responses.
- I conducted user interviews with six people who already use food delivery apps so as to know their pain points — four people in Nigeria, one in the U.S. and one in the UK.
- I created user personas, brainstormed and ideated solutions.
- I sketched the proposed layout of the app
- I designed the user interface from the sketches I made (definetly made a lot of design changes and took out some trash).
- I created prototypes.
Market analysis
The global market for online food delivery attained a value of USD 213 billion in 2020 driven by rising disposable incomes and growing internet penetration. Aided by the technological advancements in delivery methods and the rising adoption of smart devices, the market is expected to witness a further growth in the forecast period of 2022–2027, growing at a CAGR of 14.5%. The market is projected to reach USD 465 billion by 2026.
EMR’s meticulous research methodology delves deep into the market, covering the macro and micro aspects of the industry. Based on its platform types, the market can be segmented into mobile applications and website, with mobile applications accounting for the largest market share. On the basis of business model, order focused food delivery system sector accounts for the largest share in the global market. Based on the payment method, the industry is bifurcated into online and cash on delivery, with online payment leading the market. The major regional markets for the industry are North America, Europe, the Asia Pacific, Latin America, and the Middle East and Africa.
Source: Expert Market Research.
Comparative and competitive analysis
A competitive analysis is a strategy that involves researching major competitors to gain insight into their products, sales, and marketing tactics.
Competitive analysis can help you learn the ins and outs of how your competition works, and identify potential opportunities where you can out-perform them.
“If you want to have the best-in-class user experience, you have to know what your competitors are doing. Learning their strengths, weaknesses, and what opportunities you have to gain market share can have a critical impact on the success of your business.”
- Diff Agency
Let’s dive into a few more benefits of conducting competitive analyses:
- Helps you identify your product’s unique value proposition and what makes your product different from the competitors’.
- Enables you to identify what your competitor is doing right. This information is critical for staying relevant and ensuring both your product and your marketing campaigns are outperforming industry standards.
- Tells you the competitors’ shortcomings — which helps you identify areas of opportunities in the marketplace and test out new, unique features that haven’t already been implemented.
- Learn through customer reviews what’s missing in a competitor’s product, and improve upon it.
- Provides you with a benchmark against which you can measure your growth.
I tested various food delivery apps and highlighted the major competitors:
- Uber Eats
- GrubHub
- Zomato
- Bolt foods
- Talabat
User research
I conducted two surveys, one using Surveymonkey and another using Google forms.
I received a total of 32 responses. After collecting the results, I analyzed the data using multiple techniques.
The research revealed that the majority of users prefer placing order via mobile app than on a website.
The results also seemed to indicate that our users were interested in buying food online, but haven’t tried any food delivery app yet which suggests that there is a disconnect between the users intention to buy and executing the action.
I thought to myself “How do I convert these enthusiasts into leads?”
I came up with a lot of ideas and settled on simple onboarding, self explanatory short processes, good information architecture, a minimal beautiful layout and optional sign in/sign up that doesn’t come up till the final stage of ordering.
User personas
A user persona was used to represent the goals and behavior of a hypothesized group of users. These personas were synthesized from data collected from interviews with users and surveys.
Sketching
Sketching was an important aspect of my design process. Basically what sketching does is that it takes your imaginative mind from the clouds to the user interface screen where you can start thinking about the user experience. You’ll be able to figure out how the app will work to get the desired result. Sketching allows you to visualize the screen-to-screen interaction so that your idea is something that’s visible and clear in user interface form.
It’s a time saver instead of constantly clearing your design screens.
Challenges and how I solved them
Home Screen
The Challenge:
User research indicates that new users spend less than 30 seconds on the home screen after their initial login.
How can I design an engaging layout?
The Solution:
- I made use of high quality images to give the user high-end affection towards the app and an urge to get rid of the hunger.
- I prioritized the closest restaurants and top rated restaurants section so the user doesn’t have a hard time figuring out what to order.
- The delivery time is clearly stated.
- I made the entire page minimal, implementing white space and coloring correctly throughout the app.
Order History
The Challenge:
Customers are having a hard time locating previous orders (they don’t exist at all or are too complex to locate)
How can I implement this feature and make it easily accesible?
The Solution:
- I included Order History in the bottom navigation for quick visibility and accesibility.
- The user can view the status of an ongoing order from this section
- Clicking on any of the previous orders, the user can view details of the order, reorder easily and also post complaints.
Search
The Challenge:
The search page is blank, why does the user have to search for the same item over and over again?
How can I personalize the search experience and make it more engaging?
The Solution:
- I added a search history section where the user can see items he/she has previously searched for.
- The suggestions from a search are personalized based on what the user likes
- I also added popular categories — the user can easily view categories and their content. For example: Breakfast — the most popular meals users have for breakfast would be under this category and the user can make a choice if he/she is indecisive
Discounts and promotions
The Challenge:
Most food delivery apps do not offer promotions or discounts on orders. The few that do do not prioritize it (you might not even notice). Everyone loves free things so why not make it a priority.
How can I prioritize promotions?
The Solution:
- I added a section for promotions at the header of the homescreen, you can also view promotions on the profile page (check homescreen images).
- Discounts are automatically applied (the user can decide to turn them off)
- On every screen where price is — the previous price is slashed out and the updated price is highlighted in RED for visibility.
Order and cart
The Challenge:
Research shows some users add items to their carts but do not complete the purchase process because there are too many steps and the cart is hard to edit. Also, it is hard for a user to make a choice of meal if they haven’t had it before so I added a description on every meal.
How can I simplify this process?
The Solution:
- Before the order is placed, a section is added where the user can choose certain allergies so meals with those allergies are indication in the results.
- The user can also contact the restaurant before placing an order to make enquiries.
- To make it easy to edit meal options, I included checkboxes so the user can select different additional options on a meal.
- The user can also leave a note to the restaurant (use case: requesting extra cuttlery or specifying ingredients not to include in order)
- The user can select quantity needed for every order
- Once the order has been placed, quick navigation to cart is added and edit cart option is available.
Address alert
The Challenge:
When a user orders food to the wrong location, they must contact customer service which causes delay.
What can I do to prevent this from happening?
The Solution:
- I placed a map preview to update the current location of delivery before ordering. The user can expand the map and easily navigate through the map to select an exact drop off location.
Order status tracking and delivery map
The Challenge:
Through user surveys, we have learned that users would like realtime order status updates and that they would like to view the location and arrival time of their food.
How can I design an experience users can visualize order status and progress?
How can I design a map experience for users to view this information?
The Solution:
- Users can view live updates of their order from the moment it is placed till the moment it arrives through an informative wizard.
- An estimated time of delivery is also added to this section.
- I implemented a map — the user can view the rider’s location, restaurant location and also the selected drop off location in real time.
- The user can also contact the rider from this section.
