case STUDIES
Ultraviolet3
- INTERACTION DESIGNER
- PM
- 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.
After the initial round of competitor analysis, I drafted a basic architecture and then extended it base on large content provided by the client.
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.
Microanimations on desktop
Microanimations on mobile
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