Sushi Restaurant Website

See Final Result
(Button might not work first time. Scroll up and
try again or refresh page.)

I was working at my local sushi restaurant during the summer of 2022, where I was tasked with updating their websites. Given what I have learnt and experienced working at there, this case study is what I would have done had I had more resources/experience.

Collaboration

Myself

Role

Product design

Timeline

Nov 2022 - Feb 2023

Context

I Noticed a Problem...

Over the summer of 2022, I worked as a waiter/cashier at a local sushi restaurant in a little strip mall on the corner of the street. During the months I spent working there, I noticed a few significant things:

  1. We were heavily understaffed. I was the only one at the cashier and waiting tables. A lot of time is wasted on phone calls and orders.
  2. We were running on an outdated business model. Customers were poorly updated on crucial information like hours, menu changes, and price changes.
  3. The customers of the restaurant tended to be the same. The people who came were often either people who worked in the office complexes next door or older individuals who had been regulars for years.

Many of the restaurant’s problems stemmed from miscommunication with customers and a lack of discoverability.

Context

What I hoped to Accomplish

This project aims to construct a website that best fits the goals and purpose of small, local restaurants. How can we make a website for local restaurants that covers customer concerns, is simple to use, and increases employee convenience and productivity?

Research

Understanding Customers

I conducted a survey about general eating habits, which garnered 23 responses.

I then conduce a usability test on the restaurant's old website to help identify user pain points. After going through the website, I asked participants to answer a few questions:

  • What were your general impressions of the Home Screen? (What did you like/dislike)
  • What were your general impression of the menu section? (Likes/dislikes)
  • How did you feel about navigating through the menu section?
  • If your experience using the website was low, what did you have the most problems with (or see yourself having the most problems with)
  • Any additional issues or thoughts concerning the website?

After compiling all the responses, I analyzed them using affinity mapping to find common themes and map out user pain points.

First Affinity Map - Finding Common Themes

2nd Affinity Map - Mapping out and Prioritizing Pain points

The results from the research indicate that the top three most prominent issues with the website were outdated aesthetic/appearance, navigation difficulties, and inconsistent image/text sizing. Keeping general customer eating habits and my experience as a cashier/waiter in mind, finding information and implementing a simple online ordering system will also be deemed equally important during the design process.

Comparative Analysis

Looking for Inspiration

After research, I picked out three other websites for inspiration: other sushi and local restaurant websites. I then conducted a comparative analysis of strengths, weaknesses, and features.

I brainstormed potential ways and functions to remedy the most common user pain points:

  1. Visual - Minimalistic design with more more space to address clutter. Consistent fonts and images and widgets.
  2. Navigation - Making use of a consistent navigation bar and side bar when picking out items. Must keep in mind of affordances, signifiers, and feedback.
  3. Information - Keep customers more informed through FAQ pages, announcement tabs.
  4. Features - Basic online ordering and cart features. Have a login so people can save items. Also, add gallery.

User Flow

Mapping out/Brainstorming

Finally, I mapped out a potential user flow using FigJam and drew out low-fidelity sketches.

Wireframing

Low Fidelity

Mid Fidelity


Outcome

Final Mockup

Putting everything together

Throughout the wireframing and prototyping process, I made various changes to the design.

Try it out for yourself!

Reflections:

This was my first solo design case study!  This experience, while daunting alone, has also been enriching. I had a greater opportunity to explore different things and grow as a designer. However, I also feel that I still have much to learn.

Improvements/ Growth:

  1. Figma- Taking advantage of frames and templates, getting familiar with shortcuts, and making my first interactive prototype.
  2. Research - Use a bigger pool of participants for survey. Made more use of affinity mapping and competitive analysis.
  3. Different Platform - First time working on a website redesign.
  4. Design Think - Kept design thinking more mind, especially regarding navigation and discoverability. Put more emphasis on affordances, signifiers, contrast, and positioning.

Things to work on...

  1. More Qualitative Research - Make more use of interviews, user personas, etc.
  2. Outside Factors - Take into account outside factors like business restraints and stakeholders.
  3. Improve design skills - Work on UI skills like typography, color theory, spacing, etc.

Other work