Hi 👋 I’m Jingxuan Yu, a passionate product designer based in New York. I’m dedicated to achieving a harmonious blend of experience and aesthetics. I endeavor to make intelligence more tangible through designs that resonate with users on a deeper level.

©

by

in 2024

Hi 👋 I’m Jingxuan Yu, a passionate product designer based in New York. I’m dedicated to achieving a harmonious blend of experience and aesthetics. I endeavor to make intelligence more tangible through designs that resonate with users on a deeper level.

Hi 👋 I’m Jingxuan Yu, a passionate product designer based in New York. I’m dedicated to achieving a harmonious blend of experience and aesthetics. I endeavor to make intelligence more tangible through designs that resonate with users on a deeper level.

Hi 👋 I’m Jingxuan Yu, a passionate product designer based in New York. I’m dedicated to achieving a harmonious blend of experience and aesthetics. I endeavor to make intelligence more tangible through designs that resonate with users on a deeper level.

15:45

Mar 28, 2024

Internal Business Planning Tool

Background

Estée Lauder Companies’ AM tool aims to help their employees manage product assortments across multiple brands.

  • Built MVP from scratch

  • MVP scaled to 3 brands

  • Jo Malone, Estée Lauder, MAC

ELC identified persistent requirements for a B2B tool to enhance employee productivity and engagement. Consequently, they partnered with L+R to build it from scratch. We (L+R) were responsible for the strategy, design, and development in collaboration with ELC (as our client) and an external development team. The MVP of this tool was successfully launched in early 2023, immediately gaining over 10,000 users across 50+ countries worldwide.

Background

Estée Lauder Companies’ AM tool aims to help their employees manage product assortments across multiple brands.

  • Built MVP from scratch

  • MVP scaled to 3 brands

  • Jo Malone, Estée Lauder, MAC

ELC identified persistent requirements for a B2B tool to enhance employee productivity and engagement. Consequently, they partnered with L+R to build it from scratch. We (L+R) were responsible for the strategy, design, and development in collaboration with ELC (as our client) and an external development team. The MVP of this tool was successfully launched in early 2023, immediately gaining over 10,000 users across 50+ countries worldwide.

Background

Estée Lauder Companies’ AM tool aims to help their employees manage product assortments across multiple brands.

  • Built MVP from scratch

  • MVP scaled to 3 brands

  • Jo Malone, Estée Lauder, MAC

ELC identified persistent requirements for a B2B tool to enhance employee productivity and engagement. Consequently, they partnered with L+R to build it from scratch. We (L+R) were responsible for the strategy, design, and development in collaboration with ELC (as our client) and an external development team. The MVP of this tool was successfully launched in early 2023, immediately gaining over 10,000 users across 50+ countries worldwide.

Background

Estée Lauder Companies’ AM tool aims to help their employees manage product assortments across multiple brands.

  • Built MVP from scratch

  • MVP scaled to 3 brands

  • Jo Malone, Estée Lauder, MAC

ELC identified persistent requirements for a B2B tool to enhance employee productivity and engagement. Consequently, they partnered with L+R to build it from scratch. We (L+R) were responsible for the strategy, design, and development in collaboration with ELC (as our client) and an external development team. The MVP of this tool was successfully launched in early 2023, immediately gaining over 10,000 users across 50+ countries worldwide.

Background

Estée Lauder Companies’ AM tool aims to help their employees manage product assortments across multiple brands.

  • Built MVP from scratch

  • MVP scaled to 3 brands

  • Jo Malone, Estée Lauder, MAC

ELC identified persistent requirements for a B2B tool to enhance employee productivity and engagement. Consequently, they partnered with L+R to build it from scratch. We (L+R) were responsible for the strategy, design, and development in collaboration with ELC (as our client) and an external development team. The MVP of this tool was successfully launched in early 2023, immediately gaining over 10,000 users across 50+ countries worldwide.

The Team

2x Design Leads

2x Visual Designers

2x Product Designers

1x Strategist

2x Engineers

