top of page

UX CASE STUDY

Hanamaru Onigiri
Restaurant

Designing a responsive website for a local restaurant

Hanamaru Onigiri

Hanamaru is run by a Japanese family and sells mainly onigiri (rice balls) and soup. It caters mainly to a health-conscious clientele who idealize inexpensive, healthy eating habits. The most popular menu items are grilled salmon onigiri, tuna mayo onigiri, and fried chicken, in that order, and the combo includes soup and salad. I created a responsive website and branding to reach the customer and the goal of Hanamaru Onigiri restaurant.

Project Overview

Hanamaru Onigiri is a small family owned restaurant . They currently rely on social media platforms, such as Instagram, Facebook and Yelp. They want to grow their business with a new website.

PROBLEM

  • Design a responsive website that meets the goals of the business and user.

  • Creating a new Logo that Evokes Familiarity with Japan's onigiri and Hanamaru's Unique Personality.

  • New branding that effectively conveys Hanamaru's distinctive personality.

SOLUTION

  • Accessibility of essential information without a website.

  • Low awareness of onigiri in North America.

  • Ineffective communication of brand identity.

PROJECT DURATION

4 Weeks

Figma

Adobe XD

Miro

Illustrator

Photoshop

ChatGPT

TOOLS

Design Process

EMPATHISE
DEFINE
IDEATE
DESIGN
TEST

Research

Through market research, competitive analysis, and user surveys, I planned to get deeper understanding of the market and Hanamaru’s customers.

Research Goals

  • Understand the market trends of the onigiri/ restaurant industry

  • Identify Hanamaru’s target market

  • Identify Hanamaru’s competitors and evaluate strength and weaknesses

  • Understand how people discover new , local businesses

  • Understand the feelings/experiences people try new food.

  • Discover pain points that people encounter online.

Market Trends

Canada continues to be a top five export market, bringing in nearly $200 million of U.S. rice each year.

The majority of rice that is consumed in Canada is grown in the U.S.

Onigiri are not only one of the best-selling items in convenience stores, but they also have one of the highest profit margins on the order of 35 to 40 percent in Japan.

The average Canadian eats about 13 kilograms of rice annually.

Onigiri takeaways are very profitable because of their high turnover and low preparation costs. The food is prepared in advance as it is served cold, and you can sell a lot to customers at lunch time, followed by people looking for a healthy snack during the day.

Consumer Trends

Onigiri has been influenced by several key factors:

  1. Health and Convenience: Onigiri meets the demand for healthier and convenient food options, appealing to busy lifestyles with its portable nature and perception as a nutritious snack.

  2. Cultural Diversity and Interest: Canada's diverse population and interest in global cuisines have boosted the popularity of Japanese food, including onigiri.

  3. Customization and Flavor Innovation: Onigiri's versatility allows for a variety of fillings and flavors, catering to diverse tastes and preferences.

  4. Sustainability and Ingredients: There's a growing emphasis on sustainable ingredients, making onigiri made with ethically sourced ingredients or eco-friendly packaging attractive to consumers.

  5. Availability: Onigiri's availability both offline and online has increased its accessibility, with online delivery platforms broadening consumer access.

  6. Changing Consumer Preferences: Consumer preferences can shift rapidly, influenced by cultural shifts, health trends, and market innovations. Staying updated through market research provides insights into evolving trends.

  7. Pleasure in Food Exploration: Surveys show that a significant portion of individuals express positive emotions when trying new foods, contributing to feelings of happiness and excitement.

Local Business Discovery

Based on recent studies and surveys:

  1. Approximately 80% to 90% of consumers conduct online research before purchasing or visiting a local business.

  2. Consistently, around 90% or more of consumers use the internet to search for local businesses or services.

  3. Nearly 90% of consumers read online reviews, with many trusting these reviews as much as personal recommendations.

  4. Roughly 60% to 70% of consumers tend to contact a local business after discovering them through online searches, directories, or reviews. This contact can be made via phone call, email inquiry, or messaging platforms on the business's website or social media.

  5. Typically, 75% to 85% of consumers admit to judging a company's credibility based on its website design.

