Reimagining The FIndFood App
My approach to solving UX problems especially around conceptualising a solution around a great idea or a problem is to adopt Google’s Design Sprint (GDS) as a framework.
Project Objective
The average user makes 2 reservations per week. Utilization among all users is shaped like a normal distribution.
Among app sessions that result in a reservation, 40% included interaction with Search filters, especially price and rating. 10% included expanding restaurant pictures.
The average user has 4 in-app friends, and posts 1 review every five reservations.
70% of reservations are with restaurants that that user previously ate at; 30% are with “Favorites.” Of reservations at “Favorite” restaurants, 30% are booked through the “Favorites” page.
50% of reservations are for the same day; 80% are for sometime within the next two days. The remaining 20% have a long rightward tail, mostly shaped around pre-booking major holidays (e.g. Valentine’s Day).
5% of same-day reservations are no shows; this grows to 15% if a reservation is more than 3 days away. No shows are an extremely poor customer experience for restaurants.
Key Objective
The problem
Understanding the problem
is to revamp the shopping experience, with a focus on increasing utilization (number of bookings / user) among existing users.
The main problem was a decline in user retention, as the current shopping experience was not effectively driving user bookings.
To better understand Findfoods’ user's perspectives on the challenges they face when using the Food finder app, I spoke with some customers about their experience using the app.
I do this collaboratively too. I’d have lightning talks with team members or friends to get different perspectives and edge cases.
Guided by GDS, I came up with the product requirements by
Understanding the user pain points,
Mapping them out in groups or affinities,
Researching already existing patterns/models around the pain-points
Mapping out a user journey or storyboard.
The Design Sprint phases developed by Google
User Personas (4)
As a user, I would love to order in food if possiple from the app’s restaurant
I would love to manually search for a particular vendor
I would also love to use an inbuilt map that shows all available restaurants and also patronise any of them easily
i would like the highlight to show more dietary restrictions or call restaurants
From this exercise I came up with the following objectives from a user's perspective
Solutions & Concepts
In a 20 mins brainstorming exercise, I researched concepts from products like Grubhub, Uber Eats, doordash and Chowdeck.
The font (Satoshi) was used throughout the product because it is very readable, has diverse weights, and has a calming and inviting feel. For the colours, I used a light shade of green because the same color from the screenshot of the app given to me and also yellow as a secondary school.
User Journey
After shortlisting the solutions to proceed with, I didn’t want to immediately jump into user flows because that would limit my imagination around the solutions.
Wireflows of user
Onboarding screen
Home screen and Search flow
The design idea behind the home screen is to give customers a clearer distinction between the Restaurants. This way, customers will be able to see each Restaurant with 3 images of their food or restaurant, see their highlights, add to favourites, share to friends or reserve. Users will also be able to see restaurants based on Reservations or delivery from the homepage. Also, from the home screen, the user can search for any restaurant, users can click on a restaurant and immediately goes to the restaurant screen. Finally from the home screen there’s a fixed inbuilt map and the filter floating button which i will be talking about next
Inbuilt map and filter feature
From the home screen the fixed inbuilt map button which takes users to the map view and they can access all restaurants on the map. on clicking on the small icons on the map which shows all available restaurants, there is a small modal that slides up and users can click on a restaurant and immediately goes to the restaurant screen. and the filter button which allows users to filter the kind of restaurant they want based on the filter options.
Restaurant overview screen and reservation flow
After selecting a restaurant of your choice, a user will be able to see all necessary details of the restaurant based on overview, menu and ratings, Overview; the user can see all about the restaurant and make reservations.
Table reservation modal comes up and shows all information needed to reserve a table also ask user if they have any dietary or allergy restriction before they reserve. after all selection has been made the user can click on reserve and table reservation is complete.
Restaurant Menu screen (dine in + delivery)
Menu; if the restaurant offers delivery service, the user can click on the meal card and it shows the details of the meal and also ask user if they have any dietary or allergy restriction before they order meal. On clicking add to cart, meal will be added and takes user backs to the menu page to order more or proceed to check out.
Restaurant Menu screen (only dine in )
Menu; if the restaurant only offers dine in services. the user can only view meal details.
To make handoff smooth for the developers, I have created this documentation on Figma:
Style guide containing colour codes, typography, icons, components etc
I endured that I made use of notes on each screen that requires extra explanations for a better understanding of the engineers
I made use of autoflow plugins to connect the screens accordingly so this way, developers will know what comes next after a screen
Finally, I created an extensive user journey to make everyone be on sync
Developer Guide
Overview
Role
Product designer
Industry
Food delivery
Date
May 17, 2023
Platform
Mobile app
more work
Kuda Dashboard messaging tiles
read case study
Extreme website re-design and de-clutter
read case study
Rethinking WhatsApp status feature
read case study