top of page

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.

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.

FINAL DESIGN

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

bottom of page