Overview01 Empathize02 Define03 Ideate04 Prototype and TestBrandingReflection and Next Steps

Rudy's Mexican Food

Responsive Web Design

Project Overview

Rudy’s has been a staple of Old Town Monrovia, California, since 1994. At the moment, Rudy’s online presence is limited to social media and food delivery apps, so they are looking to add a responsive website for guests to peruse their menu and connect to order online.
Project Scope
Responsive Website, Branding

Speculative Project
Tools
Figma
Role
UX Designer

Challenge

With Covid-19, revenue has been declining due to dining room closures and social distancing procedures. It’s now more important than ever that restaurants have a responsive website for guests to continue to interact with them.

Websites often provide the first impression to a potential customer, so it’s important to optimize that platform to share the restaurant’s story, ambience and overall image as well as finite details like menu.

Objectives

Design a responsive website where guests can connect with the restaurant and place orders.
Develop branding to reflect Rudy's mission to be a traditional, family-oriented restaurant that offers guests a taste of Mexican culture.

Constraints

Online Order Services are limited to third-party services that Rudy's has already contracted. They don't have the budget to invest in an online Point-of-Sale system at this time.
Logo changes are limited as the brand has been around for 25+ years and enjoy local brand recognition. The owners request that the name "Rudy's" continue to be a prominent part of the logo and to keep the rose in the logo as it symbolized the owner's wife, Rosa.
View Prototype

Process

01 Empathize

Market Research
Competitor Analysis
User Interviews
Empathy Map
User Persona

02 Define

POV Statements + HMW Questions
Business and User Goals
Sitemap

03 Ideate

Feature Roadmap
Task Flows
User Flows
UI Requirements
Lo-Fi Wireframes
Responsive Design

04 Prototype & Test

Mid Fidelity Prototype
Usability Testing
Affinity Map
Branding Guide
UI Kit
Hi Fidelity Prototype

01 Empathize

Research Plan

I wanted to better understand what Rudy's users would be looking for in their online experience.
So, I conducted empathy research to help put me in their shoes and better understand their goals, wants, needs and frustrations
The research goals were to
Understand the Mexican restaurant industry, identify how current trends affect how users interact with the site and to identify user expectations, goals and pain points while interacting online.
Initial Assumptions
  • Users search for information pertaining to food and restaurants online
  • Users have experience with interacting with restaurant websites
  • Users are familiar with the concept of a Mexican restaurant
Methods used
Market Research
Competitor Analysis
User Interviews
Empathy Map
User Persona
View Research Plan

Market Research & Competitor Analysis

What is everyone else doing?
I wanted to learn more about the Mexican Restaurant Industry to understand key competitors and current trends that affect how users interact with the restaurant. With that information being limited, I focused on full-service casual restaurants since that's the type of restaurant that Rudy's is considered to be.

This information will help me later frame provisional personas in the event that I am not able to conduct user interviews. Additionally, having this quantitative data on hand, I can focus my primary research on obtaining qualitative data.
Mexican Restaurant Industry
  • Mexican food represents the 2nd most popular menu type in the US
  • As of 2018, there are over 62,000 Mexican restaurants in the United States and 97% of full service restaurants are independent operators like Rudy's
  • Revenue for industry is expected to decline 12.8% in 2020 alone due to dining room closures and social distancing procedures.
  • Full-service restaurants now compete more fiercely with their quick-service counterparts for the take-out and delivery market share
Covid-19
  • Since the pandemic started, there has been an increase in the use of digital channels to facilitate online ordering
  • With restrictions easing, more people are starting to dine-in again.  As of late August, 41% of consumers had dined indoors since it became available. In late May, only 16% had done so
  • Regardless of the pandemic, people still generally prefer an in-person experience choose drive-thrus (68%) and in-person takeout (63%) over curb-side pickup (48%) and delivery (45%)
Online Trends
Consumers are spending more money ordering online and state they prefer to order directly from the restaurant. However, their behavior suggests that they prefer the most convenient method of ordering.
  • 60% of U.S. consumers order delivery or takeout once a week.
  • 31% say they use these third-party delivery services at least twice a week.
  • 34% of consumers spend at least $50 per order when ordering food online.
  • 20% of consumers say they spend more on off-premise orders compared to a regular dine-in experience.
  • .45% of consumers say that offering mobile ordering or loyalty programs would encourage them to use online ordering services more often.
  • 70% of consumers say they’d rather order directly from a restaurant, preferring that their money goes straight to the restaurant and not a third party, also avoiding hefty fees
  • However, their activity shows that 43% of consumers are ordering directly and 37% are ordering via third-party services
  • A surge of orders from Google suggests that consumers are looking for the quickest way to order and take action upon seeing the “Order Now” button
