Have a question? Ask away!

    Yes!, I'd like to enquire about

    .

    My name is . You can contact me at and email me at .

    Robert Parker Wine Advocate

    The Michelin Guide Singapore 2016

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

    Project approach

    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
    • Ensure flexibility & scalability of content management

    Scope

    • Design research, user flow, consumer-facing mobile responsive website
    • Translate and adapt content of the 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

    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

    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.

    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.

    Deliverables

    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 Michelin-rated restaurants that suit 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. This in turn 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 structured content.

    Modular Content Blocks

    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.

    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. This allows any clarifications to be raised and solved almost immediately.
    3. The scalability & reusability of the design components has to be ensured to minimise development effort.