Redesigning the Estee Lauder Concept to Market App Suite - Corner Stone

Introduction

Estée Lauder is a global leader in beauty products with over 25 brands. Growth has been exponential and brought with it the need to reassess their aging business software called C2M (Concept to Market).

As one of two designers working on the project, it was my role to improve User Interactions + define the Visual Design to create a cohesive, modern suite of web applications. We call the app suite “Cornerstone”.

Background

Estée Lauder is dependent on their C2M desktop applications. There are 20 apps in use on a daily basis to create their entire line of beauty products. They provide everything from new product codes, perfume packaging outlines, product testing and safety, quality control, design specs and final regulatory sign-offs by business leaders.

My Role

I am the Lead UX/UI Designer working in an agile team. The daily team consisted of a Technical Director, Business Analysts, Business Users, Subject Matter Experts, UI & Backend Engineers, Scrum Lead and Project Manager. I met weekly with key stakeholders like the Solution Architect, VP of Operations, and a variety of team leaders to keep everyone in-step with the latest progress and expectations.

Timeline: June 2019 – Present

Responsibilities: Product Analysis, User Interviews, Information Architecture, Low and High Fidelity Mockups, Prototypes, Usability Testing, Style Guide, Visual Hierarchy, Iconography, WCAG 2.1, UI Component Library

Tools: Sketch, Figma, InVision, Adobe CS, Zeplin, Jira, Confluence, MS Teams

 

I met weekly with key stakeholders like the Solution Architect, VP of Operations, and a variety of team leaders to keep everyone in-step with the latest progress and expectations.

The Problem

I met with several business analysts and daily users to review Estee’s legacy desktop applications. I collected a library of the various UI elements. I noted similarities and differences between each of the applications.

The apps were built over a span of 10 years and it was apparent that legacy lacked a consistent design language. Colors, typography, interactions, navigation, forms, tables, alerts and UI components were just some of the inconsistencies found.

 

The apps were built over a span of 10 years and it was apparent that legacy lacked a consistent design language.

What is a design language? Why is it important?

A Design Language is a set of principles and rules that guide an applications visual identity. This ensures that the designs are unified and consistent.

 

The three main elements of a design language include:

Interviews with engineers, stakeholders and users provided further insights

  • Developers & UI Engineers were designing the new applications like the wild west. We needed to provide them with a set of design guidelines and rules to help them succeed.
  • Stakeholders needed to be aware of the changes being implemented (What does the future look like) and help manage their expectations in discussing upcoming projects.
  • Users struggled through their daily grind. They wanted a more intuitive and user friendly approach to the next iteration of apps. A framework built on modern standards and interactions that felt familiar would lessen legacy pain points.
  • Every user was of a different age and capability. We used web accessibility and WCAG 2.1 guidelines as an important marker of success for Estee’s new Cornerstone program.

Design Exploration

Mood Boards - High Fashion meets Business User

I like to start my design process as flexible as possible. There is a steep learning curve when working with any new company and assuming too much can be hazardous. So I decided to present mood boards to stakeholders to kickoff a discussion on the look and feel for Cornerstone.

I learned:

  • We needed to remain brand agnostic. Any preference to a single brand (ex. color, typography, images) would create friction.
  • Cornerstone is for daily business users and needed to be high tech but accessible by a variety of users with varied capabilities.
  • Colors have meaning. We needed to be neutral in our CS application choices. Each group app has its own color coding and flags.

During my presentation I asked those in the meeting to use sticky dots and place a vote on their favorite board. It was a lot of fun and we had a preference for the dark purple board (1st position).

Design System and Style Guide

Building 20 apps is a huge undertaking and could have overwhelmed us quickly.

The two main issues we faced were a short timeline and limited development resources. There was no way to build all the design components and patterns from scratch. We needed to design at scale across apps and share that knowledge with an agile team.
This is why we decided to use a design system. A design system is a set of standards with reusable components and patterns that can be used at scale. This solved our time and resource issues and allowed me to work on more complex issues in Cornerstone.

With the AntD design system chosen, I created a Style Guide to define all the elements within our design system, what they would look like and how they would be used.

UI Elements - Early Iteration

The style guide was a key communication piece for Cornerstone. It allowed various stakeholders, from business leaders to remote dev teams to be on the same page when having a discussion. It was an important part of the project’s overall success.

With a timeline of about a month, I created the official “CS Style Guide for Cornerstone 1.0”

Download the CS Style Guide
CS Style Guide Preview

The CS Style Guide contained all essential UI and patterns to support an efficient build cycle. The visual elements would go into mockups and interactive prototypes for all 20 apps. It also provided important html, css and javascript code to engineers via Zeplin.

Next Steps

We received an incredibly positive response from the Style Guide. It was very useful early on in the project lifecycle, to align imagination with the tangible. We defined a template and information architecture for every screen; this included global, application and on-page navigation. We aligned the guide with WCAG 2.1 guidelines to meet a variety of user capabilities. Overall it was a huge win for our agile team.

Cornerstone was by far the largest project I have tackled as a UX/UI Designer. I learned a lot about working within a large and successful company like Estée Lauder. I learned to make the best choices with the resource constraints that existed. I made decisions based on user, business and developer feedback and always provided options to solutions. Options sparked conversations and improved the final product.

High Fidelity Mockup Examples