Competitor Analysis
To gain a better understanding of what competitors are doing well and what patterns already exist, I created a competitor analysis. I looked for local independent operators who were highly-rated on Google and Yelp in the area. Direct competitors are full service restaurants nearby serving classic Mexican cuisine. Indirect competitors are those full-service restaurants that serve something other than Mexican cuisine. Knowing what these competitors doing well or where they could use improvement allowed me to identify strengths that Rudy's can emulate and address common issues proactively.

DIRECT

INDIRECT

Strengths
  • See Order Online CTA right away
  • Menus are easy to search through
  • Responsive Website
Weaknesses
  • About page not really scannable
  • Book CTAs direct you to PDF - not immediately actionable
  • Reservations page directs you to third-party reservation sites.
Strengths
  • Responsive Website
  • See Reservation CTA right away
  • About Page is easily scannable
Weaknesses
  • Obvious CTAs to order are on about page. Doesn’t fit mental model. Did not notice them in nav bar at first.
  • Gift card button has no contrast, can’t read unless hovering
Strengths
  • Responsive website
  • Easy to use navigation and obvious which page you are on
  • Order online CTA is obvious
Weaknesses
  • Main CTA is to go to Instagram
  • Difficult to find social media links
Strengths
  • Responsive Website
  • Easy to find order online CTA
  • High quality/impact photos
Weaknesses
  • Main CTA is to read more
  • Covid-19 menus not responsive
  • Covid-19 banner is small and would probably miss it normally
Patterns
Patterns across sites tell us what users are used to and what they might expect upon reaching Rudy's Mexican Food's website.
Common patterns found included
  • Responsive design
  • Obvious Calls-to-Action (CTAs)
  • Intuitive navigation and organization
  • Easy to read, scannable
  • Easy to figure out how to order online
  • High quality images

User Interviews

It's time to connect with actual Rudy's customers!
With secondary research having answered many questions and provided quantitative data, I focused on qualitative research. To really build a connection with a potential user for Rudy's website, I reached out to people who are customers in reality. I wanted to identify common goals and pain points to understand a typical user's expectations. Conducting these interviews with actual people really helps me to connect to the user as I create my designs going forward.
Type of Respondents
5 females, ages 29 to 61
2 males, ages 34 to 42
‍
All had been to Rudy’s at least once and would go again
6 out of 7 are local to the area.
Assumption Validations
  • Users search for information pertaining to food and restaurants online. Validated. Users mentioned searching for menu, store hours, ingredients among other things.
  • Users have experience with interacting with restaurant websites. Validated. 6 out of 7 had experience using restaurant websites. The 7th only used apps.
  • Users are familiar with the concept of a mexican restaurant. Validated. All users knew exactly what I meant by “mexican restaurant.”
View User Interview Research

Empathy Map

What are Rudy's customers looking for?
To synthesize the information from the interviews with Rudy's customers, I used an empathy map. I created sticky notes with observations from each interview and clustered them based on common ideas and categorized them into different themes.
Interview Findings
Using the clusters with the most consensus, I interpreted insights to determine user needs.
Insights
  • People really dislike scrolling through a long menu or downloading PDFs to see the menu.
  • People want to avoid food triggers that might make them sick
  • People choose restaurants that have good reputation
  • People prefer the convenience of ordering food on their own terms
Needs
  • User needs to be able to find info easily
  • User needs to see the ingredient list
  • User needs to be able to trust the brand
  • User needs to be able to order online

User Persona

Meet Amy...
Based on my interview findings, I created Amy, a user persona. I took the needs directly from my empathy map findings and goals from those directly expressed by the interview participants. Amy portrays a composite of Rudy's customers, so I will think of her as the potential user that I want to design for.

02 Define

