Have a question?

My name is . I am enquiring about a project for . You can contact me at .

Robert Parker Wine Advocate

The Michelin Guide Singapore 2016

Transforming the Michelin Guide experience from a physical book to digital.

How the project was approached

We worked closely with our clients from Robert Parker Wine Advocate to deliver an end-to-end consumer-facing mobile responsive website for Michelin Singapore, and a backend system that manages the content of the website.

Objectives

  • Transform the Michelin Guide experience from a physical book to digital
  • Access personalised content based on preferences
  • Flexibility & scalability of content management

Scope

  • Design research, user flow, consumer-facing mobile responsive website
  • Translate & adapt content of guide into reusable, digital format templates
  • Design work flow and templates for backend content management system that fits into the consumer-facing mobile responsive website

People involved

  • Product owners (CTO, CFO, UX director)
  • Content writers
  • UX designers & frontend developers
  • Backend engineers & infrastructure engineers

What were the activities involved

Design research & exploration

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.

Co-creation workshops with product owners

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.

Design sprints

Design sprint was the adopted approach and was divided into 8 separate sprints, prioritising the main key pages as the foundation of the whole site structure, and those that require 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 the development, including review & feedback as part of the cycle.

What were the deliverables of the project

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:

  • Finalised consumer-facing design in mobile responsive format
  • Backend system wireframes with interactions & webpage files (HTML, CSS, Javascript, etc.)

Homepage with search banner

The homepage design emphasises on the function of a search banner to help users find a Michelin-rated restaurant that suits their needs & preferences conveniently.

Restaurants listing

A card-based listing of the restaurants with a consistent information structure promotes a  cleaner look, allowing easy readability. Displays more information in the viewport for users to skim through the listing easily.

Article templates

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 a structured content.

Modular content blocks

Despite having templates with its own component blocks, we provide a flexibility where users may add, remove or rearrange content block(s) into their desired layout depending on the content curation.

Learning outcomes

  1. Clear communication between product owners, content writers, UX designers and developers is important to produce high quality work.
  2. Quality of work is better when the frontend developer works alongside the designer, as compared to working remotely, as any clarifications could be raised and solved almost immediately.
  3. Ensuring the scalability & reusability of the design components to minimise the development effort.