UI/UX CASE STUDY: DESIGNING A FOOD DELIVERY

APPLICATION- FOODIES BISTRO

ABOUT
Food is an essential nourishing substance. It is needed to promote growth, sustain life and
provide energy to living organism.
FOODIES BISTRO

Foodies Bistro is a food delivery app created for users to place order for their choice of meal and
have the meal delivered at ease. This app ensures that users can place order at their own
convenience and also have it delivered to their specific location quickly with the use of online
services.
Business Goals
● To retain old customers and attract new ones.
● To deliver orders to respective customers that place order using the app.
● To ensure a stress-free payment for customers.
● Ease of navigation for customers using the app.
User Goals
● To see varieties of dish.
● To place order easily and make online payment or pay on delivery.
● To track orders.
● To ensure all transactions are done at ease.
Challenges
To create a food delivery app that will help customers place food orders, ensure customers
friendliness and keep up with the market trends in order to boost the efficiency of the business.
Challenges faced by food delivery app include;
- Improper food handling
- Logistics problem
- Unstable market price
- Food quality
- Competitor’s threat.
Competitors Analysis
Research on competitive analysis by searching out online food delivery app to give a better
insight and knowledge of already existing food delivery app was carried out.
Direct competitors: Chopnownow, Jumiafood, Ofood, Areafood.
Indirect competitors: Dominos, Nike
For each app the pain points, key features and other features customers are interested in were
identified. Below are some of the results of the research done;
- Consistent use of colour
- Add to cart button
- Reviews from previous customers
- Easy navigation
- Billing detail and different payment option.
- Access to previous orders
- Option to add a meal to favourites for easy reordering
- Notified of late delivery.
User Persona
The user personas were developed from the user interviews findings whose goals were similar to
those of the end users. Three user personas were created.
Empathy Mapping

User Flow
Below is the user flow which will
help users to get the idea of what
the app is about and its flow shows
series of steps to help users take
decisions as they browse through
the meals and to give them
confidence to keep going.

Wireframes
I used Figma to design both the
Low-fidelity designs (Low-Fi) and
High-fidelity designs
(High-Fi).
Low-fidelity wireframes: I designed starting with the Low-Fi designs to give the skeletal view of
the product.
High fidelity wireframes: are highly detailed as they fill in details that are missing in the Low-Fi.
Splash screen
This is the introduction page that contains the logo and image of the Foodies bistro.
Onboarding screen
This is the screen that welcomes and introduces what Foodies bistro does to the users.

Sign up/ Log in screen

New users are taken through the signup process to help in gaining the new customer’s loyalty.
The existing users are also able to login straight.
Home screen
Users are able to navigate through the home screen after login. In the home screen, the users are
able to explore and search through for food options. They are able to navigate to other screens.
Filter screen
This screen gives the different categories of food options and allows users to easily find their
choice of food.
Profile screen
The users have access to their profile after registering. The profile screen consists of information
and settings associated with the user.
Review screen
This screen consists of information, comments and ratings of previous users.
Order history screen
This screen gives information of previous order. The customers are also able to place order easily
and quickly.
Settings screen
This screen contains information (account, notification, about the app.
Notification screen
The users are able to view notifications that relates to new menu, promo, new features and order
information.
Menu screen
This screen gives details on food description and the side choice. They are able to add and
remove items and also proceed to add to cart.
Cart screen
This enables users to view food choice added to the cart and the food cost.
Delivery screen
The users fill in the location for delivery and necessary details pertaining to the user.
Checkout screen
This screen is created for users to make payment after order has been placed. It gives the
estimated cost of order and also the delivery cost. The users are also able to edit their order.
Payment screen
This screen enables the user to make payment for their order. The users are provided with
options to either pay online with different payment method or pay on delivery.
Track order screen
After the order has been confirmed and the payment has been made, the users are directed to a
screen where they can follow up on the order and the delivery process by tracking it.
Feedback screen
This allows users give response and comment on their experience using the app, their delivery
and food experience.
 Style Guide
Typography
Poppins ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890

Colour Palette
MEDIUM IS COMPLETE
BEHANCE WILL BE DONE ONLINE WITH DATA
LINKEDIN ND WHATSAPP WILL SENT LINKS TO BOTH BEH ND MEDI
The above typing is for Medium
While this below is for Behance
1) App description ; about
2) Typography:
3) Colour Palette
4) Little talk on the few screens e.g signup, home, menu and feedbacl
5) Then show pictures of all screen
6) https://www.behance.net/gallery/145817323/Mobile-Food-Delivery-App-UI
7) https://medium.com/@ololadejane/ui-ux-case-study-designing-a-food-delivery-
application-foodies-bistro-f89b7a5519f9
8)