Restaurant Passport
Type:
Responsive Website
Duration:
Oct 2019 | 2 weeks
Role:
Sole UX/UI Designer
Tools Used:
Sketch, Figma, Stickies.io, Whimsical

PROJECT BRIEF OVERVIEW

Create a responsive website that gives users the ability to view nearby restaurant suggestions and view restaurants they have visited by creating a 'passport' that keeps track of them. The MVP includes the mobile and desktop version of the following pages: Explore Restaurants page, Individual Restaurants page, and User Passport page.

Team overview

While I was enrolled in Lambda School for their UX Design track, I worked on this project with five students from the Web Dev track. We communicated daily through Slack and Zoom remotely to ensure the success of the project and its deployment.

Research & Discovery

methods overview

• Competitive Analysis

• Proto-Persona

• User Journey Map

COMPETITIVE ANALYSIS INSIGHTS

To better understand the purpose and reasoning behind this project, I researched products that offer similar experiences. Among these products were Yelp, iPhone Maps, OpenTable, Zomato, and TripAdvisor. While looking at each products user experience, I was able to deduce the areas of importance for Restaurant Passport which were the following:

• The individual restaurant information page had to be easy to find information because it would be key to user success and retention.

• The explore restaurants page would need to have key information on each restaurant while also ensuring there isn't cognitive overload.

• No other competitors offered a way to track where their users have been, so the passport feature needed to be highlighted and easily distinguishable while scrolling through restaurants.

Proto-persona

With these areas of importance in mind and the analysis of similar products, I moved on to creating a proto-persona to ensure that not only myself but my team, could put ourselves in the user's shoes. To create this proto-persona, I researched restaurant products' target users. What I found was the following:

• Middle to high salary classes typically use products like this more often. This is because they can financially afford the cost of eating out more often. The percentage eating at a restaurant at least weekly rises from 44% among those earning less than $30,000 in annual household income to 67% among those in the middle-income group and 72% among those earning $75,000 or more.

• Extroverted personalities typically go out to restaurants more often than introverted personalities. Extroverted personalities also are more active on social media platforms, and in turn, like to "check-in" or post about new locations, they are trying.

• Young adults, aged 18-34, go out to restaurants more often than other groups. On average 70% of young adults eat dinner out at least once a week, compared with 65% of those aged 35 to 54 and 50% of those aged 55 and older. In addition, roughly twice as many young adults (20%) and middle-aged adults (19%) as older adults (11%) report more frequent dining excursions.

Keeping these key things in mind, I was able to create our proto-persona, Jacob Willis.

Journey map

Now that I had created a proto-persona, the next step was to make a customer journey map to get insights into what our target audience, might go through while interacting with our product. While doing this, I was able to get insights that could be done to improve the user's experience.

Ideation & Define

Methods overview

• Brainstorming & Dot Voting

• Site Map

• Crazy 8's

• Responsive Sketches

Brainstorming & Dot Voting

To ensure that I was able to get all the insights I could get before going into the structure and layout of the product, I led a remote workshop with a few other UX Designers. Although they weren't on our team, they volunteered to help me during my brainstorming process to ensure I was looking at it from other perspectives. During this remote workshop, I only initiated and did not participate in the actual process to ensure that I was getting fresh perspectives. The other UX Designers brainstormed ideas, sorted them into categories, and then dot voted ("x" on the end of sticky note) on the ideas they felt were the most important to have incorporated.

Site Map

After the remote workshop and the previous research, I knew I had a solid footing to get started building a sitemap for Restaurant Passport. Since the primary action of the product is to find restaurants nearby, I made the explore page the landing page once a user logs in.

Crazy Eights

Now that I had a site map planned out, I needed to dive into the designs. I wanted to focus on the explore restaurants page first since it was the primary function of the product. I wanted to make sure that I explored multiple options for the layout of this page, and get out all ideas, even the not so great ones. So, I knew there was no better way to jump-start this process than to start with a round of crazy eights. My quick sketches are the following, and I decided to move forward with the top row, third from the left sketch.

Refined responsive sketches

Once I had picked my sketch idea from the crazy eights, I moved into building the sketches for the rest of the MVP. I started with the mobile screens first to make sure that I kept things simple from the start. I knew it would be better to design mobile-first and then build up from there for desktop. These were the final refined responsive sketches for mobile and desktop.

Build & Refine

OVERVIEW

In this phase of the design process, I started to create the wireframes from my sketches in the previous phase. I then used those to do usability testing to get insights from potential users.

WIREFRAMES

My first step in the Build and Refine process was to start wireframing out the designs based on the sketches created in the prior phase. These were extremely necessary for the upcoming usability testing, and for the rest of my team to start laying the framework.

Usability Testing

The last step before moving into high fidelity design was to conduct a round of usability testing on the wireframe screens. I first created a screener survey that I then pulled target users from to do a usability test over Zoom. I conducted five different usability tests to ensure that I was able to find as many usability problems as possible. The following were the pain points I observed:

• Users wanted to be able to see if a restaurant was open or not without having to look at the hours in the general info.

• On the recommended restaurants, users wanted a "view all" option instead of only having the horizontal scroll or next arrow.

• Users wanted to be able to see a quick price range or average menu item price to gauge the cost of their meal.

• On the passport page, users wanted to be able to see what date they marked the restaurant as visited.