Competitive Analysis

After conducting market research, I began examining the competitors of Hanamaru Onigiri to assess their strengths and weaknesses. The obtained insights have been instrumental in identifying strengths to enhance and weaknesses to steer clear of, all while aligning with the specific goals set for Hanamaru Onigiri

User Interviews

I conducted user interview with 6 people, about 15 mins each. During the interview, I asked open-ended questions to learn as much as I could about their experiences and needs.

​

Some questions asked during the interview

  • How often do you visit restaurant?

  • What motivates you to try a new local food business?

  • Tell me about how you typically discover new local food businesses.

  • Why do you visit restaurant?

  • Tell me about your most recent experience at a restaurant.

  • What factors influence your decision on which restaurant to visit?

Insights

After conducting market research, I began examining the competitors of Hanamaru Onigiri to assess their strengths and weaknesses. The obtained insights have been instrumental in identifying strengths to enhance and weaknesses to steer clear of, all while aligning with the specific goals set for Hanamaru Onigiri

Taste & Preferences

Many people discussed being influenced by being able to find taste/ preferences they like

Word of mouth

Many spoke of trying new things based on the words of others.

Nearness

People often choose cafes that were close to their current location

Pictures

Photos are a major factor in making a decision to try something new.

NEEDS

INSIGHTS

  • To know what kind of food the cafe offers

  • To know what other people think about the food

  • To know where the cafe is located

  • To see the pictures of the cafe’s food

  • People choose to go to the cafes that fit their tastes/preferences the best

  • People trust the word of others

  • People frequent conveniently located cafes

  • Not only do they care about the taste of the food, they also care about the appearance of the food.

User Persona

Based on the insights, I've developed a user persona who represents a potential target user for Hanamaru. Moving forward, I kept Jenna's persona in mind to ensure that my design remains focused on meeting her needs and preferences.

GOALS

  • Find restaurant with good food

  • Find best restaurant nearby

  • Look at photos of food to find what she want to try

  • Find restaurant that offers delightful service and food

MOTIVATIONS

  • Delicious food

  • Good customer service

  • Good atmosphere

  • Instagenic

NEEDS

  • To know what kind of food the restaurant offers

  • To know where a restaurant is

  • to see the menu with pictures

FRUSTRATIONS

  • To not be able to see the pictures of food

  • Overwhelming menu

  • incorrect information online

Jenna

Female (In relationship)
22 years old
International student
Live with a roommate in a condo

Empathy Map

Using the persona I developed, I made an empathy map for Jenna to gain a deeper understanding of her actions, thoughts, interactions, and feelings. I made sure to clarify what she achieves and struggles with.

Thinking/ Feeling

​

  • Not comfortable going to restaurant by myself

  • Stressed about cooking for lunch

  • Concerned about health and well-being.

  • Why is everything expensive nowadays!

  • I don’t like seeing menu that do not have pictures

  • I didn’t have time to eat breakfast. I’m hungry now. I’ll just have Tim Hortons sandwich again!

  • I want to try to go to the restaurant nearby that has lots of good reviews

Hearing

​

  • I heard there are restaurants around me that gives 10 percent off for students

  • There is a new Japanese restaurant opening at the end of my street.

  • According to the news the food prices are the highest in recent years,

  • Saw on social media that there a new spots to hang out in Toronto.

​PAINS

  • Don't go to restaurants by myself but want to eat well- balanced meal

  • No pictures

  • Don’t have time to eat often

  • Food cost

GAINS

  • Variety of delicious food

  • Well- balanced meals

  • Comfortable

  • Ordering online for pickup and delivery

  • Inexpensive

  • Pleasure

Doing

​

  • Look at Instagram before go to bed

  • Post food photos on Instagram

  • Sometimes eat alone in cafes

  • Skip breakfast often

  • I often browse instagram photos to decide what to order.

  • Plan where to go on weekends with boyfriend

  • Look for quiet place to do assignments after school

Saying

