BestBites:
Designing an end-to-end mobile app
Project Overview:
The objective: International travel has taken a hit in 2020 and 2021, and avid travelers are eagerly waiting for the time when it is again safe to visit other countries. These trips will be extra meaningful, and for those travelers who value a full cultural immersion, BestBites will allow them to curate a traditional culinary adventure. Apps like Yelp, while valuable and widely used, take into account the experience of service and ambiance, and have been infiltrated with reviews from impatient diners during the pandemic. BestBites focuses on—you guessed it—the best bites, and will also offer suggestions for regional and traditional dishes.
Branding message: “Welcome, adventurous eaters! BestBites is for users who are comfortable and thrive eating outside of a resort; not afraid to eat a gooey calzone while leaning up against an ancient building in Rome. For those who prioritize the best bites and appreciate traditional dishes.”
I was the sole UX/UI designer for this 80 hour project.
Research
Research Goal: We want to know what is important to travelers when searching for traditional meals. We want to know how they search for meals and how they decide what to eat.
Market Research
I researched the projected trends in international travel and dining in a post-COVID world.
International leisure travel spending (out of the US) is forecasted to increase from $31B yearly in 2020 and $45B in 2021 to $96B (2022) and $127B (2023). This is a 309.7% increase in spending from 2020 to 2023. [Source]
“Bookings have already started to pick up for next year. Gemma Jamieson, a spokeswoman for Skyscanner, a flight-booking app, said in an email that bookings for 2022 created in the last week were up 30 percent compared to the same time in July. The top bookings were to Cancún, London, Paris, Rome and Tokyo, indicating a continued demand for travel worldwide.” [Source]
“Twenty-nineteen was a banner year for travel,” she said. “Twenty-twenty-two could be an even bigger banner year than 2019.” [Source]
“Perhaps because of delayed vacations and a lot of cabin fever, Americans are shelling out more for their trips than before Covid shutdowns hit. Averaging spending for many destinations is up compared to pre-pandemic trips.” [Source] The average cost pre-pandemic for a trip to Italy, for example, was $4563. It is now $6059.
Americans are becoming more comfortable with the idea of outdoor dining, which is less about ambiance and more about embracing the food and experience. This should translate into the style of dining while traveling to countries that are more accustomed to casual outdoor dining.
It is forecasted that in the next few years international travel spending will increase dramatically. Not only that, but the average cost of a trip has increased in the past year alone. People are willing to spend more money in general on trips and have saved the money to do so over the past two years.
Competitive Research
Eaten
Strengths:
Dual search bar
Map or list result view
Rating system concept
Friends and tribes network
Map linked to Google Maps
Weaknesses:
Color palette does not feel food-related
Layout is cluttered
Legibility and accessibility issues
UI features (like rating # under profile picture) are confusing
The Infatuation
Strengths:
Curated Guides
Photography
Price categories
Floating sort button
Organized by cities
Weaknesses:
Search function
Navigation too simple/limited
Yelp
Strengths:
Clean UI
Recognizable branding
Linked to Google Maps
Photography
Tags and filters
Navigation style
Weaknesses:
Abundance of gray feels a little cold
Sponsored results
Side menu is long
Tripadvisor
Strengths:
Overall UI
Plan (trip) function
Navigation
Use of icons
Linked to Google Maps
Weaknesses:
The home screen
Must create an account before planning trips
User Survey & Interviews
28 total individuals participated in my survey. Some notable questions:
Do you have any scheduled plans to travel internationally?
If yes on the previous question, where to? Do you plan on eating local/regional dishes while you’re there? Please explain.
On a scale of 1-5, how important is it to you to eat local/traditional meals while traveling? (average: 4.79/5)
Do you have a go-to app you use to find food while traveling? If so, what is it and why do you like it?
Overall findings: people are generally interested in eating regional dishes while traveling internationally. High priority for many individuals are images, descriptions of dishes, and dietary tags. Most participants would rather have a dining experience where the food is superior to the ambiance/service.
Interview participant criteria: Individuals who value an immersive culinary experience when traveling. Individuals who have traveled internationally.
I interviewed three people over Zoom and in person, focusing on their previous experiences dining while traveling internationally. The participants are a Recipe Developer, Research Associate, and Architect, all in their early 30s.
All three of these participants are very well educated on cuisines from around the globe. One of them is even a recipe developer. What I found interesting was that even though they are all knowledgeable about dishes, all three of them mention wanting to do additional research before going on their next trip. This app would not only be for people who know a minimal amount about traditional dishes, but for those who already know a lot.
Define
Persona Development & Empathy Mapping
My fictional persona, Jessa, is the result of my user interviews and research. I used Jessa to create an empathy map and, later, a user flow that shows her process using the BestBites app. Jessa is an adventurous spirit who values regional cuisine while traveling but does not seek out anything fancy.
User Flow
Broken down into actions and decisions, the user flow follows Jessa as she plans a trip to Rome with the BestBites app.
Design
Sketched & Digital Wireframes
Preliminary sketched and digital wireframes detailing the flow of the app. The digital wireframes were vital in finding my final designs; looking at the app UI below, you’ll see that I made only minor changes in some navigation and image layout.
Branding & UI Kit
I want this app to feel vibrant yet approachable. I designed the logo keeping in mind that different eating utensils (or none at all) are used around the world. I settled on using the spoon, which is widely used, one of the oldest utensils, has a nice, subtle curve, and slightly resembles an arrow.
The red, saturated orange-yellow, and dark gray are used most heavily in the final app UI while the additional colors will be used for branding purposes.
App UI
Below are some of final UI designs, which I used for prototype testing:
Test
Prototype & Usability Testing
Test Objective: To evaluate the usability of the BestBites app while searching for a dish and viewing filtered results.
Test Goals & Missions:
Using the guidebook: you are planning a long-awaited trip to Rome, Italy. Search for Rome and learn more about Cacio e pepe, one of the recommended local dishes.
Searching for a specific dish: search for places that have Cacio e pepe in Rome. Sort the results by rating to find the #1 rated Cacio e pepe and open the business page.
Add a dish to your wishlist: add the #1 rated Cacio e pepe in Rome to your wishlist. Then view a couple of the dish images at full screen width.
Test Methodology
Conducted via Maze, a remote testing platform, linked to my Figma prototype (above). 24 participants completed the Maze testing.
Findings:
The three tasks combined received an 8.4/10 rating for intuitiveness. The biggest sticking point was the third task, where the participants had to swipe to view the next image. Two-thirds of the participants completed the prototype on desktop, which means that they would have to swipe with a cursor to complete the task.
This may have been easier if they were on a mobile device with touchscreen. As one user explained: "When I tried to scroll through the full size pasta photos on my computer, I couldn’t see an arrow to scroll left so couldn’t seem to continue. However, when I tried it on my phone, I scrolled through the photos no problem with a swipe of the finger." This was a good reminder that users have different habits on different devices, and interact accordingly.
Overall, I received generally positive feedback on the app concept and prototype.
Priority Revisions & Conclusion
For the initial round of revisions, I made a small addition to the full-width image slideshow to emphasize that it is interactive: the “1/43” (seen in the image here). As I explained above, this was something that really tripped up a lot of people during usability testing; they didn’t know that they could use their finger to swipe to the next image.
I also improved the quality and realism of the prototype itself. For the first task in my usability testing I asked users to search for Rome, Italy in the search bar. I created an interaction with the search bar, assuming that individuals would click on it to see a live cursor. Instead, many users attempted to type Rome on the on-screen keyboard. I added this functionality to the final prototype so it would be ready for further usability testing.
In the next round of testing, I would ask all of my participants to use a mobile device instead of desktop to prevent the kind of issues I encountered in the first round (people not using their cursors to swipe, etc.). I would also delve a little deeper into font size, icons, and copy, all of which I believe could be tested to ensure that the final product is as usable as possible.
