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

16:48

May 24, 2024

Internal Business Planning Tool

Background

Estée Lauder Companies (ELC) aims to empower their employees with efficient management of product assortments across a diverse brand portfolio.

In this case study, I share my story about how to design an internal business planning tool for Estée Lauder Companies from scratch. The initial MVP was scaled to 3 subsidiary brands: Jo Malone, Estee Lauder, and MAC.

team

1x UX/UI Lead - Me

1x Visual Lead

3x Engineers

1x Strategist/PM

2x Product Designers

my work

Research

Analysis

Wireframe/UI

Testing

Design System

partners

Client: ELC

External Dev Team

duration

1 year 3 months

problem

ELC users made product decisions via 100+ raw data sheets, just like finding a perfect daily set from a cluttered makeup desk

what they had

what we provide

what they had

what we provide

We envisioned an intuitive and organized visualization to make it a lot easier for users to consume data. Instead of spending time on organizing raw data, we encouraged them to shift the focus to make important product decisions based on data-driven value.

From 0 to 0.5

Establishing an architecture that meets user needs is the starting point to success

01

Market Research & Competitor Analysis

02

User Research & Interviews

03

Research Report & Summary

04

Sitemap & Main Navigation

05

Set Design Goals

06

Feature-oriented Affinity Diagram

From 0 to 0.5

Establishing an architecture that meets user needs is the starting point to success

01

Market Research & Competitor Analysis

02

User Research & Interviews

03

Research Report & Summary

04

Sitemap & Main Navigation

05

Set Design Goals

06

Feature-oriented Affinity Diagram

market research

Understand the industry in-depth to define what's a 'better' solution

I started with prioritizing the key functions of MVP with stakeholders, PM, and engineers based on the tasks frequency that different users need to accomplish. With these in mind, I then drove the process of evaluating design of similar functions from potential competitors such as Airtable & Pinterest. From there, we understood our approach should be based on the scale and amount of data in different subsidiary brands.

Low Interface Complexity

High Consistency in Heuristics

Smart UI Implications

Features Hard to Scale

Lack Visual Indications

Too Text-heavy

user research

Embrace & understand users: Product performance needs more attention

To better understand the user needs, we conducted interviews to 6 ELC stakeholders. They were managers who would not only use the platform when it came out but also perform market-level product strategies via the platform. Based on their insights, we summarized over 60 user stories for 3 major user profiles, then sorted them into a feature-oriented affinity diagram as a preparation for constructing the platform's information architecture.

raw user stories

raw user stories

affinity diagram

affinity diagram

research findings

Product headshots & brand visuals evoke a sense of pride among users

Combing with business objectives and user insights, I initiated the process to set qualitative design goals for the MVP. In the MVP, the essential goal was to make it feel special and respectful for ELC users so that they could enjoy it instead of just being paid to use it. Thus, the user emotion was always prioritized.

Manage Information Density

I

As we understood more on the number of products in each visualization could be, we might need to cater the visualization approach to several ranges to achieve the best scanning performance

Stay Visual Focused

II

The target users were visual people and including brands visuals made them excited and proud of the work they did. It was an important emotion experience that I paid special attention to.

Balance Data Display Efficiency

III

There would be inevitably cases when the visualization needed to support very dense information because of use cases & scenarios. We needed to think these situations ahead.

Easy Access to Details

IV

Embed Intelligent Ranking

V

sitemap

Summarization & alignment are never the 'hard' part as long as you know where & when to drive

Because we were about to move into execution, it was important for every member to understand what & how we would proceed. I built & iterated this high-level sitemap with our PM, collecting feedback from stakeholders and engineers. Eventually, our scope became much clearer.

From 0.5 to 0.8

Let design inspire & collaborate with users, instead of teaching them

01

Layout Options & Information Segmentations

02

Mid-fidelity Narrow Down

03

Testing & Presentation

04

Design for User's Emotional Peak

05

The Biggest Design Challenge

06

Iterative Method: Grow with Brands

From 0.5 to 0.8

Let design inspire & collaborate with users, instead of teaching them

01

Layout Options & Information Segmentations

02

Mid-fidelity Narrow Down

03

Testing & Presentation

04

Design for User's Emotional Peak

05

The Biggest Design Challenge

06

Iterative Method: Grow with Brands

sketch & brainstorming

Explore the most appropriate way to divide & present different categories of information

For any complicated tool, the section segmentation approach was the core of the layout. We treated this platform similarly with exploration over 10 options for the entrances of several key flows. I was looking for a holistic picture of when & where the navigation, visualization, indicators, controllers, advanced features, and so on would fit for each flow consistently.

wireframes

Maximize the visualization area while ensuring the controller area remained scalable enough