​

  •  don’t have time to cook this week. I have too many exams and papers due

  • I’ve been eating at the bakery for lunch recentry. I want to try somthing new

  • I went to the restaurant that service and food were amazing! I will def come back again!

  • I’m going on a picnic with my bf after exams, I want to bring delicious and pretty food.

Doing​

​

  • Look at Instagram before go to bed

  • Post food photos on Instagram

  • Sometimes eat alone in cafes

  • Skip breakfast often

  • I often browse instagram photos to decide what to order.

  • Plan where to go on weekends with boyfriend

  • Look for quiet place to do assignments after school

Saying

​

  • I don’t have time to cook this week. I have too many exams and papers due

  • I’ve been eating at the bakery for lunch recentry. I want to try somthing new

  • I went to the restaurant that service and food were amazing! I will def come back again!

  • I’m going on a picnic with my bf after exams, I want to bring delicious and pretty food.

Defining the Problems

Having identified Jenna as the target user, I needed to identify what problems we were actually trying to solve based on what I had learned about the user.

To define these problems, I used the insights from my research and my understanding of Jenna’s needs to create POV statements that structured the problem from the user's perspective. I used these POV statements to identify How Might We questions that would facilitate the process of brainstorming solutions.

INSIGHTS

  1. People choose to go to the restaurant that fit their tastes/preferences the best

  2. People trust the word of others

  3. People frequent conveniently located restaurants

  4. Not only do they care about the taste of the food, they also care about the appearance of the food.

​POV

  1. Jenna needs to know what kind of food the restaurant offers because she chooses to go to restaurant that fit her taste/preferences the best.

  2. Jenna needs to know what other people think about the food because she trust the word of others,

  3. Jenna needs to know where the restaurant is because she frequents restaurant that are conveniently located to her.

  4. Jenna needs to be able to find the pictures of the food because she wants her food to not only taste good, but also to look good

NEEDS

  1. To know what kind of food the restaurant offers

  2. To know what other people think about the food

  3. To know where the restaurant is located

  4. To see the pictures of the restaurant’s food

HMW

  1. How might we help her looking for something that fits her tastes/preferences ?

  2. How might we help expand the reach of customers’ recommendations to help reach Jenna?

  3. How might we help Jenna decide that Hanamaru is the best option even though it may not be the closest option?

  4. How might we make it easier for Jenna to find photos of the food online?

Brainstorming

Now that we knew the problem we needed to solve for Jenna, we began brainstorming to come up with a solution: using the HMW questions, we created a mind map and brainstormed different ideas.

Strategizing

From brainstorming , I got a lot of ideas. Now I wanted to strategize and determine which solutions we should prioritize to most effectively help Jenna meet her goals.

Project Goals

Before determining the solutions to implement, it was crucial to fully comprehend the objectives we aimed to achieve. These goals would serve as a compass, guiding our decisions and ensuring we moved in the correct direction.

Product Road Map

Using the objectives I outlined, I began determining which solutions to prioritize and implement to achieve our goals successfully and efficiently.

Site Map

I created a site map concentrating on the main solutions to outline how Hanamaru’s website content should be structured, ensuring it's logical and user-friendly for navigation.

Task Flow

I began by understanding how users like Jenna would engage with the Hanamaru website. I identified Ashley's primary tasks on the site aligned with her goals, outlining the necessary pages and specific requirements in a UI Requirements document to assist her in accomplishing these tasks. Using these defined tasks related to Ashley's goals, I delved into understanding Ashley's interaction with the website through task flows.

Jenna wants to see all options for onigiris at Hanamaru.

User Flow

Based on the persona Jenna, I visualized how she could browse the Hanamaru website and achieve her goals through user flows, building upon the task flow I had created. This process further deepened my empathy and understanding of Jenna and significantly contributed to the next step: the creation of wireframes.

LoFi Wireframes Sketch

Applying the knowledge I've gained so far in my process, I began to make choices regarding the arrangement of content on Hanamaru's website, aligning with the project goals we aim to achieve.

Mi Fidelity Wireframes

Applying the knowledge I've gained so far in my process, I began to make choices regarding the arrangement of content on Hanamaru's website, aligning with the project goals we aim to achieve.

