TikTok UI/UX Design
for Launch
TikTok UI/UX Design
for Launch
TikTok UI/UX Design
for Launch
End-to-End UI/UX Design · Information Flow & Visual Identity
End-to-End UI/UX Design · Information Flow & Visual Identity
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.
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.
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
Challenge
Adapting to a Fast-Paced Ecosystem
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.
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.
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
Live Streaming Sales
Fast-paced culture
from live sales
Users expect a fast, concise and intuitive brand experience
Total units sold in China on Douyin in 2024
Live Streaming Sales
Fast-paced culture
from live sales
Users expect a fast, concise and intuitive brand experience
Total units sold in China on Douyin in 2024
Live Streaming Sales
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
The 4 main function boards in WeChat applets
The 4 main function boards in WeChat applets
01
Explore+
A centralised hub for discovering new and relevant content.
02
Gourmet+
A curated Michelin dining experience. Users can browse Michelin-rated restaurants, book tables, and access city-specific dining guides.
03
Auto+
An integrated dashboard for managing vehicle-related services. Users can connect their accounts to access insurance details, maintenance records, and driving insights.
04
Picks+
A dedicated marketplace for Michelin tyres and automotive accessories.
01
Explore+
A centralised hub for discovering new and relevant content.
02
Gourmet+
A curated Michelin dining experience. Users can browse Michelin-rated restaurants, book tables, and access city-specific dining guides.
03
Auto+
An integrated dashboard for managing vehicle-related services. Users can connect their accounts to access insurance details, maintenance records, and driving insights.
04
Picks+
A dedicated marketplace for Michelin tyres and automotive accessories.
01
Explore+
A centralised hub for discovering new and relevant content.
02
Gourmet+
A curated Michelin dining experience. Users can browse Michelin-rated restaurants, book tables, and access city-specific dining guides.
03
Auto+
An integrated dashboard for managing vehicle-related services. Users can connect their accounts to access insurance details, maintenance records, and driving insights.
04
Picks+
A dedicated marketplace for Michelin tyres and automotive accessories.
DESIGN
DESIGN
Designing a Cohesive & Scalable UI
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.
I developed a modular system that prioritises clarity and engagement, refining content hierarchy and interaction patterns to fit TikTok’s fast-paced environment.
I developed a modular system that prioritises clarity and engagement, refining content hierarchy and interaction patterns to fit TikTok’s fast-paced environment.
Integrate 4 functional modules within 1 page
Design Iteration & Decision-Making
Design Iteration & Decision-Making
"Gourmet star journey" section
of Michelin's WeChat Mini Program
"Gourmet star journey" section
of Michelin's WeChat Mini Program
A Michelin Passport That Turns Dining Into a Starred Journey
A Michelin Passport That Turns Dining Into a Starred Journey
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.
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
"Picks+” section of
Michelin's WeChat Mini Program
Modular Navigation for Tyre Category Exploration
Modular Navigation for Tyre Category Exploration
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.
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.
Rebuilding the ‘My’ Section for Short-Form Interaction
Rebuilding the ‘My’ Section for Short-Form Interaction
"My+” section of
Michelin's WeChat Mini Program
"My+” section of
Michelin's WeChat Mini Program
RESULTS
RESULTS
Seamlessly Integrated
Platform-Aligned UX
Seamlessly Integrated
Platform-Aligned UX
The final UI improved navigation and engagement while ensuring brand consistency within TikTok’s ecosystem.
The final UI improved navigation and engagement while ensuring brand consistency within TikTok’s ecosystem.
The final UI improved navigation and engagement while ensuring brand consistency within TikTok’s ecosystem.