The Team

2x Design Leads

2x Visual Designers

2x Product Designers

1x Strategist

2x Engineers

The Team

2x Design Leads

2x Visual Designers

2x Product Designers

1x Strategist

2x Engineers

The Team

2x Design Leads

2x Visual Designers

2x Product Designers

1x Strategist

2x Engineers

The Team

2x Design Leads

2x Visual Designers

2x Product Designers

1x Strategist

2x Engineers

My Role

Design Lead

UX Lead

My Role

Design Lead

UX Lead

My Role

Design Lead

UX Lead

My Role

Design Lead

UX Lead

My Role

Design Lead

UX Lead

My Work

User Research

Competitor Analysis

Stakeholder Interviews

Brainstorming

Wireframing

High-Fi UI

Usability Test

Prototyping

Design System

My Work

User Research

Competitor Analysis

Stakeholder Interviews

Brainstorming

Wireframing

High-Fi UI

Usability Test

Prototyping

Design System

My Work

User Research

Competitor Analysis

Stakeholder Interviews

Brainstorming

Wireframing

High-Fi UI

Usability Test

Prototyping

Design System

My Work

User Research

Competitor Analysis

Stakeholder Interviews

Brainstorming

Wireframing

High-Fi UI

Usability Test

Prototyping

Design System

My Work

User Research

Competitor Analysis

Stakeholder Interviews

Brainstorming

Wireframing

High-Fi UI

Usability Test

Prototyping

Design System

Partners

External Dev Team

Client: Estée Lauder Companies

Partners

External Dev Team

Client: Estée Lauder Companies

Partners

External Dev Team

Client: Estée Lauder Companies

Partners

External Dev Team

Client: Estée Lauder Companies

Partners

External Dev Team

Client: Estée Lauder Companies

Duration

1 Year 3 Months

Duration

1 Year 3 Months

Duration

1 Year 3 Months

Duration

1 Year 3 Months

Duration

1 Year 3 Months

Problem

Users originally handled market and product data via hundreds of Excel sheets, leaving the process cumbersome and error-prone.

  • How can we design a new solution that's better?

It used to take months for a Global Brand user to check and decide which products should be carried, where they should be carried, and which products performed well, etc., via a massive amount of Excel sheets. The overall process was tiring, resulting in both low user productivity and engagement. We wanted to propose a better solution.

Problem

Users originally handled market and product data via hundreds of Excel sheets, leaving the process cumbersome and error-prone.

  • How can we design a new solution that's better?

It used to take months for a Global Brand user to check and decide which products should be carried, where they should be carried, and which products performed well, etc., via a massive amount of Excel sheets. The overall process was tiring, resulting in both low user productivity and engagement. We wanted to propose a better solution.

Problem

Users originally handled market and product data via hundreds of Excel sheets, leaving the process cumbersome and error-prone.

  • How can we design a new solution that's better?

It used to take months for a Global Brand user to check and decide which products should be carried, where they should be carried, and which products performed well, etc., via a massive amount of Excel sheets. The overall process was tiring, resulting in both low user productivity and engagement. We wanted to propose a better solution.

Problem

Users originally handled market and product data via hundreds of Excel sheets, leaving the process cumbersome and error-prone.

  • How can we design a new solution that's better?

It used to take months for a Global Brand user to check and decide which products should be carried, where they should be carried, and which products performed well, etc., via a massive amount of Excel sheets. The overall process was tiring, resulting in both low user productivity and engagement. We wanted to propose a better solution.

Problem

Users originally handled market and product data via hundreds of Excel sheets, leaving the process cumbersome and error-prone.

  • How can we design a new solution that's better?

It used to take months for a Global Brand user to check and decide which products should be carried, where they should be carried, and which products performed well, etc., via a massive amount of Excel sheets. The overall process was tiring, resulting in both low user productivity and engagement. We wanted to propose a better solution.

Market Research

First, I collaborated with team to define “what’s a better solution” via competitor analysis because we wanted to understand the industry better.

  • Prioritized key functions

  • Design & function evaluation

  • Online research report