I transformed the basic sketches of the low-fidelity wireframes into a digital format. I included sufficient details to enable users to navigate through pages and fulfill tasks that I planned to present during usability testing. The mid-fidelity wireframes assisted me in pinpointing areas that required enhancement in the functionality of my design.

Usability Testing

Having finished the prototype, I initiated the development of a testing plan to oversee the upcoming testing phase. Subsequently, I enlisted participants and carried out usability testing to observe user interactions with my design and pinpoint areas for potential design enhancements.

TEST OBJECTIVES​

  1. To test if users can easily complete the tasks

  2. To observe the different paths users take to complete the tasks

  3. To identify areas for improvement to enhance the usability of the design

TASKS

  1. Learn about Hanamaru Onigiri Cafe’s background.

  2. Find where Hanamaru onigiri Cafe is located.

  3. view what kind of onigiri Hanamaru offers.

Feedbacks

Having finished the prototype, I initiated the development of a testing plan to oversee the upcoming testing phase. Subsequently, I enlisted participants and carried out usability testing to observe user interactions with my design and pinpoint areas for potential design enhancements.

SUMMARY

​

Participants: 3

Age: 23-30

Method: Remote/ In-person

Average: 5 min

Task Completion: 100%

User-Satisfaction: 80%

LIKES

​

  • The amount of pictures on product details page.

  • Pictures on the about page can show information that cannot be explained in words.

  • Current page indicator

  • Showing popular products

  • Showing google reviews

  • Simple and intuitive navigation

  • It is easy to find products because they are categorized.

DISLIKES

​

  • Disorganized location and hours

  • Subscription is not attractive

  • The size and quantity of onigiri to be clearly specified.

  • “Our customers also bought...”could be better for the suggestion items

  • What links you should click on or hover over

  • Words on Menu bar is too big.

  • It doesn’t need to have address, phone number and email address on footer since it has contact page

ITERATIONS

​

  • Organize contact information

  • Make subscription attractive making coupon or display to get more attention to users

  • be specific with onigiri size and quantity with words and photos

  • Change the suggestion item title

  • Make sure all links are clickable and add an arrow icon next to nav links that have a dropdown

  • Delete address, phone number and email address on footer

Responsive Design

I developed versions optimized for tablets and mobile devices to ensure the design's responsiveness and effectiveness across various screens users might use to access the website.

Mood board

To start the branding process, I made Hanamaru’s mood board to get inspiration and determine the direction. The focus was on gathering images, colors, typography and logo elements that align with Hanamaru's brand attributes (Peace, Humble, Japanese, Cute).

Logo Design

With the direction of Hanamaru's branding clear, we came up with a variety of ideas related to the keywords and sketched out several logos that would fit those attributes.

We then selected the logo that we thought best represented Hanamaru and revised it from sketch to digital in order to visualize it.

Visual Elements

Hi- Fidelity Wireframes

Aligning with Hanamaru's branding, I integrated visual elements while focusing on the UI design of the website and developed high-fidelity wireframes.

Final Prototype

I worked on prototype based on the Hi-Fi wireframes.

Reflection & Next steps

Since onigiri is a part of Japanese culture and a food I have been familiar with since childhood, primary and secondary research played a significant role in overcoming biases. Additionally, the mid-fidelity user testing we conducted before finalizing the design proved highly effective: it allowed us to explore a more user-friendly design.If I were to take this project to the next level, I would:

1. RE-TEST
Now that I've updated the design and included visual elements, I want to test it out to see if the changes work well. This will help me figure out if there's anything else I need to focus on improving.

2. HAND-OFF

After completing the design, I would present the final version to stakeholders and then pass it to developers for website construction

3. PRODUCT LAUNCH

With the completed product, we would be able to introduce their new branding and launch the website.

4. FUTURE IMPLEMENTATION
Given the project timeline, I concentrated solely on the highest-priority features to achieve our objectives. However, I believe there's potential to enhance the experience further by incorporating additional features outlined in the product roadmap.

More Projects

bottom of page