Narrowing the sketch options down was an iterative process of going back and forth on planning the ratio of visualization space vs controller components. Finding the right compromise took a lot of presenting & discussions with stakeholders. During this process, I also continuously evaluated different configurations based on user inputs, until it reached a balanced middle-ground for both stakeholders and users.

field study

Design for user's emotional peak: Authentic physical experience transformed online via field study

Instead of designers 'reinventing the wheel', I advocated for a collaborative method to let users physically SHOW us what could be a good design.

Field study is often interpreted as time-consuming. But in our case, I found it very useful to observe the environment, patterns, and success factors for our target users. As these retailers often worked in a store, I brought our design team to a Jo Malone (one of the 3 subsidiary brands included in MVP) stand. By inspecting their physical layout and chatting with the sale, we were able to understand the way she memorized products or looked for a product in real-life. This method helped us to finally nail the layout of the core visualization to which users were super excited.

We transformed how users ranked and sold products in store to online, instantly removing a lot of cognitive load. "This looks familiar…" and "It's very authentic…" were 2 things we heard the most often.

the biggest challenge

layout scalability

cross-brand consistency

Which product grouping approach should we adopt so that our layout could adapt to every subsidiary brand?

When we actually started creating high-fidelity screens and prototypes using real data, we realized the grouping methods were so different from these brands. Some had more categories in-breath, while others had more subcategories in-depth.

01

Understand the sale logic from each subsidiary brand

We started with outlining and summarizing the numbers and types of categories, subcategories, etc, hoping to understand why they were grouped like this. And most importantly, was there anything overlapping that we could apply for all brands?

02

Test to condense dimensions into comprehensible axes

It turned out a lot of the groupings were from a business perspective. During testing, users could only interpret certain brand-relevant attributes and product types without a second thought, which led us to condense all different dimensions into them. Surprisingly, it also solved another issue of avoiding duplicated display of the same SKU.

From 0.8 to 1

Crafting design details, as they count a loooot

01

Check very edge case on the list

02

The courage to stand for non-minor change

03

Handling UI details & Establish Design System

04

Final Design

05

Prototyping for stakeholder presentation

06

Design Documentation & Hand-off

From 0.8 to 1

Crafting design details, as they count a loooot

01

Check very edge case on the list

02

The courage to stand for non-minor change

03

Handling UI details & Establish Design System

04

Final Design

05

Prototyping for stakeholder presentation

06

Design Documentation & Hand-off

tough Edge case

Unbalanced intersections can create large empty holes, resulting in display inefficiency

This was one of the tough edge cases we encountered. When designing for MAC (one of the subsidiary brands in MVP), the number of products in different intersections varied drastically because of the popularity concern. It created large holes for those who had minimal products or none, thus wasting a lot of the canvas and blocking user's scanning experience.

Advocate for a structural change instead of 'hard coding'

It was never easy to decide that this was not something merely solvable by design because of the internal aspects it involved. However, I still raised it to our teams and stakeholders because it affected user experience a lot and it could happen in future brands as well. Through exhaustive discussions and testing, we finally broke the large groups while merged smaller groups to an average number backed up by testing evidence.

final test result

3 rounds

Final test results reflected we accomplished design goals well

100%

Liked New Solution

96%

Task Completion

02min

Average Daily Task Time

"Definitely love to see more branded visuals… I'm so excited about how it'll look ultimately!"

"Never thought I could use it just like at work!"

ui & style guide

Swap style libraries to shift branding for each subsidiary brand

As much as we wanted to maintain the consistency for the platform, each brand still needed to be shown according to its unique brand guide. Apparently, customizing the style for each component was unrealistic. Thus, we moved to a swapping method with colors, gradients, and images to achieve an appealing result with limited effort from both design and engineering perspectives.

final design

Example flow: Open a visualization & drill into a product (Jo Malone)

impact

Within 1 month after launching, it improved user productivity by 92% across 15 countries among +10K users

"The lipstick shade buckets and undertones are 'perfect'…it'll make things SO MUCH EASIER!"

— ELC Global Brand

"I had no idea there could be Jo Malone fragrance notes dancing overall the place!"

— ELC SVP/GM North America

takeaways

What went well? What could be done better?

  • Led regular retros helped team remove obstacles along the process

  • Polished presentation skills to greatly facilitate the communications between execution teams and stakeholders

  • Led regular feedback sessions to help other designers build style and interaction consistency

  • Wish could have another round of user testing to record iteration backlogs for the future version

  • Wish to apply a more efficient team resource allocation strategy to further streamline the process

Hope you enjoyed reading!

Hope you enjoyed reading!

CHAT · LEARN · CREATE · BUILD · HELP ·