top of page
INTRODUCTION
In the summer of 2021, Fusion Sushi House restaurant first opened in the center of Hanoi. Vietnam was at the peak of covid season. Restaurants can only sell take-out.
MY ROLE
I led the design, user testing and development of this project from front to end. I also collaborated with a food photographer and a copy writer throughout the process.
TOOLS USED
PROBLEM
No digital identity
This project is Fusion Sushi House’s first digital identity. There was no branding guide such as typography, color palate and UI style guide.
Sale & revenue
Since this restaurant is opened during the height of the epidemic. Sale and revenue is a significant problem.
GOAL
Create a brand guideline
Design style guides that translates the restaurant’s identity - a blend between modern and tradition, east and west, yet still elegant and modern.
Easy ordering process
The site's objective is to assist in taking online orders. Booking and placing orders must be prioritized in the design.
CREATIVE PROCESS
Keys observations
Strengths
-
Most websites display advertisements and promotions in the hero area.
-
The navigations are straight forward on some websites.
-
Almost every websites have direct contact button in bottom left corner.
-
Some websites have multi-lingual option.
-
All sites use high fidelity images and videos.
-
A lot of contents are presented
Weaknesses
-
Most sites have one choice of typography: sans-serif typeface.
-
Lack of art direction. Seems like they are all templated sites.
-
Almost every websites have no good use of negative spaces.
-
Too many contents which causes lack of visual hierarchy.
RESEARCH
Before conducting any user research. Learning and analyzing 6 of local competitor’s works help me to form a standard idea of what has already been done and what can be improved.
Finding strengths and weaknesses of each website allows me to validate interview questions and design decisions for the latter step.
Stakeholder interview
-
Gather project-related information.
-
Understand the project from stakeholder’s perspective.
-
Identify how they define success.
-
Understand who are the audiences.
-
Collect stakeholder comments and ideas.
Main questions
-
Why do you need a website?
-
Who are the targeted customer?
-
How will success be defined?
-
Are there any competitors we should look at?
-
What features do you want the site to acquire?
INSIGHTS & PAINPOINTS
DESIGN APPROACH
%20Mockup.png)
IDEATION
Based on insights & paint points.
I created several designs for website and mobile components to determine the ideal composition for each page.
My top priorities are information architecture
and layout.
The introduction to the restaurant may be found by scrolling down. Following that is a sneak peak of the menu/best sellers.
Every section must feature a call to action that finally leads the customer to a hotline order online link.
SITEMAP
TYPOGRAPHY
COLORS
MID-FI WIRE FRAMES
USER TESTING
Although the website was launched in May 2021. My design process has not stopped since design is an iterative process.
I collected a lot of useful data thanks to third party tools such as Hotjar and Google analytics which were implemented on the website.
I studied the recordings, heat maps, behaviors flows, site analytics and other useful metrics to improve the user experience.
ITERATION
After analyzed user behavior on Hotjar.
I learned that navigation to the menu was not efficient.
On the menu page. To access the menu, users must click on the square photo.
A PDF file will display on a new tab of the browser.
This required an additional click for users.
Why not include the menu pdf right on this page?
ITERATED MENU PAGE
Not only does the iteration directly takes users to the menu file, it also allows them to place an order or make a phone call immediately, which increases sales and revenue for the restaurant.
Thank you for your time :)
RESULTS & IMPACT
The website helped the business to engage more customers as well as promote its delicious fusion cuisine.
Here are the data of the first 3 months that was properly analyzed.
SOLUTION
Home page
UX & information architecture
HEADER
Nav bar & multi-lingual button.
Slider for announcements/ advertisement.
BODY
On click, the arrow button moves to the area of popular dishes.
Abstract animation
Order now CTA
(Generate leads that enhance sales and revenues for the restaurant)
Popular dishes
(Story telling using photoshop and animation.)
Go to menu CTA
Promotions slider
Reservation CTA
FOOTER
Contact form/ contact information
(Get greater insight into users/allow people to contact directly)
Back to top button
HI-FI WIRE FRAMES
bottom of page