Designing a responsive website for
Urban Butcher Steakhouse

UI/UX Design · RESPONSIVE WEB
Timeline
August 2022
MY ROLE
Concept, research, usability testing,
visuals, interaction
Project
Responsive web
Personal

Overview

In these day and age, people prefer to cut down lines and waiting time. A digital menu is an important sales tool for a restaurant. With a digital signage software it is easy to navigate people to easy checkout and additional sales due to shorter wait times. Urban Butcher Steakshop and Bar is an eclectic steakhouse in New York and is looking to increase their sales by including a digital menu on their website.

THE PROCESS

Empathize

Define

Ideate

Prototype

Test

Problem statement

Common menu that we see on restaurants' websites are usually static and text-heavy. Consumers are left to use their imagination and there is no way to make food reservation online to ensure that they would get the food that they want on their reservation date.

Problem decomposition

🍽️ No accessible digital menu for users

Digital menu is usually best optimized for desktop users, whereas the majority of users would also like to access the menu from other devices.

🥩Food reservation is excluded from menu

Without food reservation functionality, there is no guarantee that users would get their selected food on their scheduled date.

🖼️Lack of visualization on menu

Digital menu is not accompanied by visualization, leaving users to their imagination. Therefore, it is harder for users to make decisions.

✔️ Reservation confirmation & reminder

Users would like to be notified before their scheduled date. It is also beneficial for the restaurant's behalf when users confirm their arrival.

PAIN POINTS

Identifying pain-points in mainstream restaurant reservation process.

The first stage of the project was to understand the pain-points that exist throughout the conservative table-reservation process at a restaurant. This process was done by reserving a table online from a restaurant's website and taking notes of the highs and lows of the experience, and conducting user interview.

How might we give better steak dining experience for meat lovers?

How might we increase user satisfaction when reserving a table?

interview questions

How often do you eat steak? Can you elaborate on your decision-making when choosing which steakhouse to go to?
How does digital menu impact your decision making in choosing a steakhouse?
Do you face any challenges in reserving or booking a table?

INSIGHTS

100% of users feel happy and encouraged when a steakhouse has an online digital menu

80% of users want to see the complete selection on meat and alcohol online that the steakhouse has

50% feel frustrated when the item they picked from the menu is not available anymore when they get to the restaurant

Goals

The ideation process was started off by defining the focus areas of the design, which stemmed from the insights derived from user interviews.

Increase user satisfaction when browsing the menu

To help users make better decisions on the food and drinks that they want to have.

Give a seamless reservation experience

Breaking apart the form into smaller section gives users an improved and less overwhelming experience.

Ensure that users would get their reserved food

With the ability to reserve food, users are guaranteed to have the food that they want.

THE USERS OF URBAN BUTCHER

Urban Butcher's website will be mainly used by meat-eaters, business people, casual diners, and families.

The meat-eaters

A ranch owner and a father who eats steak regularly and hosts events, wants to reserve tables and food online so that their family and guests can enjoy the food that they actually want.

I call this surf 'n turf. It's a 16oz. T-bone and a 24oz. porterhouse. Also, whiskey and a cigar. I'm going to consume all of this at the same time because I'm a free American.

The party planners

A busy soccer mum with 3 kids and 2 dogs who celebrates events regularly, wants to be able to make sure that they get the right spot at the steakhouse and get reminded of their scheduled date so that they don't have to memorize things.

My kids are my priorities, and we have a lot of celebrations in my family. It would be so helpful if I can be reminded of these events cause I'm just really busy.

USER JOURNEY

"Reserve a table for 6 and select food that they want to eat when they get to the steakhouse."

In order to comprehend the feel and touchpoints throughout the experience from the user's perspective to ensure success rate, I mapped out the journey of one of the personas when making an online reservation.

USER FLOW

User flow helps visualize the path taken by a user to make an online reservation.

In this project, the main user flow highlighted is the table and food reservation flow, where users can browse digital menu, select a reservation date, and finally reserve their table and food.

SITEMAP

Scoping down to
a primary area of focus.

Area of focus in this project is the seamless
online table and food reservation experience.

Building a sitemap

To cater to the users' needs, I built a sitemap that lists out all the pages that is going to be indexed. Laying out all of these pages helped better organized the website's structure and provide more concise Information Architecture (IA).

WIREFRAMES

DESIGN SYSTEM

FINAL DESIGN & PROTOTYPE

THE TAKEAWAYS

Designing not only for the sake of the business, but focusing on what the meat eaters and restaurant go-er's would want to experience.

As a meat eater and restaurant go-er myself, Urban Butcher Steakhouse is an idea that is near and dear to my heart. I wanted to communicate the satisfaction when you actually eat the kind of food that you've been craving. The idea of honing in on the persona hypothesis creation to help further the goals of not only the user, but the business is a step that I certainly see as important. I also learned that if you design for exclusively the business' goals, it will most likely fail.

Tools used

Adobe XD
Photoshop
Illustrator