Redesign An App — TheFork
UI Project - Redesign - Food & Beverages
Team: Solo project
Timeline: 3 days
Software: Figma
UI Skills: Visual Competitive Analysis, Usability Heuristics, Lo-Fi, Mid-fi & Hi-Fi, Iterations
Brief:
For this first UI project, I have been requested to redesign an app of my choice. The goal was pretty simple: Pick an app, analyse it using Heuristics and make sure to keep every single info displayed on each page.
For this challenge, TheFork seemed to be a pretty interesting one. I used it a lot and always noticed a lot of inconsistency and difficulties of use, especially for an app that is meant to be for a large target.
Discover The Fork
Launched in 2007, La Fourchette was a French website that was allowing foodies to book a table anywhere. A few years later, the company was bought by Trip Advisor and becomes The Fork.
“TheFork is a community of thousands of gourmet users and more than 60,000 partner restaurants. For 15 years, TheFork has been helping you find and book the best restaurants near you or anywhere else, according to your desires and your budget.”
The Fork is the leader on this market. However, the food industry is wide, and it was easy to find some indirect competitors. I decided to run my analysis with:
Yelp
Open Table
Schlouk Map
Uber Eats
When analysing their design, branding and app, I kept in mind some information that seemed relevant in my researches:
TheFork is the only one with a strong system of offers and their own currency (Yums).
Geolocalisation is highly developed in these other apps. Meaning, the proximity is an important asset.
They all use one Typeface.
All of them have a more minimalistic interface than TheFork.
This made me decide which screens I should edit. The most obvious was the homepage. With this unlimited scroll and mixed-up categories, it is highly complex to navigate if you don’t know what you are looking for. For the human brain, having so much choice can be highly confusing and demotivate the user to go further in the research.
Two scenarios made me decide on the next pages:
The user wants to organise a dinner with some people in a specific area and not around them, later in the day on the following day.
The user wants to find a restaurant around them, in the next following hour or so.
So I decided it would be interesting to focus on the geolocalisation system of TheFork and follow the journey of a user that is quickly looking for a restaurant to book around them.
I also noticed when pressing “Plus” on a category, you end-up straight away on a first filter including the date, the hour and the number of people for the booking. Once selected, you arrive at the map that display all the results with your criteria. I felt the whole flow was struggling, and could be improved by reducing a step.
Last page selected, the Yums balance. Why? Because it is such an important asset for the company, and the current page is so unclear according to some users.
After listing all the inconsistencies using Heuristics, I figured that prioritising information would be a great starting point.
The homepage
When analysing the other app, TheFork seemed to be the only one reluctant in showing their filters on the homepage. All the other competitors did have a header as a first step to filter the request. Secondly, under the header you can see “Discover the best tables around MY POSITION”. You would expect it to be clickable, in case you want to change your location? No it’s not.
In terms of hierarchy of information, TheFork assumes any user is already familiar with their lingo. So the first category is “TheFork Summer”. It could make sense, but for a newbie, it wouldn’t be the natural to get there. So you scroll, until you find a category with a recognisable name (offers, best rated, breakfast & brunches, etc…), which almost leads at the half of the scroll. What a journey!
My idea would be to create a header first, with basic filters (time, day, number of people) and keep the research bar.
Under, a carrousel with the most popular types of cuisine.
Another carrousel with the special offers of TheFork — because that would be one of the main reason of users to come: The best offers that only TheFork propose.
Then a two section board would complete the homepage. On one side, I would centralise all the “standard categories, the ones that everybody can rely on. On the second side, these would be TheFork categories, related to the brand itself: Yums, or special experiences.
And finally, a bottom navigation bar, as it’s non-existing currently on the app. I would add the basic navigation tools such as homepage, favourite and account, but also a geolocalisation button for those in a hurry that just want to find a restaurant around them.
From the homepage to the map section
Currently, when clicking on “Plus”, you access a screen that requires you to enter the time, the day and the number of people for the booking.
Since I already included that step on the homepage, I would get rid of that step and get straight to the map.
First screen: original. In the redesign, it has been deleted as this functionality has been added on the Homepage.
The map page displays filters, a Google Map and a list of restaurants with the criteria entered. Instead of having a very complicated filter sections, I would stretch the map to allow better navigation for the user. Although, I would keep the standard filters but will hide the more specific ones behind a discreet icon.
Finally, I would make proper cards to separate all the restaurants from each others, as it’s currently very flat and there’s no visible separation between both of them.
Making the Yums great again
The Yums are this very specific currency proper to the brand. The concept is simple:
The more you book, the more you get Yums.
You can use your Yums to pay a restaurant or get extra offers.
You can earn more Yums depending on the restaurant you book.
You understood it, Yums are a fantastic asset for the brand, and part of the reasons that makes TheFork the leader in this market.
For this reason, I will make it more visible on the homepage and rework the page that is currently very unclear.
First of all, I noticed the round diagram had a weird direction and felt confused about it. When asking around me, users were not understanding it straight away, which remains key information on this page.
So that was my first redesign proposal. I then added a call to action to invite users booking a “Yums friendly” restaurant, as it remains the main of TheFork is: Lead users to book a restaurant through the platform.
Finally, for the same reasons as the homepage, I did reorganise the two sections: ‘To be expired’ and ‘istory’.
‘To be expired’ will display the amount of Yums to be used before a certain day. The user will also be able to spend them directly through the section.
The ‘History’ will remain the same, as it only displays the important information needed.
Discover the full prototype on Figma here.
What’s next?
TheFork is a well-established company and the app has been downloaded (10 million downloads on Google Play alone). On this specific project, I had to prioritise as we were required in 3 days to: choose an app, analyse it using Heuristics, conduct a Visual Competitors Analysis and finally develop three screens minimum.
However, I believe the whole app should be reconsidered in a lighter way, displaying less information at first and guiding the user to a specific direction. Currently, the app doesn’t always meet the user’s need, especially when it comes to help making a choice.
The app seems to be designed for high fidelity clients who already knows where to go. Which makes sense as it’s already a well-know company with a long history. But improving the navigation and fixing the lack of consistency would help bring new users and retain the currents ones.
It’s easy to make criticism, so I would like to finish on a positive note! I believe the app of TheFork remains anenjoyable tool to use on an everyday basis and a must-have for any foodie (like me)!