Transform the Michelin Guide experience from a physical book to digital.
With the constraints of time due to a hard deadline for the launch, our approach was to focus on design research & exploration activities based on best practices to expedite the design process.
Mood boards and sketches were created as a basis for brainstorming with the product owners and content writers during the co-creation workshops.
An agreement on business objectives that meet the business goals and technical viability was established. Product owners, content writers and designers were involved in the discussion for content & engagement strategies.
The team came to a consensus and nailed down the base of the design direction to kickstart the design sprints.
The design sprint process was the adopted approach. There were 8 separate sprints – the main key pages were prioritised as they were the foundation of the whole site structure and required the most development effort.
Our design sprints typically include defining the user flow, sketching of the screens based on the defined user flow, and translating the sketches into digital mockups.
With the design and development running in parallel, we ensured that the design sprints were always 1-2 sprints ahead of development – this includes review & feedback as part of the cycle.
We designed the consumer-facing mobile responsive Michelin website which includes the digitised content of the 2016 Michelin Guide, along with a backend system which mainly controls the content of the website.
Deliverables include:
The homepage design emphasises on the function of a search banner to help users find Michelin-rated restaurants that suit their needs & preferences conveniently.
A card-based listing of the restaurants with a consistent information structure promotes a cleaner look, allowing easy readability. This in turn displays more information in the viewport for users to skim through the listing easily.
With the amount of content that would be produced, 3 different types of templates – article, infographics, editorial – were created as a base to assist content writers in producing structured content.
Despite having templates with its own component blocks, we provide flexibility to users where they may add, remove or rearrange content block(s) into their desired layout depending on the content curation.
