The Cravy App
Project Overview
The goal of this project is to create a solution for people who want to filter restaurants in their local area and discover new places to eat. It is hypothesized that people would like an application that understands their personal preferences, dietary restrictions, eating patterns, and budget, so they may easily find a meal to satisfy their needs; to enjoy by themselves or with others.
Tools: Figma, Miro, Google Meet , Google Docs
Design Kits: The Survival Kit for iOS Design in Figma, iOS UI Kit for Figma
Task flow diagrams were created to determine the possible paths a user might take in finding and deciding on food to eat, starting at the Cravy home screen. These flows aided in the creation of the initial wireframes mockups for Cravy, which became the foundation of the first prototype.
Ideation (Miro)
User Task Flows
Design (Figma)
Wireframes
The original filter screen allowed users to set their preferences before searching for food options in their area.
Filter screen
The main results screen was comprised of cards that showed food options, based on the user's filters and location proximity.
Results screen
The original restaurant screen allowed users to see images of food, location and hours, ratings overview, and had links to order.
Restaurant screen
The favourites screen showed a list of restaurants users have liked, for future reference, and to train the Cravy algorithm.
Favourites screen
Research
Competitve Analysis
Competitive analysis was conducted at various stages of this project to understand what UX patterns lived on other food-related mobile apps. Key areas of interest included the handling of location settings, food preferences, and features that helped users to make decisions quicker.
Research
Usability Testing
A combination of usability tests and pre and post-task questions were used to collect data, using a Figma prototype. An affinity map exercise was later conducted in Miro to synthesize the findings of the tests.
Testing Environment: Remote, shared screen through Google Meet, recording of the session, with audio
Participants: 4 participants
Format: Clickable figma prototype, using Web Browser, with pre-task and post-task questions
Key findings summary
Motivations
Saving money via promotions and coupons
Seeing pictures of the food (via Instagram) and the restaurant interior
Behaviours
Using Google Maps and Google Reviews for help in finding local places to eat
Choosing places based on what’s trending, and where friends have eaten
Pain Points
Challenging deciding on where to eat with others due to differences in cuisine preferences and dietary needs
Getting sick of eating the same foods over and over again
“I feel I would want to know what’s trendy at the moment. Like what restaurants look cute, where are people going to, where are all the influencers going, I would wanna look at restaurants like that.”
Key Quotes
“If they had any promotions going, I would like to know about it somehow. For example, there is a nearby taco place near my place that has taco tuesdays and then throughout the weekdays they have different discounts and everything. Something like that would be influential to my decision on whether to eat at a restaurant.”
“With a friend the challenges are: how much are we both trying to spend? Are they trying to try somewhere new? Am I trying to try somewhere new? Are they trying to put me on to somewhere they have already been? What kind of cuisines are they eating? Do they like spicy food for example? ”
The Xandria persona was developed based on competitive research, and the results of the usability testing that was conducted. Her core needs and frustrations represent many real-world scenarios that young people face when trying to decide on food options in their city.
Research
User Persona
High-fidelity Designs
Design (Figma)
Home page tabs
The What’s Hot and Promotions tabs were added to the new home page design, as a result of the research findings. The latter displays restaurants in the stack that have ongoing discounts (via Uber Eats/Doordash etc.), and the former displays restaurants which are currently ‘trending’ and highly rated in the selected area.
Filter screen
Enhancements were made to the filter screen including a new star rating slider and additional copy to highlight optional categories. These changes were made based on user feedback during usability testing. The positioning of the filter screen within the overall user journey was also altered to increase proximity to the restaurant result cards.
Some of the changes made to the restaurant screen was the addition of on-page reviews, so the user does not have to enter an external app. A fixed floating invite button was also added in the bottom right, in order to enhance the social features of the app. Previously, the user had to scroll down to find it in order to begin their friend inviting journey.
Restaurant screen
Steps a user would take in order to invite friends and schedule dinner plans on Cravy.
Friends Invite Journey
Step #1:
User clicks the invite button in the bottom right corner of the restaurant screen.
Step #2:
User searches friends by name, and is also given a list of friends who already like this restaurant (Chubby’s Jamaican).
Step #3:
User selects the friends from the query that they wish to invite to the dinner plans.
Step #4:
User selects the desired date for the plans and sends out the invite to the chosen friends.
Step #5:
Invited friends will receive a notification and the group can use OpenTable to book the reservations.
Social features
One major improvement to the UI after user testing was the social aspects of the app. An activity feed was added, where users can see a live feed of what restaurants their friends are liking, sharing, and eating at. Another social feature is the ‘Restaurants you both like’ section, which provides a full list of restaurants both you and your friend have liked/saved, to help speed up the decision-making process when making plans.
User profile and likes
On the user profile page, users may see upcoming events they have scheduled on Cravy, as well as notifications, where invites from friends would appear. Each item in the upcoming events section comes complete with a button to view the booking on OpenTable. Users may also click the button in the bottom nav to view and sort through all of their liked restaurants, similar to apps like Spotify.
In a future state, the app will be able to suggest optimal restaurant options for groups of friends based on the combined preferences and behaviors of each friend in the selected invite group. The app will also see the incorporation of an AI chat bot that users can conversate with to help determine the best restaurant option for their needs. This feature would be for those who prefer a more humanized interface, similar to that of ChatGPT.
Future State
Ideation
Lastly, users can also expect to see a side-by-side restaurant comparison tool, much like what certain sites such as Apple.com offer with their products. This feature will help users to compare and contrast reviews, pricing, images, and more, to aid in their decisions and planning.