We evaluated 4 different features via 20+ product. They either showed complex data-handling, attractive visualizations, or smooth navigation. I focused on evaluating how efficiently I could sort, search, and select a particular piece of data from these tools. By summarizing the results into a report, it was easy for us to surface our findings to stakeholders to align on the approaches we favored.

Market Research

First, I collaborated with team to define “what’s a better solution” via competitor analysis because we wanted to understand the industry better.

  • Prioritized key functions

  • Design & function evaluation

  • Online research report

We evaluated 4 different features via 20+ product. They either showed complex data-handling, attractive visualizations, or smooth navigation. I focused on evaluating how efficiently I could sort, search, and select a particular piece of data from these tools. By summarizing the results into a report, it was easy for us to surface our findings to stakeholders to align on the approaches we favored.

Market Research

First, I collaborated with team to define “what’s a better solution” via competitor analysis because we wanted to understand the industry better.

  • Prioritized key functions

  • Design & function evaluation

  • Online research report

We evaluated 4 different features via 20+ product. They either showed complex data-handling, attractive visualizations, or smooth navigation. I focused on evaluating how efficiently I could sort, search, and select a particular piece of data from these tools. By summarizing the results into a report, it was easy for us to surface our findings to stakeholders to align on the approaches we favored.

Market Research

First, I collaborated with team to define “what’s a better solution” via competitor analysis because we wanted to understand the industry better.

  • Prioritized key functions

  • Design & function evaluation

  • Online research report

We evaluated 4 different features via 20+ product. They either showed complex data-handling, attractive visualizations, or smooth navigation. I focused on evaluating how efficiently I could sort, search, and select a particular piece of data from these tools. By summarizing the results into a report, it was easy for us to surface our findings to stakeholders to align on the approaches we favored.

Market Research

First, I collaborated with team to define “what’s a better solution” via competitor analysis because we wanted to understand the industry better.

  • Prioritized key functions

  • Design & function evaluation

  • Online research report

We evaluated 4 different features via 20+ product. They either showed complex data-handling, attractive visualizations, or smooth navigation. I focused on evaluating how efficiently I could sort, search, and select a particular piece of data from these tools. By summarizing the results into a report, it was easy for us to surface our findings to stakeholders to align on the approaches we favored.

User Research

To strike the "correct" user pain points, we then conducted 6 interviews and sorted results into a feature affinity diagram

  • Summarized 60+ user stories

  • Identified 3 major user groups

  • Result: feature-oriented diagram to nail scope

We conducted interviews with 6 ELC stakeholders, all of whom were team managers, to identify the business objectives, along with a product requirement document. Based on these findings, we created 60+ user stories for three major types of users. To facilitate prioritization of features and flows, I drove the organization process to construct a feature-oriented affinity diagram corresponding to different user roles.

User Research

To strike the "correct" user pain points, we then conducted 6 interviews and sorted results into a feature affinity diagram

  • Summarized 60+ user stories

  • Identified 3 major user groups

  • Result: feature-oriented diagram to nail scope

We conducted interviews with 6 ELC stakeholders, all of whom were team managers, to identify the business objectives, along with a product requirement document. Based on these findings, we created 60+ user stories for three major types of users. To facilitate prioritization of features and flows, I drove the organization process to construct a feature-oriented affinity diagram corresponding to different user roles.

User Research

To strike the "correct" user pain points, we then conducted 6 interviews and sorted results into a feature affinity diagram

  • Summarized 60+ user stories

  • Identified 3 major user groups

  • Result: feature-oriented diagram to nail scope

We conducted interviews with 6 ELC stakeholders, all of whom were team managers, to identify the business objectives, along with a product requirement document. Based on these findings, we created 60+ user stories for three major types of users. To facilitate prioritization of features and flows, I drove the organization process to construct a feature-oriented affinity diagram corresponding to different user roles.

User Research

