Michelin UX/UI Evolution
Michelin UX/UI Evolution
Michelin UX/UI Evolution
UX/UI Redesign · Brand Consistency
UX/UI Redesign · Brand Consistency
UX/UI Redesign · Brand Consistency
Originally, Michelin’s app was a direct web-to-mobile transfer, which resulted in poor usability. My role was to reimagine the experience, making the app truly mobile-first and user-friendly.
Originally, Michelin’s app was a direct web-to-mobile transfer, which resulted in poor usability. My role was to reimagine the experience, making the app truly mobile-first and user-friendly.
Originally, Michelin’s app was a direct web-to-mobile transfer, which resulted in poor usability. My role was to reimagine the experience, making the app truly mobile-first and user-friendly.
Client
Michelin China
Services
UI/UX Design
Visual Design
Industries
Automotive & Lifestyle
Date
Apr 2023
Challenge
Challenge
From Web to App
No mobile optimisation.
From Web to App
No mobile optimisation.
Michelin’s mini-program was a direct transfer from the website and WeChat articles, leading to usability issues and low engagement.
Michelin’s mini-program was a direct transfer from the website and WeChat articles, leading to usability issues and low engagement.
Michelin’s mini-program was a direct transfer from the website and WeChat articles, leading to usability issues and low engagement.
Low engagement
& retention
Low engagement
& retention
Gourmet+ content & interactions fail to drive ULP user activity & stickiness.
Gourmet+ content & interactions fail to drive ULP user activity & stickiness.
Before
Before
Poor Information Hierarchy
This section is visually prominent, but the functional purpose is unclear, potentially causing user confusion.
Red Bar:
米其林摘星之旅 | Michelin Star Journey
Displays the number of Michelin stars a user has collected. Clicking it redirects to the "Star Journey" page, which includes user footprints, recommended restaurants, frequently visited places, and wishlist restaurants.
"I want to quickly find out which Michelin restaurants are available in different regions."
"I want to quickly search for and book my desired restaurant."
"I want to know the recommended dishes of my favorite Michelin-listed restaurants."
...
Poor Information Hierarchy
This section is visually prominent, but the functional purpose is unclear, potentially causing user confusion.
Red Bar:
米其林摘星之旅 | Michelin Star Journey
Displays the number of Michelin stars a user has collected. Clicking it redirects to the "Star Journey" page, which includes user footprints, recommended restaurants, frequently visited places, and wishlist restaurants.
"I want to quickly find out which Michelin restaurants are available in different regions."
"I want to quickly search for and book my desired restaurant."
"I want to know the recommended dishes of my favorite Michelin-listed restaurants."
...
Poor Information Hierarchy
This section is visually prominent, but the functional purpose is unclear, potentially causing user confusion.
Red Bar:
米其林摘星之旅 | Michelin Star Journey
Displays the number of Michelin stars a user has collected. Clicking it redirects to the "Star Journey" page, which includes user footprints, recommended restaurants, frequently visited places, and wishlist restaurants.
"I want to quickly find out which Michelin restaurants are available in different regions."
"I want to quickly search for and book my desired restaurant."
"I want to know the recommended dishes of my favorite Michelin-listed restaurants."
...
Visual Hierarchy & Discoverability
This section is visually prominent, but the functional purpose is unclear, potentially causing user confusion.
今日餐厅推荐|
Today's Restaurant Recommendations
"I wouldn’t even know there’s more content if I don’t scroll down."
"I thought it would be all restaurant recommendations from here on."
…
Visual Hierarchy & Discoverability
This section is visually prominent, but the functional purpose is unclear, potentially causing user confusion.
今日餐厅推荐|
Today's Restaurant Recommendations
"I wouldn’t even know there’s more content if I don’t scroll down."
"I thought it would be all restaurant recommendations from here on."…
Visual Hierarchy & Discoverability
This section is visually prominent, but the functional purpose is unclear, potentially causing user confusion.
今日餐厅推荐|
Today's Restaurant Recommendations
"I wouldn’t even know there’s more content if I don’t scroll down."
"I thought it would be all restaurant recommendations from here on."…
Limited Content Diversity and Engagement
The content primarily follows a single theme, reducing engagement opportunities for users with different interests.
生活+推荐 | Gourmet+ Featured Articles
"The article is too long; I have to scroll for a long time."
"The content doesn’t seem very engaging."
...
Limited Content Diversity and Engagement
The content primarily follows a single theme, reducing engagement opportunities for users with different interests.
生活+推荐 |
Gourmet+ Featured Articles
"The article is too long; I have to scroll for a long time."
"The content doesn’t seem very engaging."...
Limited Content Diversity and Engagement
The content primarily follows a single theme, reducing engagement opportunities for users with different interests.
生活+推荐 |
Gourmet+ Featured Articles
"The article is too long; I have to scroll for a long time."
"The content doesn’t seem very engaging."...
Disconnected from the Page Structure
The forum appears misplaced within the page hierarchy, leading to confusion about its function and relevance.
生活+论坛 | Gourmet+ Forum
"I’m not sure what kind of content this forum has."
"I just accessed this forum through the Starred Journey section."
....
Disconnected from the Page Structure
The forum appears misplaced within the page hierarchy, leading to confusion about its function and relevance.
生活+论坛 | Gourmet+ Forum
"I’m not sure what kind of content this forum has."
"I just accessed this forum through the Starred Journey section."....
Disconnected from the Page Structure
The forum appears misplaced within the page hierarchy, leading to confusion about its function and relevance.
生活+论坛 | Gourmet+ Forum
"I’m not sure what kind of content this forum has."
"I just accessed this forum through the Starred Journey section."....
Lack of Content Differentiation
The Michelin merchandise section lacks clear variation, making the offerings appear repetitive and less compelling to users.
米其林周边好物 | Michelin Merchandise
"Picks+ is full of this stuff—I can tell they really want to sell things."
"Turns out the products here are quite different from those in Auto+."
....
Lack of Content Differentiation
The Michelin merchandise section lacks clear variation, making the offerings appear repetitive and less compelling to users.
米其林周边好物 |
Michelin Merchandise
"Picks+ is full of this stuff—I can tell they really want to sell things."
"Turns out the products here are quite different from those in Auto+."....
Lack of Content Differentiation
The Michelin merchandise section lacks clear variation, making the offerings appear repetitive and less compelling to users.
米其林周边好物 |
Michelin Merchandise
"Picks+ is full of this stuff—I can tell they really want to sell things."
"Turns out the products here are quite different from those in Auto+."....
REDESIGN
REDESIGN
Clarity. Simplicity. Engagement.
Clarity. Simplicity. Engagement.
Rebuilding Michelin’s UI with a structured, intuitive layout that enhances readability and usability.
Rebuilding Michelin’s UI with a structured, intuitive layout that enhances readability and usability.
Rebuilding Michelin’s UI with a structured, intuitive layout that enhances readability and usability.
| Feature Overview
了解米其林生活+ | Learn About Michelin Gourmet+
Access an introduction to the About Gourmet+ page.
最新米其林指南榜单 | Latest Michelin Guide Rankings
Click 【北京】(City Name) to open a new page displaying the latest Michelin Guide rankings for that city. Swipe right for more.
Quick Access Features
-Click 【摘星之旅】 (Michelin Star Dining Journey) check-in privileges and exclusive benefits.
-Click 【生活+论坛】(Gourmet+ Forum) discussions and events.
-Click 【星选福利】(Exclusive Michelin Benefits) to view the latest Michelin-exclusive dining promotions.
-Click 【餐厅预订】(Restaurant Reservations) to book Michelin-recommended restaurants.
-Click 【周边好物】(Michelin Merchandise) to explore officially curated Michelin products.
Banner Section
Click to access relevant campaign pages.
生活+推荐 | "Gourmet+ Recommendations"
Browse curated content using tags:
【星餐厅】(Michelin-starred Restaurants);
【觅新味】(Recommended Deals);
【品红酒】(Recommended Wines) ;
【去旅行】(Recommended Hotels);
【买周边】(Michelin-related Products).
| Feature Overview
了解米其林生活+ | Learn About Michelin Gourmet+
Access an introduction to the About Gourmet+ page.
最新米其林指南榜单 | Latest Michelin Guide Rankings
Click 【北京】(City Name) to open a new page displaying the latest Michelin Guide rankings for that city. Swipe right for more.
Quick Access Features
-Click 【摘星之旅】 (Michelin Star Dining Journey) check-in privileges and exclusive benefits.
-Click 【生活+论坛】(Gourmet+ Forum) discussions and events.
-Click 【星选福利】(Exclusive Michelin Benefits) to view the latest Michelin-exclusive dining promotions.
-Click 【餐厅预订】(Restaurant Reservations) to book Michelin-recommended restaurants.
-Click 【周边好物】(Michelin Merchandise) to explore officially curated Michelin products.
Banner Section
Click to access relevant campaign pages.
生活+推荐 | "Gourmet+ Recommendations"
Browse curated content using tags:
【星餐厅】(Michelin-starred Restaurants);
【觅新味】(Recommended Deals);
【品红酒】(Recommended Wines) ;
【去旅行】(Recommended Hotels);
【买周边】(Michelin-related Products).
| Feature Overview
了解米其林生活+ | Learn About Michelin Gourmet+
Access an introduction to the About Gourmet+ page.
最新米其林指南榜单 | Latest Michelin Guide Rankings
Click 【北京】(City Name) to open a new page displaying the latest Michelin Guide rankings for that city. Swipe right for more.
Quick Access Features
-Click 【摘星之旅】 (Michelin Star Dining Journey) check-in privileges and exclusive benefits.
-Click 【生活+论坛】(Gourmet+ Forum) discussions and events.
-Click 【星选福利】(Exclusive Michelin Benefits) to view the latest Michelin-exclusive dining promotions.
-Click 【餐厅预订】(Restaurant Reservations) to book Michelin-recommended restaurants.
-Click 【周边好物】(Michelin Merchandise) to explore officially curated Michelin products.
Banner Section
Click to access relevant campaign pages.
生活+推荐 | "Gourmet+ Recommendations"
Browse curated content using tags:
【星餐厅】(Michelin-starred Restaurants);
【觅新味】(Recommended Deals);
【品红酒】(Recommended Wines) ;
【去旅行】(Recommended Hotels);
【买周边】(Michelin-related Products).
| Design Rationale
New Entry for Michelin Gourmet+
The new entry point provides clear context, making it easier for users to understand the purpose of the Gourmet+ page.
Relocated Michelin Rankings
Michelin rankings are now more prominent, aligning with user expectations and making it easier to access top-rated restaurants.
Quick Access Shortcuts
Direct access to high-value features (e.g., Michelin Star Dining Journey, Gourmet+ Forum, Restaurant Reservations) ensures smoother interactions and a more efficient user journey.
Enhanced Banner for Promotions
The banner dynamically showcases upcoming campaigns, seasonal Michelin Guide updates, and exclusive ME-sponsored promotions to maximize engagement.
Tag-based Filtering
Improves content discoverability and personalization.
Improved Layout & Scrolling
Creates a more seamless browsing experience.
| Design Rationale
New Entry for Michelin Gourmet+
The new entry point provides clear context, making it easier for users to understand the purpose of the Gourmet+ page.
Relocated Michelin Rankings
Michelin rankings are now more prominent, aligning with user expectations and making it easier to access top-rated restaurants.
Quick Access Shortcuts
Direct access to high-value features (e.g., Michelin Star Dining Journey, Gourmet+ Forum, Restaurant Reservations) ensures smoother interactions and a more efficient user journey.
Enhanced Banner for Promotions
The banner dynamically showcases upcoming campaigns, seasonal Michelin Guide updates, and exclusive ME-sponsored promotions to maximize engagement.
Tag-based Filtering
Improves content discoverability and personalization.
Improved Layout & Scrolling
Creates a more seamless browsing experience.
| Design Rationale
New Entry for Michelin Gourmet+
The new entry point provides clear context, making it easier for users to understand the purpose of the Gourmet+ page.
Relocated Michelin Rankings
Michelin rankings are now more prominent, aligning with user expectations and making it easier to access top-rated restaurants.
Quick Access Shortcuts
Direct access to high-value features (e.g., Michelin Star Dining Journey, Gourmet+ Forum, Restaurant Reservations) ensures smoother interactions and a more efficient user journey.
Enhanced Banner for Promotions
The banner dynamically showcases upcoming campaigns, seasonal Michelin Guide updates, and exclusive ME-sponsored promotions to maximize engagement.
Tag-based Filtering
Improves content discoverability and personalization.
Improved Layout & Scrolling
Creates a more seamless browsing experience.
RESULTS
RESULTS
Higher engagement.
Better usability.
Higher engagement.
Better usability.
The redesigned experience led to increased interaction, faster navigation, and improved brand consistency.
The redesigned experience led to increased interaction, faster navigation, and improved brand consistency.
The redesigned experience led to increased interaction, faster navigation, and improved brand consistency.
After
After
2022 (Jan 1 - Dec 31)
22K
Avg. Monthly Page UV
22K
Avg. Monthly Page UV
22K
Avg. Monthly Page UV
After the Revamp
2023 (May 1 - Dec 31)
22K
Avg. Monthly Page UV
22K
Avg. Monthly Page UV
22K
Avg. Monthly Page UV
0%↑
0%↑
0%↑