Masan

Background
ファミリー＆キッチン ma-san (Family and Chicken ma-san) is a family restaurant that has been serving locals for over a decade. The business was created to provide residents with home-cooked meals after the 2011 Tohoku earthquake occurred and many were unable to eat properly. The restaurant offers abundant quantities so that customers can leave with a full stomach.

Problem
The business lacks an online presence, such as a homepage and online reservation system. Instead, they have an outdated Facebook page, and customers have to call during business hours to make a reservation.

Solution
I designed a responsive website containing an online reservation system, the restaurant’s menu, and history of the business. Customers can browse the full menu, learn about the restaurant’s history and atmosphere, and make reservations at their convenience.

Duration
5 weeks

Role
UX Designer

Client
Family and Chicken ma-san
‍
Tools
Figma
Whimsical
Otter.AI
Notion

Preview of Features

Problem: The menu lacks information or pictures. Users desire a menu with pictures and prices.

Solution: A menu with pictures available online.

Problem: Many users don’t like using the phone, or want to make reservations outside of business hours according to their convenience.

Solution: Online reservation feature

Problem: Users want to visit restaurants to enjoy their atmosphere; which is an important deciding factor when deciding where to eat.

‍Solution: A section about the history of the restaurant, as well as pictures of the shop’s interior and exterior.

Research

To design effectively, I first had to understand the restaurant domain in Japan. Here are some of my key insights from my secondary research:

Digitization has merits of improving convenience on the customer side and reducing the burden on employees

The food delivery market continues to grow and is another separate sales channel.

the FBI (Food and Beverage Industry) has been declining since the fourth quarter of 2019 due to Covid.

I also looked at existing online reviews of the restaurant to learn the likes/dislikes of previous/current customers. Below are some of the (Google Translated) reviews.

Competitive Analysis

Next, I conducted a competitive and features analysis, comparing the strengths/weaknesses of Japanese restaurant websites. This helped me identify similarities/differences within their design patterns and evaluate the importance of certain features.

Stakeholder Chat

Before I interviewed users, I wanted to learn more about the restaurant’s background and future goals, so I sat down with the owner who kindly answered my questions. Click here to view the questions. Some key points that emerged from this chat were:

Target customer base is the eat in-market since they do not have the capacity for delivery. They have tried Uber Eats in the past and assessed that it was too much effort and risk. Uber charges business owners 3.5% of the menu item price. So as a result, the business has to increase 3.5% of the regular price.
Held live music events pre-corona and wants to resume them in the future.
Interior is a warm brown with old-fashioned western vibes, but the outside is bright and colorful. Prefers a more sleek, brown-colored vibe for the website
Has a wide variety of customers, including students from the university nearby
Is interested in appealing to the take-out crowd and wants to create a special take-out-limited menu.

User Interviews

Next, I interviewed five participants; four females and one male, between the age of 27 and 50. Their occupations were an English teacher, motorbike mechanic. PhD student, a government worker and an office worker. All interviewees were based in Japan, since the restaurant is a local Japan-based restaurant. I created an interview script as a reference, which can be viewed here.
‍

Findings

5 out of 5 are strongly influenced by reviews from friends/found online when deciding where to eat.
5 out of 5 mentioned the importance of the menu; they want lots of images and prices
4 out of 5 prefer making reservations online “because they are easy, convenient and you can book outside of hours
All five associated delivery with “feeling lazy” and not a necessity

"I don’t like it when the information is too scarce.. like no menu on their site.”
- A Japan, 49

"I think that take out is a necessity because of covid, whereas delivery is just nice to have."

- K, Japan, 27

"I usually make reservations online. I feel that it's very useful because I can book at any time, even at midnight."
- T, Japan, 40

"I don’t like making reservations via phone because I’m scared of being rejected, especially because of covid.
- M, 36, Japan

Define

Affinity Map, Persona and Storyboard

I then created an affinity map below to help me visualize and identify similarities across the participants. Using my findings, I built a persona: Yuka, and drew a storyboard with her as the main character to learn about what scenario she would find herself in and the problems that would occur in it.

Project Goals