To strike the "correct" user pain points, we then conducted 6 interviews and sorted results into a feature affinity diagram

  • Summarized 60+ user stories

  • Identified 3 major user groups

  • Result: feature-oriented diagram to nail scope

We conducted interviews with 6 ELC stakeholders, all of whom were team managers, to identify the business objectives, along with a product requirement document. Based on these findings, we created 60+ user stories for three major types of users. To facilitate prioritization of features and flows, I drove the organization process to construct a feature-oriented affinity diagram corresponding to different user roles.

User Research

To strike the "correct" user pain points, we then conducted 6 interviews and sorted results into a feature affinity diagram

  • Summarized 60+ user stories

  • Identified 3 major user groups

  • Result: feature-oriented diagram to nail scope

We conducted interviews with 6 ELC stakeholders, all of whom were team managers, to identify the business objectives, along with a product requirement document. Based on these findings, we created 60+ user stories for three major types of users. To facilitate prioritization of features and flows, I drove the organization process to construct a feature-oriented affinity diagram corresponding to different user roles.

Sitemap

Based on the diagram, I drove to create and refine a high-level sitemap for the tool, in order to facilitate communication cross-functionally.

  • Unify teams on same page

  • Blue print to guide following process

  • Groundwork for platform navigation

I collaborated with the other design lead, our engineer team, and our client to ensure that this sitemap: (1) is a precise map for the feature-oriented diagram; (2) matches the blueprint our client had in mind, which might not be easy to communicate thoroughly without a map visualization; (3) offers our engineers a direct way to start backend work, CMS configuration, and API preparation.

Sitemap

Based on the diagram, I drove to create and refine a high-level sitemap for the tool, in order to facilitate communication cross-functionally.

  • Unify teams on same page

  • Blue print to guide following process

  • Groundwork for platform navigation

I collaborated with the other design lead, our engineer team, and our client to ensure that this sitemap: (1) is a precise map for the feature-oriented diagram; (2) matches the blueprint our client had in mind, which might not be easy to communicate thoroughly without a map visualization; (3) offers our engineers a direct way to start backend work, CMS configuration, and API preparation.

Sitemap

Based on the diagram, I drove to create and refine a high-level sitemap for the tool, in order to facilitate communication cross-functionally.

  • Unify teams on same page

  • Blue print to guide following process

  • Groundwork for platform navigation

I collaborated with the other design lead, our engineer team, and our client to ensure that this sitemap: (1) is a precise map for the feature-oriented diagram; (2) matches the blueprint our client had in mind, which might not be easy to communicate thoroughly without a map visualization; (3) offers our engineers a direct way to start backend work, CMS configuration, and API preparation.

Sitemap

Based on the diagram, I drove to create and refine a high-level sitemap for the tool, in order to facilitate communication cross-functionally.

  • Unify teams on same page

  • Blue print to guide following process

  • Groundwork for platform navigation

I collaborated with the other design lead, our engineer team, and our client to ensure that this sitemap: (1) is a precise map for the feature-oriented diagram; (2) matches the blueprint our client had in mind, which might not be easy to communicate thoroughly without a map visualization; (3) offers our engineers a direct way to start backend work, CMS configuration, and API preparation.

Sitemap

Based on the diagram, I drove to create and refine a high-level sitemap for the tool, in order to facilitate communication cross-functionally.

  • Unify teams on same page

  • Blue print to guide following process

  • Groundwork for platform navigation

I collaborated with the other design lead, our engineer team, and our client to ensure that this sitemap: (1) is a precise map for the feature-oriented diagram; (2) matches the blueprint our client had in mind, which might not be easy to communicate thoroughly without a map visualization; (3) offers our engineers a direct way to start backend work, CMS configuration, and API preparation.

Research Result

The research indicated that users need an appealing and intuitive visualization of the massive mundane data.

Research Result

The research indicated that users need an appealing and intuitive visualization of the massive mundane data.

Research Result

The research indicated that users need an appealing and intuitive visualization of the massive mundane data.

Research Result

