Komegashi Too

Responsive Website Design for a Local Japanese Restaurant

Project Overview

Challenge

Komegashi Too is a restaurant featuring authentic Japanese cuisine located in Jersey City, NJ. They currently have a website, but it is not responsive.

During the Pandemic period, they decided that the ordering will only be available online or by phone. Therefore, they are looking for creating a responsive website to provide customers with better experiences on different ends and stay competitive in the neighborhood.

Objectives

  • Redesign the responsive website of Komegashi Too
  • Develop or extend coherent branding that aligns with Komegashi Too's current and/or desired clientele and customer experiences

Project Scope

Responsive Website, Branding

Tools

Figma, Adobe Illustrator, InVision, Zeplin

Role

UX Designer (Research, Visual Design, Interaction Design, User Testing)

Team

Self Directed, with feedback from the mentor and peers

Duration

2 Weeks (80 Hours)

View Prototype

Design Process

01 Research

Research Plan

Research enables me to dig deep into my understanding of users - not only their immediate frustrations, but also their hopes, fears, abilities, limitations, reasoning, and goals. It lays essential foundations for creating solutions in later stages.

To ensure the research stays on track and better guide the responsive website design later, it is important to create a research plan before diving into the reseach phase. I listed research goals, research questions, assumptions, methodologies, participants, and timeline in my research plan.

Research Goals

Assumptions

Methodologies

Secondary Research

Market Research

It is important to get a big picture of the market by starting with market research - to get a sense of what we know and don't know yet, who the audience are, as well as what the recent trends or news are. The insights we gathered from market research will help me frame provisional personas and ask meaningful questions in primary research.

Japanese Restaurant Market Trend

Demographics

Restaurant Online Services: Trends and Considerations

Consumer's Behavior

Competitive Research

It is equally important to research other restaurants in the neighborhood, as their products will help me gather insights about their strengths and weaknesses. These insights also help me identify any gaps in features that Komegashi Too might address. I analyzed 3 direct competitors as shown below, who are providing Japanese cuisine as Komegashi Too does, and 2 indirect competitors, who provide alternatives for Japanese food. A complete competitive research can be viewed here.

Provisional Persona

With the data gathered from market research, I started to generate provisional personas using the statistical knowledge I gained to represent a certain type of user that are potential audience of Komegashi Too. These personas will help me screen appropriate people to interview.

Primary Research

User Interview

Building on a general understanding of the market and the audience, it is time to dive deeper and build real connection with our user and gain direct insights on them by primary research.

I created an Interview Guide to facilitate the user interview process, with 13 open-ended questions listed to invite the participants to share their experiences and stories.

In total, 5 participants (3 males and 2 females) were interviewed about their in-store and online experience (if there is any) with Komegashi Too.

Assumptions Validated

Research Synthesis

Empathy Map

To synthesize the qualitative data gathered from user interview, I created an empathy map to identify patterns across users, uncover insights, and generate needs.

Insights

  • Users rely on recommendations from their friends to make a decision.
  • Users want to know popular dishes.
  • Users look for food whose quality matches its price.
  • Users prefer a menu with photos.

Needs

  • Users need to know they can trust the sources of information.
  • Users need to reduce the time spent on finding tasty food.
  • Users need to make sure their order is worth every penny.
  • Users need to know each dish better.

User Persona

Since I have gathered a bunch of knowledge of the audience, as well as their goals and needs, I use the user persona to represent key audience segments. It helps me focus on tackling the most important problems – to address the major needs of the most important user groups. It is both fictional and realistic.

Here is Justin, a 33-year-old engineer in New Jersey. He is a healthy eater, who maintains a healthy lifestyle and is very strict with his nutrition intake. He especially loves sushi, because it is beneficial to his health.

02 Strategy

How Might We...

To define the problem I am going to solve, I create Point-of-View (POV) Statements that allow me to ideate in a goal-oriented manner, and How-Might-We (HMW) Questions to frame the ideation in the brainstorm session for solutions. The statements and questions are generated based on the insights and needs I gathered in my Empathy Map.
I then brainstormed solutions around these questions. I spent 3 minutes on each HMW question, and moved on to the next HMW question when the time is up. I then did a second round for each question, and finally arrived at my brainstorm results.

Product Goals

With HMW questions and brainstormed solutions, I decided to list project goals that will both serve as a guide for the future development of the product and a rubrics for determining what features to include in the website.

I summarized user goals from my user persona and empathy map, and established business goals based on published coverages of Komegashi Too.

Product Roadmap

I then started to put the solutions I brainstormed into a list of product features to create a comprehensive product roadmap. These features were sorted into four categories, including Must-have (P1), Nice-to-Have (P2), Surprising and Delightful (P3), and Can-come-later (P4) features. They were sorted based on how well they can help achieve business goals and user goals.

Product Roadmap not only infuses the project goals into our product, but also ensures we prioritize the most important features in the development cycle.

Sitemap

After setting up the product goals and deciding what features to include, I want to continue building up the structure of the mobile app using the sitemap. A sitemap helps me to visualize the relationship between the content and examine the hierarchy.

As Komegashi Too is a small local business, I tried to keep the sitemap simple and straightforward, which will make the future maintenence easier.

03 Design

Task Flow

To decide what I am designing, identifying the main flow of users when completing a task helps me to direct my focus on designing specific pages. By creating task flows that center on key functions of Komegashi Too's website, I was able to think through the necessary steps and examine the user experience in details. Below is the flow for 1 task, and a complete diagram of task flow can be viewed here.

