Project overview

Created as a project for the Thinkful curriculum, the Tastebud app is a social app that helps indecisive foodies find their next meal.

Tastebud

Tools

Google Workspace
Figma
Maze
‍

Roles

Project manager
Researcher
UX/UI designer

Timeline

June - August 2022

The problem

People are overwhelmed with options, especially when choosing where to eat with others.

The solution

In partnership with a colleague, we created an app where users can connect with others and find restaurants to find the perfect place to eat

Discover

Research methods

Before delving into research that would drive our design, my colleague and I drew out our target audience.
We decided that some key traits we would look for are:

Age range: 18-54 years old
Common job titles: Office workers, students
Values: Spending time with friends and family, quality time
Likes to: Eat and go out on a regular basis
Wants to: Make an informed decision on restaurants/places to eat
Regularly uses their phone and browses social media platforms

When conducting the following research, we looked for participants who fit with these traits.

Survey

Using Google Forms, a survey was conducted to find out more about the potential users for our app. To gauge the habits and traits of our participants, some questions we asked were:

How often do you eat out with friends and family?
What is the most difficult part about making plans with others?
How do approach making a decision on a restaurant?

A couple key insights that were gained from the survey:

Most people eat out at restaurants a few times a month
Most take at least 5-10 minutes to pick a restaurant when eating with a group, some even a couple days
Most have, or know of someone, who has a list of restaurants they reference

Through this, we narrowed down on the pain points we wanted to address:

There's too many options for restaurant choices
It's hard to get an agreement based on the food needs of others
It's hard to connect with others on social media over food

User personas

Based off the research done, we've created two personas to reflect our target users:

Define

User stories

After considering our potential users' needs, wants, and frustrations, the following stories were made:

As a user, I want to be able to get a recommendation on what restaurant I should eat at so that I don't have to be overwhelmed by indecision.
As a user, I want to be able to look up restaurants so that I can learn information about it.
As a user, I want to be able to view my friend's preferences and the restaurants they're interested in so that I can make an informed decision.

These high-priority stories would drive the design and development of the app's features.

User flow

To visualize how the stories would connect in the app, user flows were drawn out. This particular user flow shows the actions that a user could take in order to receive a restaurant recommendation from the app.

Site map

Following the user flow, a site map was drawn out after considering all the actions that a user would take and the features intended for our app.

The app would have four main parts: a profile page, a search function that allows the user to look up restaurants and other profiles, other profiles, and a recommendation engine that gives the user restaurant recommendations.

Sketches & wireframes

After finalizing the information architecture, we started to think about how the app would be structured.

First, we did some quick sketches of the app design and layout through exercises like Crazy 8s, where eight rough sketches were drawn of potential wireframes.

Through these sketches, we could visualize the functionality of the app.

Then, we thought more in-depth about how certain components would work. We knew one of the most challenging designs would be of the recommendation engine.

What we had to keep in mind when designing the recommendation engine was how to present questions to the user without boring them in the beginning, and then how to present the list of generated restaurants so that the users wouldn't re-encounter the same problem they faced in the beginning: being indecisive.

Once all the components were fleshed out, we drew up some paper prototypes and tested them with users to see if the flows made sense.

After referencing the sketches and paper prototype testing results, we built out the first iteration of the wireframes.

Low-fidelity prototype

View the low-fidelity prototype >

Then, based off the paper prototypes and digital wireframes, using Figma's prototyping features we added a few interactions to start testing with users.

Develop

Brand personality

When we first thought of the idea behind this app, we knew we wanted the app to be:

Fun

Saliva-inducing

Simple

Moodboard

Taking a look at our design inspiration for the app, we knew we wanted to emulate the same mood as other food-related apps, whether it be for a food delivery app or a restaurant app.

We would accomplish that by implementing similar color palettes, emphasizing the importance of photos over content, and making the interface as simplistic as possible.

Logo

Similar to how we wanted the interface, we knew that we wanted the logo to be simple and effective.

Since the ideation for the app, we were certain that the app should be named 'Tastebud' to recognize that this is an app surrounding food and friends.

Based off that, we decided to have the logo comprise of a simple smiley icon with a tongue, based off the name of the app, as well as the name. If the brand were to become more recognizable, we would be able to remove the app name from the logo.

Style guide

By bringing all the above style elements together - along with a color palette, typography, and the UI components - we came up with the style guide.

Deliver

Usability tests

In order to test the functionality and design of the app, we held usability tests using Maze.

In the first 4 tests, we asked the testers to complete A/B testing and 3 scenario based tasks:

Say you're planning to eat with your friends, and they don't want to go further than one mile. How would you generate a restaurant recommendation?
Say you found an interesting restaurant called 'Restaurant #1' on Instagram, and you want to find more information about it. Where would you go to find the details on the app?
Your friend John Doe, who told you to download this app, also told you to add him as a friend. How would you do that?

In the second set of 4 tests, we asked the testers to complete the above scenario based tasks, with the changes from the A/B testing implemented.

Overall, the testers were able to complete their tasks smoothly. Although, they did have a couple hiccups which we addressed through design decisions.

One hiccup that we discovered was that users weren't getting enough hints for UI interactivity, even if they've seen similar features in another app. About 40% of the interactable components were not being interacted with.

So, we had to adjust some of our components to make the interaction more obvious. For our restaurant recommendation filters, we changed from using the select components in the left image, to the dropdown components in the right image.

With this, the click/touch interaction was more obvious and the users knew that they were able to add more information in this way.

We also had to make a major change to the navigation of the app.

25% of testers skipped the 'Friends' page, as shown in the top of the image, entirely. They also found it irrelevant.

So the new navigation bar shown in the bottom of the image accounted for those thoughts. It reduced both informational and visual clutter on the app.

Final product

After making the design and functional changes to the app in response to the usability tests, we were able to create the final prototype for Tastebud.

View the final prototype >

Final thoughts

This project was the first one where I conducted usability tests, and as a result of committing a few mistakes with gathering data and running tests, I've learned a lot.

First, I've learned to test more often throughout the design process. I only conducted tests after created the low-fidelity prototype, but I could've conducted tests before then too.

Second, I learned to pay attention to the nuances of my testers' actions, voice, and emotions in order to better gauge their reaction to my product.