The research indicated that users need an appealing and intuitive visualization of the massive mundane data.

Research Result

The research indicated that users need an appealing and intuitive visualization of the massive mundane data.

Sketches

To build the basics of the visualization, we started with exploring layouts for different information segmentations.

  • 10 layout options in 4 directions

  • Presented pros & cons to client

  • Narrowed down to 3 directions

We initially brainstormed 10 layout options, then through internal design discussions, we categorized them into 4 layout directions, each emphasizing a different aspect of the working area: category, comparison, metrics, and controllers. Following detailed discussions, we reached an agreement that the display of dense and visually heavy information should strive to be as less overwhelming as possible, enabling us to narrow down to 3 directions.

Sketches

To build the basics of the visualization, we started with exploring layouts for different information segmentations.

  • 10 layout options in 4 directions

  • Presented pros & cons to client

  • Narrowed down to 3 directions

We initially brainstormed 10 layout options, then through internal design discussions, we categorized them into 4 layout directions, each emphasizing a different aspect of the working area: category, comparison, metrics, and controllers. Following detailed discussions, we reached an agreement that the display of dense and visually heavy information should strive to be as less overwhelming as possible, enabling us to narrow down to 3 directions.

Sketches

To build the basics of the visualization, we started with exploring layouts for different information segmentations.

  • 10 layout options in 4 directions

  • Presented pros & cons to client

  • Narrowed down to 3 directions

We initially brainstormed 10 layout options, then through internal design discussions, we categorized them into 4 layout directions, each emphasizing a different aspect of the working area: category, comparison, metrics, and controllers. Following detailed discussions, we reached an agreement that the display of dense and visually heavy information should strive to be as less overwhelming as possible, enabling us to narrow down to 3 directions.

Sketches

To build the basics of the visualization, we started with exploring layouts for different information segmentations.

  • 10 layout options in 4 directions

  • Presented pros & cons to client

  • Narrowed down to 3 directions

We initially brainstormed 10 layout options, then through internal design discussions, we categorized them into 4 layout directions, each emphasizing a different aspect of the working area: category, comparison, metrics, and controllers. Following detailed discussions, we reached an agreement that the display of dense and visually heavy information should strive to be as less overwhelming as possible, enabling us to narrow down to 3 directions.

Sketches

To build the basics of the visualization, we started with exploring layouts for different information segmentations.

  • 10 layout options in 4 directions

  • Presented pros & cons to client

  • Narrowed down to 3 directions

We initially brainstormed 10 layout options, then through internal design discussions, we categorized them into 4 layout directions, each emphasizing a different aspect of the working area: category, comparison, metrics, and controllers. Following detailed discussions, we reached an agreement that the display of dense and visually heavy information should strive to be as less overwhelming as possible, enabling us to narrow down to 3 directions.

Test & Iteration

We then iterated the final wireframe in 3 rounds of interviews (15 sessions in total) with 5 ELC stakeholders, gathering user insights to improve design details.

Test & Iteration

We then iterated the final wireframe in 3 rounds of interviews (15 sessions in total) with 5 ELC stakeholders, gathering user insights to improve design details.

Because we have 2 more brands other than Jo Malone (which our final wireframe above used), we started with scaling the final wireframe to accommodate the other 2 brands: Estée Lauder and MAC. This enabled us to test the wireframe performance across all brands required for the MVP.

Furthermore, I facilitated a discussion between our teams and the client to collectively define several most important and frequently performed tasks by users in their work. Based on these tasks, we created key performance indicators (KPIs) to assess whether our design reached a satisfactory stage.

After 1st round of test, we realized each brand had a unique way of grouping products and our design was not able to satisfy every grouping approach, thus we ran into

THE BIGGEST CHALLENGE

Different brands had different product grouping approaches. How should we improve our layout’s grouping structure so it can scale to accommodate all brands?

01 First, we wanted to dig into every product group and how it was categorized from all brands

With the help from our client, we spent almost a week really trying to understand how each of the 3 brands categorized their product assortments by online inspecting how they organize and sell products on their shopping websites and interviewing brand managers about their product hierarchy.

