Michelin UX/UI Evolution

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.

Client

Michelin China

Services

UI/UX Design
Visual Design

Industries

Automotive & Lifestyle

Date

Apr 2023

Challenge

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.

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

scroll to see more

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

Clarity. Simplicity. Engagement.

Rebuilding Michelin’s UI with a structured, intuitive layout that enhances readability and usability.

RESULTS

Higher engagement.
Better usability.

The redesigned experience led to increased interaction, faster navigation, and improved brand consistency.

After

After

scroll to see more

2022 (Jan 1 - Dec 31)

22K

Avg. Monthly Page UV

22K

Avg. Monthly Page UV

22K

Avg. Monthly Page UV

After the Revamp

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%↑