After, I brainstormed the goals of the business, user, and technical side, as well as technical restraints. Doing so allowed me to picture the overall vision of the end product.

Site Map

I could now start thinking about what pages the website would contain. I mapped out the pages and listed the rough details of each page as well.

Ideate

User Flow

Next, I had to determine the flow that Yuka, my persona would take through the site map, and so created the following user flow below.

Low-fi Wireframes

"Using the site map as a guide, I sketched responsive wireframes for the homepage. I researched numerous reference sites to align with common trends and design patterns found in Japanese websites, such as incorporating English phrases in headers to enhance visual appeal.

Sketching ideas on my iPad

Mid-fi Wireframes

"Using my initial sketches as a reference, I began designing mid-fidelity wireframes in Figma. At this stage, I adjusted the order of the sections, placing the news section before the menu (based on common patterns observed in Japanese restaurant websites. In addition, important announcements such as restaurant hours/closures are high priority information.) This layout would later evolve again during the high-fidelity prototyping phase.

Moodboard and UI Kit

Next, I created a mood board for design inspiration and made a UI kit that would help me stay organized and consistent. I chose dark colors, remembering how the owner expressed wanting a website that reflected the interior and atmosphere of the shop inside the store instead of using the bright colors found on the exterior of the restaurant.

Prototype & Test

Responsive Prototype

Once I finished wireframing, I made a clickable prototype, recreating the flow that I had designed in my user flow. Please note that the images of the restaurant were taken on my phone, so they are not of the best quality. However, once developed, professional photos would be added.

Usability Test

Now it was time to test the prototype! I asked participants to conduct tasks based on scenarios in order to relate them to their daily lives. View the full test outline here

Findings

You can view my full report here. Once again, I also made an affinity map to help me visualize the data. I organized the suggestions in terms of instances and risk/cost. High priority items were ones that occurred in multiple instances across participants. See my priority iterations chart below:

”It’s very easy to navigate, everything you need is up on the top in English and Japanese. The English is a nice bonus”
- M Japan, 30s

“I kind of want to know how many people this item feeds.. but like only for the mains or sharable items”
- B Japan, 29

Revisions

After learning the pain points of users, four main problems became clear:

Users didn't like how the page would refresh/bounce back to the top after completing one step during the reservation process. (This was a technical, not visual adjustment)
Users want to know whether it is a non-smoking restaurant on the reservation page
Although the information was provided on the about page, the user may not always visit that page, or could forget that piece of information while on the reservation page.
They wanted to see the contents of the confirmation email displayed on the website.
This would reassure users that the reservation went through.
Although users were content with the access page, they said it would be better if there were a diagram of the parking lot, so they could park with confidence.

Here were some of the key changes that I made after revisions:

Edge Case

Reservations three months ahead

To account for potential errors, I thought about an edge case. On the reservations page, it states that customers may only make reservations two months in advance. What if a customer tries to book three months in advance? I created mockups for this scenario below.

As pictured, all of the dates are greyed out, and if the user tries to select a date on the calendar more than two months ahead, a warning will pop up that says "You can only make reservations two months in advance".

Reflections

What I learned

I learned more about restaurant industry and how much fees are involved for businesses when using a delivery service, as well as online reservation services. In addition, small businesses may not have the manpower or funds to offer such.

Challenges I faced

I learned that small business may have limited funds and lower computer literacy. I initially assumed the restaurant would offer delivery services. However, I learned that the restaurant was actually opposed to delivery, having tried it in the past. Based on their own assessment of the costs and risks involved, they chose to focus on serving their in-store clientele, which was a reasonable and understandable decision.

What I would have done differently

Since the restaurant is located near a university, I would have liked to interview more university students or actual customers in a guerrilla test. However, due to covid restrictions (During the State of Emergency, businesses had to close around 7 pm, and citizens were strongly advised against going out unnecessarily) and time constraints, I was unable to do so. In addition, the owners also said that the customer base has shifted and fewer students come to the restaurant due to covid.

Next Steps

Conduct another usability test to confirm whether users pain points users were effectively resolved.
Develop the website! (This is on my personal to-do list)