02 We then condensed the number of grouping axes to 2 (each represented a grouping rule).

We observed in the summary table that 2 brands had multi-dimensional grouping rules. They were helpful in the shopping websites because they were able to surface products from multi-dimensional aspects. However, in our situation, multi-dimensional groupings created troubles in both user navigation and product management because of its duplicative nature. Thus, we worked with our client to sort excessive grouping dimensions into only 2 dimensions: Column - Product Type and Row - Product Attributes.

During the 2nd round of testing, although the layout columns and rows could be scaled to every brand,

ANOTHER ISSUE ARISED

We encountered extreme cases handling MAC, whose number of products in a single group can reach 20+, leaving large space holes in the display for other groups that had less products.

03 Through extensive discussions, I closely worked with strategist, engineers and VPs from all brands to redefine their grouping structures, finally enabling us to set a universal min-max rule handling the # of groups and products per group that could accommodate all brands.

We observed in the summary table that 2 brands had over 2-dimensional grouping rules. They were helpful in the shopping websites because they were able to surface products from multi-dimensional aspects. However, in our situation, multi-dimensional groupings created troubles in both user navigation and product management because of its duplicative nature. Thus, we worked with our client to sort excessive grouping dimensions into only 2 dimensions: Column - Product Type and Row - Product Attributes.

04 In the end, we explored the UI of the main visualization and created high-fidelity screens while establishing a design system that each brand could easily switch to.

I closely worked with our visual designers to ensure our choices of colors, fonts, grids, etc reach a good balance between legibility and brand-specific aesthetics. I also helped our visual designers to iterate these choices by testing them on several complex screens, showing them exact places the styles needed to shift.

We established a simple design system with our engineers. In this simple one, we only built components. While we built multiple style libraries outside of the design system, which supported us to switch component styles for different brands. If you are interested in more details on building a unified design system that scales across brands, feel free to reach out or I may include the details in another case study.

3RD (FINAL) TEST RESULT

On the last round of testing, the candidates and our stakeholders were all satisfied by what they were shown and showed great excitement on its launch.

Delivery

Final design: Selected flow from user landing AM Tool's home, select to review a core, to finally choose a comparison core for all 3 brands.

Delivery

Final design: Selected flow from user landing AM Tool's home, select to review a core, to finally choose a comparison core for all 3 brands.

From top to bottom: Jo Malone (1-8), Estée Lauder (9-13), MAC (14-18)

From top to bottom: Jo Malone (1-8), Estée Lauder (9-13), MAC (14-18)

Result & Impact

AM Tool helped to improve user productivity drastically. 90% users showed greater engagement during the 1 month of release.

Result & Impact

AM Tool helped to improve user productivity drastically. 90% users showed greater engagement during the 1 month of release.

The MVP was successfully launched in early 2023, serving 10k+ ELC Global Brand employees across 20+ countries and territories. This project was also the 1st revenue-driver for our agency, enabling us to solidify a trusted and long-term partnership with Estée Lauder Companies.

Insights

What could I and the team done better?

Insights

What could I and the team done better?

Actively involving the engineering team in an early phase was very helpful. In fact, I believe we could have involved them more heavily when we were discussing how we would make a switchable design system at a very early stage, so that we would have more control over the scope going forward.

We took a lot of time addressing all of our client's requirements. Since they often varied over time, resulting in a rabbit hole of going back and forth on everything from the size of an image to where to enter a flow. I would hope that in similar future situations, I could drive a more efficient process without sacrificing the user experience.

CHAT · LEARN · CREATE · BUILD · HELP ·
CHAT · LEARN · CREATE · BUILD · HELP ·
CHAT · LEARN · CREATE · BUILD · HELP ·
CHAT · LEARN · CREATE · BUILD · HELP ·
CHAT · LEARN · CREATE · BUILD · HELP ·

©

by

in 2024

©

by

in 2024

©

by

in 2024

©

by

in 2024