TikTok UI/UX Design
for Launch

End-to-End UI/UX Design · Information Flow & Visual Identity

Michelin’s TikTok Mini Program was developed as an official presence within the platform’s ecosystem. Unlike its WeChat counterpart, which serves as a brand-owned hub for Michelin’s digital services, the TikTok Mini Program needed to adapt to the platform’s dynamic nature, making Michelin’s content more accessible and engaging. Given TikTok’s fast-paced user behaviour, my challenge was to design a concise and visually engaging interface that provides essential product information while maintaining a seamless user experience.

Client

Michelin China
(Powered by TikTok)

Services

Visual Design
UI & UX Design

Industries

Social Media
Digital Services

Date

Jul 2023

Challenge

Adapting to a Fast-Paced Ecosystem

Unlike brand-owned platforms, TikTok’s Mini Program required a concise, single-page format to match its fast-scrolling behaviour. The challenge was balancing brand presence with usability while maintaining clarity and engagement.

Fast-paced culture
from live sales

Users expect a fast, concise and intuitive brand experience

Total units sold in China on Douyin in 2024

48%

Total units sold in China on Douyin in 2024

Fast-paced culture
from live sales

Users expect a fast, concise and intuitive brand experience

Total units sold in China on Douyin in 2024

48%

Total units sold in China on Douyin in 2024

Design Challenge

Single page experience

How to integrate 4 functional modules within 1 page

Maintain brand consistency

Adapt the TikTok UI style to suit the Michelin branding

Interactivity

Adapt the TikTok UI style to suit the Michelin branding

Design Challenge

Single page experience

How to integrate 4 functional modules within 1 page

Maintain brand consistency

Adapt the TikTok UI style to suit the Michelin branding

Interactivity

Adapt the TikTok UI style to suit the Michelin branding

Design Challenge

Single page experience

How to integrate 4 functional modules within 1 page

Maintain brand consistency

Adapt the TikTok UI style to suit the Michelin branding

Interactivity

Adapt the TikTok UI style to suit the Michelin branding

Fast-paced culture
from live sales

Users expect a fast, concise and intuitive brand experience

Avg. Monthly Page UV

48%

Live Streaming Sales

48%

Live Streaming Sales

DESIGN

Designing a Cohesive & Scalable UI

I developed a modular system that prioritises clarity and engagement, refining content hierarchy and interaction patterns to fit TikTok’s fast-paced environment.

The 4 main function boards in WeChat applets

Explore+

A centralised hub for discovering new and relevant content.

Gourmet+

A curated Michelin dining experience. Users can browse Michelin-rated restaurants, book tables, and access city-specific dining guides.

Auto+

An integrated dashboard for managing vehicle-related services. Users can connect their accounts to access insurance details, maintenance records, and driving insights.

Picks+

A dedicated marketplace for Michelin tyres and automotive accessories.

Explore+

A centralised hub for discovering new and relevant content.

Gourmet+

A curated Michelin dining experience. Users can browse Michelin-rated restaurants, book tables, and access city-specific dining guides.

Auto+

An integrated dashboard for managing vehicle-related services. Users can connect their accounts to access insurance details, maintenance records, and driving insights.

Picks+

A dedicated marketplace for Michelin tyres and automotive accessories.

Explore+

A centralised hub for discovering new and relevant content.

Gourmet+

A curated Michelin dining experience. Users can browse Michelin-rated restaurants, book tables, and access city-specific dining guides.

Auto+

An integrated dashboard for managing vehicle-related services. Users can connect their accounts to access insurance details, maintenance records, and driving insights.

Picks+

A dedicated marketplace for Michelin tyres and automotive accessories.

Integrate 4 functional modules within 1 page

Design Iteration & Decision-Making

"Gourmet star journey" section
of Michelin's WeChat Mini Program

A Michelin Passport That Turns Dining Into a Starred Journey

The 'Gourmet Star Journey' section offers users a personalised overview of their Michelin dining experiences. It tracks how many starred restaurants they've visited — including 1-star, 2-star, and 3-star venues — and encourages users to explore more by gamifying the experience. This feature not only boosts engagement but also builds a sense of accomplishment as users ‘collect’ stars through their culinary journey.

The 'Gourmet Star Journey' section offers users a personalised overview of their Michelin dining experiences. It tracks how many starred restaurants they've visited — including 1-star, 2-star, and 3-star venues — and encourages users to explore more by gamifying the experience. This feature not only boosts engagement but also builds a sense of accomplishment as users ‘collect’ stars through their culinary journey.

"Picks+” section of
Michelin's WeChat Mini Program

Modular Navigation for Tyre Category Exploration

This is the tyre category landing page, designed to help users efficiently navigate different types of tyres based on their vehicle or usage scenario. The top navigation bar allows quick switching between passenger car tyres, SUV tyres, bicycle tyres, and related services or products. Within each category, sub-categories — such as 'Urban Commuting', 'Sporty Control', or 'Fuel Efficiency' — guide users to find the most suitable tyres. The layout simplifies the selection process by offering filters like car model or tyre size, reducing user decision fatigue.

This is the tyre category landing page, designed to help users efficiently navigate different types of tyres based on their vehicle or usage scenario. The top navigation bar allows quick switching between passenger car tyres, SUV tyres, bicycle tyres, and related services or products. Within each category, sub-categories — such as 'Urban Commuting', 'Sporty Control', or 'Fuel Efficiency' — guide users to find the most suitable tyres. The layout simplifies the selection process by offering filters like car model or tyre size, reducing user decision fatigue.