Room 112 is a fast-paced sushi restaurant located in the heart of Uptown Charlotte, NC. Nested in the middle of Wells Fargo and Bank of America, this modern asian restaurant remains consistently busy. In operation since 2008, they serve hundreds of recurring and new customers daily making them a city staple.

Sarah
Jackson
Design

My Role

User Researcher, Prototyping, UI redesign &
Website Development & Implementation.

Results

Improved website responsiveness, refined website information & saw a 5% increase on delivery service apps.

Challenge

Although Room 112 had a website, it did not feature a responsive design or online ordering as an option. Due to Covid-19 restrictions, the restaurant, like many others, struggled in 2020. The Redesign was structured to target creating a responsive design that gives customers an improved experience. Additionally, online ordering needed to be implemented in order to stay competitive within the neighborhood.

Task

Redesign Room 112's website into a contemporary and responsive page that affords a user-friendly navigation. The main goal was to restructure content & site information and provide updated visuals in a way that stays true to the existing brand. 

The Design Process

1.)Research

2.)Strategy

3.)Design

4.)Prototype

Research

Research Plan

Research allows me to gain a better grasp of the users and what their goals, hopes, limitations, and frustrations may be. Using the gained knowledge I am able to create a structured product that carefully takes my findings into consideration. To better my understanding of what actions need to be taken, I list my research goals as well as my methodologies in order to stay on track.

Research Goals

Methodologies

Market Research

Demographics

Japanese restaurant market trends

Competitive Research

Doing competitive research helps me understand why customers are attracted to neighborhood competition as well as identify any gaps in the market. By drawing out their strengths and weaknesses, I am able to block any potential issues in Room 112's components. For this research, I chose three similar restaurants within a two mile radius to evaluate.

User Interviews

After obtaining my market research, I moved on to the user interview process. User interviews allows me to get a sense of what customers are looking for in the given product. In order to facilitate the interviews, I organized 10 open ended questions that encouraged contributors to share their experiences with me. Interview questions.

Insights

Needs

Strategy

Sitemap

I made a sitemap for Room 112 to better understand what the structure for the website should look like. Doing this gives me an early visual concept so that I am able to organize information and content efficiently. Since Room 112 is a small locally owned business, I believe that it was important to keep the website clean and modern making it easily adjustable for future maintenance. 

Design

Wireframes

Sketches

After constructing the site map for Room 112, I moved on to low-fidelity wire-framing which first consisted of some quick sketches. I believe that it is necessary to start with this approach in order to confirm that the architecture flows nicely before I progress to the next stages of wire-framing. Each sketch is a generalized representation of what should appear on the individual pages of Room 112.

Figure 1 shows the general layout of each page in a desktop format. Because I always start with desktop when developing, I decided to create my wire-frames to run parallel with that strategy in mind. For figures two and three I generated a mock-up for the pages in desktop as well as a mobile format. Within the wire-frames I added labels to keep track of each component present on the given page.

Low fidelity Wire-frames


Building low fidelity wire-frames allows me to understand what functionalities are necessary for the product. I created four separate low fidelity pages that would represent each core design needed. These prototypes are basic blue prints that lets me test the functionality of the design before I incorporate any of the design aspects requested by stakeholders.

Prototype

Usability Testing

To better understand user needs and to identify any issues with the design, I conducted two different methods of usability testing. Performance testing paired with user interviews were used in order to gather feedback on the mid-fidelity prototype seen below. I had four participants which resulted in an extensive amount of qualitative insight.

Additionally, I explored the A/B testing method by testing two different menu styles. One style featuring a light mode and one in dark mode. After testing, it was concluded that 75% of participants preferred the darker design claiming less eye strain.

View Final Product