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. Customers can view the menu in detail, learn more about the history/atmosphere of the restaurant, and make reservations according to their convenience.

Duration
5 weeks

Role
UX Designer

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

Preview of Features

Problem: Menus that lack 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 inJapan. 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

While referring to the site map, I sketched some responsive wireframes for the top page. I looked a lot of reference sites to follow the trends and patterns of Japanese websites, including sprinkling English in the headers, etc.

Sketching ideas on my iPad

Mid-fi Wireframes

Referencing the sketches I drew, I then began to design mid-fi wireframes in Figma. At this stage, I altered the order of sections, placing news first, then the menu. This would later change again when I designed the high fidelity prototypes.

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 rather than the color exterior.

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 conducted stakeholder interviews entirely in Japanese, as well as half of my user interviews in Japanese. Since Japanese is not my first language, there was a communication barrier. However, I found that going to the restaurant more frequently helped me build rapport with the owners. Meeting in person also strongly helped because I could use gestures or draw pictures to help communicate my thoughts.
Working with a small business that may not have funds or have lower computer literacy. Initially, I assumed that the restaurant would do delivery. However, I discovered that on the contrary, the restaurant was strongly opposed to it and had previously tried it before. Based on their own judgment and cost/risk, they did not want to pursue the delivery market and instead wish to focus on their in-store clientele, which was understandable.

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)