• Users wanted to be able to see an about section for the restaurant on the restaurant's page to know a little more about the place.

• When I asked users to find where written reviews would be, about half would scroll down the individual restaurant's page to look for reviews instead of clicking the review stats at the top, showing me it wasn't very intuitive.

High Fidelity
Process

OVERVIEW

After multiple rounds of usability testing, and the other forms of research I did in the 'Discovery' phase, I was ready to finalize the high fidelity designs. During this portion, I had to make some adjustments to the previous designs to reflect the insights I found in the usability testing.

meeting with team

Before I started working on the high fidelity screens, I met with my team to ensure that the designs from the wireframes were within scope for them to be able to execute in the project timeline. I also spoke to them about the things I discovered in my usability tests and showed them updated wireframes with the adjustments. Thankfully, all of the insights I found from the testing were simple fixes, so we agreed on moving forward with the designs.

Typography & Color palette

Before I could move into my high fidelity screens, I needed to decide on a color palette and typography. This was an important step so that my team and I could refer back to while implementing the designs.

It was important to keep the color palette simple and minimalistic so that the pictures could draw a user's attention the most. I chose the primary color (#E05A39) because it connotes excitement, warmth, and confidence. It also passed WCAG guidelines for AA requirements. The secondary color was the same as the primary, but at 70% to stick with the minimalistic look.

I chose TT Norms as the typeface because it gives off an exciting, youthful, and fun feeling while also being professional and easy to read.

Final iterations

After multiple rounds of iterations and small tweaks, I finally reached the end of this sprint. Once I had finished the mobile and desktop mockups, I decided to also do tablet versions as a stretch goal for myself. Although it was not expected from my team, I knew that it would help them with their responsive breakpoints. The following image shows a high-level view of all my final iterations.

Final High Fidelity Designs

OVERVIEW

The following are the final high fidelity screens that were needed to meet MVP for our team's project.

explore restaurants page

This page was the most important since it would be the primary focus for a user and their first interaction with the product once signing in/signing up. On this page, the key takeaways and important features for the user were the following:

Individual restaurant page

Once a user finds a restaurant, they are taken to the individual restaurant page. When designing this page, I kept in mind how a user must be able to easily scan and digest information. A few key takeaways and important features on this page were the following:

user's passport page

The last page that was created was the user's passport page, which gives users the ability to view all the places they have gone to. A few key features and takeaways on this page were the following:

visited stamp

The key thing that differentiated this product from similar products, was the ability for users to keep track of places they have visited. This was the whole idea behind the passport part of Restaurant Passport. Keeping the idea of a passport in mind, I created a stamp-like vector image that would appear on places the user had been to. I decided on it going in the bottom left corner of the main photo for a restaurant for easy viewing. This was extremely important so that they would be able to quickly decipher where they had and had not gone to.

Explore restaurants page

This page was the most important since it would be the primary focus for a user and their first interaction with the product once signing in/signing up. On this page, the key takeaways and important features for the user were the following:

• GIving users the ability to have a search bar within their passport, let’s them quickly find a place they visited instead of the general search bar for the website.

• Giving a user the ability to see their highest rated places, would save them time from looking through the list, or filtering options, to find their favorites.

• Showing a user their stats such as how many places they visited, and when they visited, helps them keep track of their personalized information for their passport. These were included to help incentivize users to use the feature to see all the places they have been like a real passport would.

individual restaurant page

Once a user finds a restaurant, they are taken to the individual restaurant page. When designing this page, I kept in mind how a user must be able to easily scan and digest information. A few key takeaways and important features on this page were the following:

• Users could easily be overwhelmed with a large amount of information on this page, so it was key to focus heavily on text hierarchy, both in size and color.

• Users needed to be able to easily mark and rate a place as visited so that they could keep track of the places they had been. For that reason, this feature was put at the top of the page instead of down below all the information to ensure it wasn't missed.

• A tab selection for the general info, directions, menu, and reviews was extremely important for the user's experience. Without it, the information would have been stacked and users could potentially miss information from scrolling.

user's passport page

The last page that was created was the user's passport page, which gives users the ability to view all the places they have gone to. A few key features and takeaways on this page were the following:

• Giving users the ability to have a search bar within their passport, let's them quickly find a place they visited instead of the general search bar for the website.

• Giving a user the ability to see their highest rated places, would save them time from looking through the list, or filtering options, to find their favorites.

• Showing a user their stats such as how many places they visited, and when they visited, helps them keep track of their personalized information for their passport. These were included to help incentivize users to use the feature to see all the places they have been like a real passport would.

Problems I Encountered

Time-frame of project

This project was only a couple of weeks long, which did not give me much time to execute the research and designs. I pushed myself a lot during this project to ensure that I didn't fall behind for my team since they all depended on my designs. Ultimately, constant communication, strict personal schedules, and lots of early sketching made this successful.

usability testing results

Although this was not necessarily a problem, because I received some valuable insights which was the purpose of a usability test, it still took time to make the changes. Thankfully the changes were quick fixes, and my team and I worked together to ensure the changes.

Conclusion
In reflection

Looking back, this project pushed me greatly because of its time constraints. However, I feel very happy with the end product and seeing how great my team and I worked together to bring this to life in about two weeks. The limited research time available taught me to work flexibly and make sure that I have good time management while making my design iterations. All in all, my team and I kept the user in mind the whole way, which to me, is success in and of itself.