User Flow

Building on the task flow, I mapped user flows whose scenarios correspond to the established tasks. The decision trees were added for me to think through what actions users would take based on their feelings with the website. Below is one example user flow, and a complete user flow could be viewed here.

Wireframe

Sketches

After creating an UI Requirement Document with a to-do list for designing the key screens identified in the task flow and user flow, I started sketching low-fidelity pages. I can capture my ideas by pen and paper quickly by sketching. It also enables me to examine my ideas before putting everything in the daunting process of digitizing.

Mid-Fidelity Wireframes and Prototype

Responsive Wireframe

Once I had a visual direction of the layout, I started to add more details and precisions to the sketches by turning them into mid-fidelity wireframes. Creating mid-fidelity wireframes helps me focus on the visual consistency and hierarchy before applying styles. In these wireframes, I tried to incorporate common design patterns that have been tested on our competitors' website, or included elements that directly address users' goals, needs, frustrations, and motivations.

Furthermore, to ensure users have a consistent experience across different devices, responsive wireframes are created for desktop, tablet, and mobile ends.

Mid-Fidelity Prototype

After I finished designing pages that are necessary for users to finish tasks, I linked those pages using InvisionApp and created a mid-fidelity prototype for usability testing. Conducting usability testing using a mid-fidelity prototype is useful for detecting issues in information architecture and flows before spending too much time designing details.

Tasks include:

04 Prototype & Test

Usability Testing

Prepare for the Usability Testing

Before usability testing, it is important to set up test objectives, subject, methodology, tasks, and rubrics for measuring the result of the testing before conducting a test. Therefore, I wrote a usability testing plan to define what and why I want to test and get prepared for the test.

For all the tests, I expect a 100% completion rate since all tasks are normal steps for a restaurant website. I also expect a 90% error-free rate because the prototype is not fully functioning, and users might take alternatives that have not been built up for completing the tasks.

Conduct Usability Testing

I then conducted both in-person and remote usability testing with 5 participants, and created transcripts for each participant based on my observation of their interaction with the prototype. I jot down their mistakes, slips, and confusions they expressed in the process. This transcript is a perfect raw material for summarizing the patterns of user’s interaction with the prototype.

Affinity Map

The results from the usability testing could be summarized by creating an affinity map. Like the empathy map, it is effective in helping us find patterns and frustrations when users are interacting with the prototype, and identify areas of improvements based on priority levels.

I represent each participant using a unique color, and categorize the observation by success, patterns, and frustrations. I only listed patterns that are shared by a majority of participants. For each pattern from frustrations, I uncovered one insight, and generate one recommendation. I then ranked the recommendation based on the priority level, where I will fix problems that affect key functions for our website and customers’ quick recognition of the brand.

Patterns

  • 5/5 Users found it confusing to differentiate between “Menu” and “Online Order”.
  • 3/5 Users thought the shopping cart CTA is unobvious.
  • 3/5 Users thought the Get Directions CTA was not intuitive.

Insights

  • Users tend to believe “Menu” and “Online Order” function similarly.
  • Users prefer the shopping cart to be visible when they are ordering.
  • The CTA alone is not enough for users to link it with map directions.

Recommendations

  • Change the wording from “Menu” to “View Menu PDF.” (High)
  • Make the section with the shopping cart as a sticky one at the top. (High)
  • Rephrase the wording as “Get Directions on Google Map.” (Moderate)

Updates to Wireframes

As the time and other resources we have are limited, I made revisions based on the priority level of the recommendations summarized in the affinity map.

Branding

I first created a mood board on Pinterest to gather multiple inspirations around the specific attributes that are summarized from thinking through the product goals and features as below. In this process, I tried to a minimum number of attributes, so that the brand of Komegashi Too stands out distinctively.

Logo

I decided to continue using the current logo of Komegashi Too based on two reasons. Considering the existing customers have already established their recognition of our brand, it is better to stick to the existing design. Meanwhile, after examining the alignment of this logo with the brand attributes established, I think it is creative and can reflect the brand value properly.

Style Tile

I further developed the visual style of Komegashi Too through the style tile. It serves as a synthesizing document of the brand ideas and inspirations gathered, incorporating logo design, color palette, typography, and imagery that guides UI design later.

Responsive UI Design

I created responsive UIs by applying established styles. It further lets me to examine the overall aesthetic feelings and visual balance of the website.

UI Kit

UI Kit is a compilation of existing UI elements on the website that provides references for future design and collaboration for the design team. It is also a living document and will be updated whenever there is an iteration of the design. Below is a part of the Komegashi Too UI Kit, and the full version can be accessed here.

Final Prototype

With all the high-fidelity pages designed, I built up the final prototype, a scaled-down version of the product using InvisionApp.
View Prototype

Final Thoughts + Next Steps

Final Thoughts

With the final prototype created, I believe I have met the goals that were outlined in the beginning of the design process. I designed a responsive website for Komegashi Too that provides the customers with a smooth online ordering experience. I also rebranded the business to better articulate its current service and values.

If I had more time, I would dive deeper in developing some of those nice-to-have features. These features would add more characteristics to the business and increase the competitiveness.

Next Steps

Design Implementation & Handoff

Since the design has been tested and revised, it is ready to enter the development phase. In order to effectively communicate the design to developers, I redlined and organized my design deliverables using Zeplin for handoff, and prepared to assist with any follow-up questions.

Maintenance

Updates and revisions will continue to exist in the future, and I will address them based on the priority levels.

View Other Projects