What problem are we trying to solve?
Now that we know who we’re designing for, what do they need in order to have a successful experience on the site? Where might they experience frustration? How can we mitigate that? What will delight them?
To help us define the elements required for a successful site we use
POV Statements + HMW Questions
Business and User Goals
Sitemap

POV Statements + HMW Questions

Point-of-View Statements
POV statements help us connect our empathy research findings to a defined problem. These statements use the insights of our empathy map and needs from our user persona to frame a statement from the user’s perspective and help's to shape the problems we are trying to solve.
"How Might We" Questions
We use the POV statement to frame the question and thus define the problem we are looking to solve for the user.
INSIGHT
People prefer the convenience of ordering food on their own terms
People choose restaurants that have a good reputation
People are frustrated by long menus or downloading PDFs.
People want to avoid food triggers that might make them sick
NEED
User needs control over their order
User needs to trust the brand
User needs to find info easily
User needs to see the ingredients
POV Statement
Amy needs control over her order because she prefers the convenience of ordering on her own terms
Amy needs to trust the brand because she chooses restaurants that have a good reputation
Amy needs to find info easily because she is frustrated by long menus or downloading PDFs.
Amy needs to see the ingredients because her food triggers might make her sick
HMW Question
How might we help Amy have control over her order?
How might we help Amy trust the brand?
How might we help Amy find information?
How might we help Amy see the ingredients?

Business and User Goals

What do the business and users have in common?
After quickly brainstorming a number of solutions to answer the HMW questions, we need to identify common goals to determine how to approach these solutions. This will help us to identify viable solutions that meet both the business and user goals.

Site Map

So, this is how users will navigate the site.
A sitemap shows proposed information architecture. It shows the pages we will have, how they are labeled and organized and how the user will navigate through them.

03 Ideate

Let's solve that problem!
Now that we defined the problems and determined common goals, it’s time to start generating ideas. Some ideas we’ll throw away and others we’ll keep, but the point is to keep churning until we have plenty of ideas to pick and choose from to find the best solution.
To generate these ideas, we create
Product Feature Roadmap
Task Flows
User Flows
UI Requirements
Wireframes
Responsive Design

Product Feature Roadmap

What do we need for our site?
Using the HMW questions and some solutions I brainstormed in combination with the the project goals, I identified product features and prioritized them. This product feature roadmap will help us concentrate on those items with the highest priority as well as manage time and budget.

Task Flows

What will our user do?
Using the HMW questions to determine the tasks and the feature roadmap plus sitemap to see how we could accomplish those tasks, I created task flows to focus on a high-level view of the actions the user would need to take to accomplish these tasks.
  • Amy wants to order food online
  • Amy wants to check the reviews
  • Amy wants to find a particular food item on the menu
  • Amy wants to see the food item ingredients
HMW Questions   +   Site Map   +    Feature Roadmap    =    Task Flows
Click to see additional task flows

User Flows

How will our user complete these tasks?
Once the high-level version was complete, I used user flows to flesh out the process from the user persona’s point of view. This allowed me to further empathize with the user by requiring me to recognize their perspective. As we move forward to create our UI requirements, these user flows help flesh out the elements the user may interact with and the different possible paths they may take.

User Flow
Click to see additional flows

UI Requirements

What UI elements will we need on each page?
UI Requirements outline the user interface elements that will be needed for a user to accomplish their task. This is a reference document that will be updated as new tasks are defined. I used POV statements to craft user stories, Task Flows to determine the pages needed and User Flows to determine other elements that may be required.
POV Statements  → User Stories
Task Flows → Pages
User Flows → Additional UI Elements
User Stories  +   Pages   +   UI Elements    =    UI Requirements

Wireframes

Time to start building out the pages!
We started with sketches (lo-fidelity) to complete ideas quickly and move on until finding a solution that meets all requirements based on research.
‍
With the foundation set, mid-fidelity wireframes allow us to focus on visual design principles and placement/size of the different UI elements.

Responsive Design

What will the site look like on smaller devices?
I created tablet and phone wireframes for the home page, menu page and ingredient modal to demonstrate how the site would appear on difference devices. I used the bootstrap grids to help me address responsiveness and used cropping to change images and tried to keep the text sizing changes to a minimum so that the user's experience feels consistent across devices.

04 Prototype and Test

Let's put it all together and test it out!
Measure twice, cut once. If we discover what’s not working on the important tasks (based on research) before the product goes to market, we’ll save time, money and user trust by delivering a much better product.

