Fusion
Sushi House
Case study
TIMELINE
Apr - May 2021
ROLE
UX/UI Designer
HTML, CSS Developer
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. The owner reached out to me, said he needs a 5 page website that can translate the soul of the restaurant.
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.
Creative display
The client requests a new direction of imagery displays that stand out from other competitor websites.
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.
Imagery composition
Present gorgeous food images with interesting layouts & composition. That will be highlighted by animation on scroll.
CREATIVE PROCESS
Keys observations
Strengths
-
Most websites display advertise and promotions on hero section.
-
The navigations are straight forward on some websites.
-
Almost every websites have direct contact button in bottom left corner.
-
All websites have navigable menu pages.
-
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.
-
Contents is their priority means lack of visual hierarchy.
-
Websites don't have a branding guidelines since there is no consistency in terms of typography and color uses.
RESEARCH
Competitor analysis
Before conducting any user research. Study 12 websites then analyzing 6 best sites 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.
%20Mockup.png)
Mobile
Mobile
TYPOGRAPHY
COLORS
LO-FI WIREFRAMES
I sketched out different ideas for website and mobile sections in order to validate the best composition for each pages.
This is how the early stage of wire framing was done. Information architecture and layouts are my priorities.
First section of homepage is a slider that function as notifications/ updates from the restaurant such as: Temporarily closed, change of hours, etc.
Scrolling down is the introduction the restaurant. After that is a peek of the menu/ best sellers.
Every sections must include a call to action that eventually lead costumer to a hotline order online link.
DESIGN PRINCIPLES
SITEMAP
MI-FI WIRE FRAMES
Desktop
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.
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.
HI-FI WIRE FRAMES
Desktop
