The Tamale Factory

RESEARCH

USER INTERVIEWS

I conducted interviews remotely over Zoom with 5 participants, all of whom were frequent Tamale Factory customers and ate out regularly at restaurants.

OBJECTIVES

My goals during this interview process were to:

Identify what customers generally look for when they visit a restaurant's website

Understand what users research before they visit a restaurant in person – would a restaurant's website affect their decision to dine at the restaurant?

Determine what customers think of the current Tamale Factory website

Find out what users think of the look and feel of the current website – what features could be improved or added to the new website?

Findings & Analysis

After interviewing my participants, I sorted through all my recordings and notes to make an affinity map and discover prevalent themes.

FINDING #1

All of my participants research (i.e. Yelp, Google, restaurant website) a restaurant before dining there

"I like seeing the menu, pictures of food, and reviews before dining at a restaurant."

DESIGN INSIGHT

Showcase commonly researched items on website homepage

Include pictures of the food and restaurant both inside and outside, as well as links to social media

FINDING #2

4 out of 5 participants said a restaurant's website would affect their decision to dine there

"If a restaurant's website looks cheap or tacky, the ambiance at the restaurant would most likely match that."

DESIGN INSIGHT

Redesign the website's UI to be both functional and aesthetic

The website design should be easy to use and beautiful to look at, accurately depicting the restaurant's inviting atmosphere and vibe

FINDING #3

The main thing customers look for on a restaurant's website is the menu

"I always look for the menu first because I'd like to know what to order before I go."

DESIGN INSIGHT

Make the menu easily accessible

Since the menu is main thing users look for, I will have a link to the menu as main CTA. Many users like to see the menu already on the page and not have to click a PDF link to load the menu on a separate page.

Persona

Based off my user interviews and research, I created a persona that represented the target audience of the Tamale Factory website: "The Foodie Mom." Many customers who frequent The Tamale Factory are families, so I wanted to include this in my persona. I could easily empathize with this persona since I also appreciate family-friendly restaurants, having a young child of my own.

Sitemap

This sitemap shows a blueprint of The Tamale Factory website's navigation.

TASK FLOW

Since the information architecture of the Tamale Factory website is fairly simple, I created a straightforward task flow to create wireframes, prototypes, and usability testing.

design

LOW-FIDELITY WIREFRAMES

I started the ideation phase by sketching out my low-fidelity wireframes. The screens I chose to draw out were the homepage, various menu pages, and the "Our Story" page.

MID-FIDELITY WIREFRAMES

I continued the wireframing process on Figma, designing the basic layouts of the screens with text and image placement for desktop and mobile.

BRANDING

The Tamale Factory owner wanted to keep the wordmark logo the same, but I created a new image logo to emphasize that the tamales are handmade. The brand colors were taken from the atmosphere of the restaurant – the maroon being the color of the restaurant windows and doors, the light grey from the cement walls, and the light beige from the color of the corn husks.

PROTOTYPE

HIGH-FIDELITY WIREFRAMES

I designed the following pages in high-fidelity after coming up with the brand colors and taking some updated photos at the restaurant. I worked with the owner to come up with a drink menu and kid's menu (to let viewers know that this is a family-friendly restaurant), with item descriptions and allergens.

I made a prototype out of these high-fidelity frames for usability testing.

Usability Testing & Iterations

TESTING PARAMETERS

I conducted the usability testing with 5 participants who are Tamale Factory customers and received feedback from an additional 5 people. The goals for my usability testing were to:

Evaluate the user's ability to navigate through the website

Is the website intuitive and simple to navigate? Does the navigational structure of the website align with customer/user expectations? Are the features easily findable?

Identify any confusion or problems users may encounter during usability testing

Is there any confusion or difficulty while completing the task flows?

Find out what users think of the website redesign and updated visual branding

What do users think of the visual design – the updated images, typography, and layout of the website?

Here's what my users thought of the newly designed website:

FINDING #1

Users found the information architecture of the website intuitive and easy to navigate

All participants were able to complete the task flow and navigate the website with ease. The participants confirmed that each step of the flow matched their expectations. 100% of the participants took the anticipated path and completed the tasks quickly and correctly.

FINDING #2

A majority of participants prefer to see a navigation bar on the desktop version instead of a hamburger menu

The users said that they would prefer to see a hamburger menu since that's what they are used to viewing on desktop. They also said it was nice to see the navigation on every page, resulting in less clicks to get to where they want to be.

FINDING #3

The restaurant website felt more intentional and modern after the redesign.

"The new website looks more modern, sleek, and efficient looking. The it definitely looks more heartfelt than the current website."

I took notes of my observations while testing users, and did an initial sort of my usability feedback with a feedback grid. Then I prioritized what changes to make with frequency to severity mapping.

After analyzing my results, I made priority revisions to the design

ITERATION #1

The first few changes I made were to the website header.

1. I swapped the hamburger menu for a navigation bar. I originally liked the hamburger menu for the clean look, but many users wanted to see a navigation bar since it was on desktop and it results in fewer clicks.
2. I changed the "Order Now" button to a link to the phone number, since the restaurant does not have the capacity to add an online ordering system yet.

ITERATION #2

I changed the heading above the Instagram gallery, because users mentioned that the original heading was slightly vague.

THE FINAL PRODUCT

HIGH-FIDELITY MOCKUPS

Bringing the design and findings from the usability testing together, here is the redesigned responsive website for the Tamale Factory restaurant.

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

TRY THE HI-FI PROTOTYPE ➞