Prototype

Let's see it in action.
Hi-fidelity pages were mocked up in order to allow users to accomplish specific tasks as laid out per the task flows. This way we can assess any usability issues prior to deciding specific details.
‍
Here, I used Figma to to generate an interactive prototype to test the home page, menu page and ingredient modal.
View Prototype

Usability Testing

Think Aloud Remote User Testing
I asked the participants to dictate aloud what they are doing and explain their choices as they completed their tasks. I observed their behavior and reactions as they did so.
Prototype shared via Figma and met with participant over Zoom.
Six users participated between the ages of 23 to 53
Tasks
  • Find a gluten-free burrito.
  • Find the ingredients for the gluten-free burrito.
  • Find customer reviews, look for a mention of the gluten-free burrito and click to read more.
  • Find out how to order online and choose your preferred service.
So, how did it go?
All users were able to complete the tasks successfully. We recorded findings for reference at a later point in time.
View Usability Test Research

Affinity Map

What did we learn?
An affinity map is a great way to categorize observations to see what functions well, what could use improvement and what may need more testing.
Observations
Categorization
Findings
  • The site proved mostly intuitive with the users able to easily navigate to complete most tasks easily.
  • There was some confusion about how to get to back to the homepage. About half the users were looking for a “home” tab or weren’t exactly sure if the logo would take them home.
  • While most users understood the dietary icons, 3 out of 6 users expected to see a legend and 2 users did not see the icons at first.
  • Finding the reviews proved more difficult and users said that they would normally go to an external review site like Yelp or Google or other social media for reviews. However, each user was also pleasantly surprised by the reviews when they encountered them on the homepage.

    When presented with the task 5 out of 6 users immediately scrolled to the bottom of the menu page as their first instinct. 1 user mentioned scrolling to the bottom because that’s “where the reviews usually are.”
Recommendations
  • Add a home tab rather than relying on the logo (low effort, high impact)
  • Add an dietary icon legend (low effort, high impact)
  • Move the reviews to the bottom of the menu page (medium effort, high impact)

Priority Revisions

Fixing some issues.
Based on the recommendations suggested from the affinity map findings and prioritizing those by effort vs impact, I made those updates.
Before
After
Before
After

Branding and Final Prototype

Let's put together a style tile and design the logo
We gathered ideas from across the internet in Pinterest to get a sense of the “mood” or art direction for the brand using the brand attributes:
•   traditional
•   friendly
•   casual
•   comfortable
•   vibrant

Logo Design

I decided to make the logo traditional and friendly. The restaurant has some papel picado decorating the restaurant, so I chose to aim for a logo inspired by this tradition. The owners requested that the rose remain as part of the new logo to represent the owner's wife Rosa.
Logo Sketches
Digitizing
Color
Style Tile
The mood board set the art direction, so choosing the color palette, typefaces and font styles took inspiration from those choices.
Each item has either been added as a component or to the style library for easy access and consistency throughout the site.

UI Kit

What will all the UI elements look like?
A UI Kit is a living file for designer to refer to that will be updated as changes are made. Each item is made into a component in Figma to ensure consistency through out the site.

Final Prototype

The branding is done; let's polish it up!
It's time to put together all the elements for a hi-fidelity version of the site. I used the style tile and UI Kit elements to render the final product.
Desktop Hi-Fidelity Wireframes
Responsive Hi-Fidelity Wireframes
View the Final Prototype

Reflection and Next Steps

Reflection

This project allowed me to gain a better understanding into how research refines decision-making to create designs that are valuable to the user. Additionally, I had to learn to evaluate solutions within the business's budget, the timeline given and additional constraints like branding requests.

Next Steps...Design Implementation and Hand-off

Time for the developers to start coding.
Once testing and revisions are complete, it’s time to hand over all appropriate documentation to the developers and additional team members to implement.
We won't be washing our hands of the project though.
We’ll be available as needed to answer questions and work on updates or new feedback.
© 2021 Lucy Kent
home
CONTACT
About
CONTACT

Get in touch!

Ready, Aim, Sent!
Thank you for your message. I'll respond to your message shortly via e-mail.
Oops! Your plane veered off-course. Feel free to e-mail me at lucy@lucykent.io.