Haru Sushi
Haru Sushi
Responsive web design for a restaurant complete with reservations and reviews.
Responsive web design for a restaurant complete with reservations and reviews.
Haru Sushi is a Japanese restaurant specializing in different types of sushi. This website highlights the most important functional aspects of the restaurant, including its menu, reservation system, customer reviews, contact information, and more.
Haru Sushi is a Japanese restaurant specializing in different types of sushi. This website highlights the most important functional aspects of the restaurant, including its menu, reservation system, customer reviews, contact information, and more.
Challenge
Haru Sushi users need a way to communicate effectively with the restaurant staff in terms of placing reservations, leaving reviews, or any other needs they might have.
Objective
To provide users with a simple and easy way to place a reservation ahead of time, leave a review for the restaurant, or contact them directly.
Research
A large focus for Haru Sushi was creating a unique and efficient review system. Before creating the website, several interviews were conducted asking participants’ opinions about leaving reviews online. Some of the pain points from these interviews included:
Users being forced to type summary-style reviews
Businesses requiring users to leave their name
A lack of organization for review systems
Another focus for Haru Sushi was creating a simple and user-friendly reservation system. Participants in the preliminary interviews identified their primary pain point as “reservation systems that were too complex” which aligned perfectly with Haru Sushi’s UX goals.
Competitive Audit
Three other review systems and one other restaurant were examined for potential strengths and gaps that Haru Sushi could learn and grow from.
Google Reviews
Facebook Reviews
OpenTable
Maru Sushi
Strengths: Widely used due to its integration into the Google search engine.
Weaknesses: No clear call-to-action on the desktop version.
Strengths: Very easily accessible, and allows for many forms of media (photos, videos, text) in the reviews.
Weaknesses: Reviews are hidden and difficult to access on the Facebook mobile app.
Strengths: Is well-established and hosts many different restaurants on the site.
Weaknesses: Website is a bit overstimulating, and is trying to do too many things at once.
Strengths: Very visually-appealing and offers a lot of information about the restaurant.
Weaknesses: Some of the navigation on the site feels a bit lengthy.
Persona Development
In preparation for the website, two personas were created that would capture potential pain points that real users might have while navigating and using the features on the site.
Site Map
The site map for Haru Sushi followed a hierarchy focused around the main features of the website: The menu, reservations, reviews, about page, and the contact page. Each of these features had smaller concepts within each of them, such as what food categories were on the menu and location/hours under the contact page.
You can see the full site map in the image below:
Wireframes
Following the hierarchy of the site map above, the wireframes for Haru Sushi were organized with a navigation bar at the top of the screen and a flyout menu for mobile versions of the website. Each of the headers in the navigation bar linked to one of the primary features in the site map, and that page would then contain the smaller details shown as the child components.
The home screen shows current specials/events happening at the restaurant, so that regulars can stay easily updated without having to navigate through the website. The hours/location are shown there as well for ease of use, since anyone using the website would likely want that information.
Home Screen
Menu
Reservations
Reviews
The menu was organized with food items categorized on the left, and images of popular items on the right for reference. Haru Sushi has a long list of menu items, so the decision to include only images of popular items was made so that the user would not be overwhelmed.
Reservations were made to be a simple, streamlined process with minimal room for navigation error. There are confirmation pop-ups for completing the reservation, and room for additional information such as user allergies.
The review page has a card system for users to easily leave reviews, as well as filter and view reviews left by others. Each card has a series of content left by the reviewer, such as the title of the review, how many stars the meal received, pre-written options (e.g. “Great service!” or “Lots of flavor”), and optional room for a summary and/or photos.
Home Screen
Home Screen
Menu
Menu
Reservations
Reservations
Reviews
Reviews
View Lo-fi Prototype
Testing and Iteration
Haru Sushi’s website went through two rounds of usability studies - once after the lo-fi prototype was created, and another round after the hi-fi prototype was finished. Five participants followed a series of prompts that led them through the app, and examined Key Performance Indicators such as:
User error rates - to track the frequency of mistakes made by users
Conversion rates - to find out if users can successfully complete a full user flow cycle
System usability scale - to see how users feel about the design and usability of the website
After the tests were completed, the following insights were drawn from the studies:
Round 1 Findings:
Users wanted to find information more easily on the reviews page, so filters were added.
Users didn’t want to have to include their emails under reviews, so that field was made optional.
Users wanted space to share additional needs for reservations, so a text field was added for this.
Round 2 Findings:
Users wanted to know what pictures represented what menu items, so labels were added under the photos.
Users wanted an email confirmation for their reservation, so this feature was added after users confirmed their reservation.
UI Design
Haru Sushi’s UI is a mix of modern typography and bold, angular shapes. The colors are a cultural connection to the Japanese roots of the restaurant, using bold reds like what is seen on the Japanese flag. The website uses a lot of photography to showcase the food available at the restaurant, and to let users know exactly what kind of experience they should be expecting.
View Full Testing Plan
Final Mockups
View Hi-fi Prototype
Accessibility Considerations
Accessibility is incredibly important to the mission of Haru Sushi. These were among the accessibility considerations kept in mind during the design process of this website:
In the Reviews form, there are only two required fields - the number of stars, and pre-written options. The pre-written options are accessible for users who might not use English as their first language, and it relieves them of the anxiety of having to write their own full summary.
The colors used in this website have a high contrast ratio, so there should not be issues for users who have color blindness.
There are no distracting or fast-paced animations included, so users will not be overwhelmed or distracted when using this website.
Challenge
Haru Sushi users need a way to communicate effectively with the restaurant staff in terms of placing reservations, leaving reviews, or any other needs they might have.
Objective
To provide users with a simple and easy way to place a reservation ahead of time, leave a review for the restaurant, or contact them directly.
Research
A large focus for Haru Sushi was creating a unique and efficient review system. Before creating the website, several interviews were conducted asking participants’ opinions about leaving reviews online. Some of the pain points from these interviews included:
Users being forced to type summary-style reviews
Businesses requiring users to leave their name
A lack of organization for review systems
Another focus for Haru Sushi was creating a simple and user-friendly reservation system. Participants in the preliminary interviews identified their primary pain point as “reservation systems that were too complex” which aligned perfectly with Haru Sushi’s UX goals.
Competitive Audit
Three other review systems and one other restaurant were examined for potential strengths and gaps that Haru Sushi could learn and grow from.
Persona Development
In preparation for the website, two personas were created that would capture potential pain points that real users might have while navigating and using the features on the site.
Site Map
The site map for Haru Sushi followed a hierarchy focused around the main features of the website: The menu, reservations, reviews, about page, and the contact page. Each of these features had smaller concepts within each of them, such as what food categories were on the menu and location/hours under the contact page.
You can see the full site map in the image below:
Wireframes
Following the hierarchy of the site map above, the wireframes for Haru Sushi were organized with a navigation bar at the top of the screen and a flyout menu for mobile versions of the website. Each of the headers in the navigation bar linked to one of the primary features in the site map, and that page would then contain the smaller details shown as the child components.
The home screen shows current specials/events happening at the restaurant, so that regulars can stay easily updated without having to navigate through the website. The hours/location are shown there as well for ease of use, since anyone using the website would likely want that information.
The menu was organized with food items categorized on the left, and images of popular items on the right for reference. Haru Sushi has a long list of menu items, so the decision to include only images of popular items was made so that the user would not be overwhelmed.
Home Screen
Menu
Reservations were made to be a simple, streamlined process with minimal room for navigation error. There are confirmation pop-ups for completing the reservation, and room for additional information such as user allergies.
Reservations
The review page has a card system for users to easily leave reviews, as well as filter and view reviews left by others. Each card has a series of content left by the reviewer, such as the title of the review, how many stars the meal received, pre-written options (e.g. “Great service!” or “Lots of flavor”), and optional room for a summary and/or photos.
Reviews
Testing and Iteration
Haru Sushi’s website went through two rounds of usability studies - once after the lo-fi prototype was created, and another round after the hi-fi prototype was finished. Five participants followed a series of prompts that led them through the app, and examined Key Performance Indicators such as:
User error rates - to track the frequency of mistakes made by users
Conversion rates - to find out if users can successfully complete a full user flow cycle
System usability scale - to see how users feel about the design and usability of the website
After the tests were completed, the following insights were drawn from the studies:
Round 1 Findings:
Users wanted to find information more easily on the reviews page, so filters were added.
Users didn’t want to have to include their emails under reviews, so that field was made optional.
Users wanted space to share additional needs for reservations, so a text field was added for this.
Round 2 Findings:
Users wanted to know what pictures represented what menu items, so labels were added under the photos.
Users wanted an email confirmation for their reservation, so this feature was added after users confirmed their reservation.
UI Design
Haru Sushi’s UI is a mix of modern typography and bold, angular shapes. The colors are a cultural connection to the Japanese roots of the restaurant, using bold reds like what is seen on the Japanese flag. The website uses a lot of photography to showcase the food available at the restaurant, and to let users know exactly what kind of experience they should be expecting.
Final Mockups
Accessibility Considerations
Accessibility is incredibly important to the mission of Haru Sushi. These were among the accessibility considerations kept in mind during the design process of this website:
In the Reviews form, there are only two required fields - the number of stars, and pre-written options. The pre-written options are accessible for users who might not use English as their first language, and it relieves them of the anxiety of having to write their own full summary.
The colors used in this website have a high contrast ratio, so there should not be issues for users who have color blindness.
There are no distracting or fast-paced animations included, so users will not be overwhelmed or distracted when using this website.
© Madison Stahl 2024
Want to see more?
Check out my other case studies below:
Want to see more?
Check out my other case studies below:
© Madison Stahl 2024
Want to see more?
Check out my other case studies below:
