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.

• 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.

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).

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.

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”

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.

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.