FULL CS LIST ↘goback

case STUDIES

Ultraviolet3

ROLE
  • INTERACTION DESIGNER
  • PM
KEY DESIGN RESPONSIBILITIES
  • IA
  • IxD
  • USABILITY

responsive website
Ultraviolet is Shanghai's 3 Michelin Stars and award-winning restaurant offering an immersive and multi-sensory dining experience. The goal of this project was to redesign the pre-opening, flash-based website, and make it more accessible but still visually rich.


challenges & solution
The process started with analyzing an old website: pros and cons, and which parts were working well, and which of them the client would like to keep. Analytics data convinced them that we should focus only on the English version of the website and skip support for additional languages originally requested. This decision influenced the subsequent design process since Chinese typography has its own limitations.

GA TO DECIDE ABOUT LANGUAGE SUPPORT

my-class

After the initial round of competitor analysis, I drafted a basic architecture and then extended it base on large content provided by the client.

ARCHITECTURE EVOLUTION

my-class

Ultraviolet is difficult to book destination and not many people had a chance to experience its immersive and theatrical style. Working together with Hgat design studio ( art directions ), we decided that the website should show as much as possible of its beautiful interior and dishes, and the extensive text content should be presented in the form of understatements and read more pages.


On the other hand, Ultraviolet is also a very technical and complicated restaurant and we wanted to reflect that spirit too. After analyzing online references and brainstorming sessions, we proposed a few nonstandard navigation patterns. In the end, the simplest pattern was selected but it got enhanced later through small micro-interactions and animations. That allowed us to keep the same pattern when designing a responsive mobile version of the website.

PROPOSAL + DIFFERENT NAVIGATION PATTERNS

my-class

Microanimations on desktop

Microanimations on mobile

heatmaps to check interaction functionality

my-class

The website is powered by WordPress with a custom template system developed from scratch and allowing the client to make any content changes easily. This is the 3rd project I have developed for Ultraviolet. The first one was the pre-opening website, and the second was an online reservation system.

PROCESS IN DETAILS

  • Business goals with client
  • Curent state evaluation analitycs / user feedback
  • Research, Competitive benchmark
  • Information Architecture with client
  • Ideation / Brainstorming with art director / ui designer
  • Prototyping / UI design with art director / ui designer
  • Interaction Design
  • Testing with client
  • Deployment
  • Improvements
-

MORE CASE STUDIES

  • real-time ordering app Chop Chop Club WEB APPLICATION
  • restaurant website Ultraviolet WEBSITE
  • blockchain startup GOJOY × JOYPLUS UX/UI
  • Online Counseling Pandora WEB APPLICATION
  • engineering website polytekgroup website
  • online auction app CBX × GOJOY UX/UI
  • airline website FlyUX / DESIGN PROCESS UX
© 2021 UNSTATIC INACTION · CONTACT