Global Redesign of Maybelline


A modular design system suitable for flexible market needs from North America to China.


Brief
Create a way to make Maybelline the leader in “make up know how” and support beauty trends with thought leadership and expert knowledge.
The solution has to be flexible to accommodate small and large markets across the globe.

Activities
- Information gathering
- Client workshops
- Define features and requirements
- Flows and IA
- Wireframes and module library
- User testing


Background
Prior to this engagement I had been a working on branded experiences and some editorial projects at Code And Theory. This included successfully creating a flexible design system for Maybelline’s franchises (think special product lines) which provided us with some insights and a good client relationship from the beginning of this project.



How
Through weekly client workshops we identified goals and requirements for the new site experience. We interviewed and worked closely with the U.S. market and interviewed different global markets to make sure the modular design system could scale to different market needs.

This project was heavy on feature mapping, tons of collaborative sketching, wireframing, and client workshops.



Role
As a UX Designer I got my hands dirty converting findings, data, and user mindsets into concepts, and helped establish strong collaboration between strategy, creative, tech, and the client.

I helped push the project forward by sketching & wireframing with internal team and numerous client workshops.

User Experience Designer, Code And Theory



Insights

By understanding the user and what she expects to find when she is navigating the world of digital makeup & beauty, user needs were established and aligned on with client involvement.

(Note: Excerpt from deck, lead by Strategy)

Maybelline - site
Stakeholder Interviews

Nine global markets were interviewed to understand differences and core needs of the makeup & beauty market from Canada to China

Maybelline - site
From Journeys to Features

By understanding the different user intents, features were discussed and exemplified in order to give the user a meaningful experience.

(Note: Excerpt from deck, in collaboration with Strategy.)

Maybelline - site
Modular Design System

Explaining the modular design system to show how a site easily can scale when cards and modules, or "legos" (an analogy the client and stakeholders liked and started to use), sits at the core of the responsive site experience.

Maybelline - site
Structure and Feature Mapping

High level site map helped map out the different page types.

Experience goals, content pillars, and user intents helped us stay on track when defining the different feature criteria’s.

(Note: Excerpt from deck, in collaboration with Strategy.)

Maybelline - site
Page Requirements

Page objectives for each page type were developed, and page requirements used the defined features to fulfil page objectives as we mapped out the page requirements.

Maybelline - site
Sketching and Wires

Quick-sketching was a big part of this project, at several times I made sure to involve visual design and development folks and talk them through how features and page requirements could come to life on desktop and mobile.

We used this work to create wireframes that we would walk the client through in workshops and presentations.

(Note: Tight-knit collaboration with Creative, Development, & Strategy.)

Maybelline - site
Maybelline - site
Result

When the visual design for key pages was set we ran user testing to see if there were any usability issues, and if navigation and nomenclature was intuitive. Test participants were globally sourced since we wanted to make sure we designed for more than the American user.

The result and launch was well received globally across markets from Canada to China, England to India whom embraced the new modular design system and made it there own.

Maybelline - site
Maybelline - site

This project helped me grow in many ways, taking ownership of UX activities and more so presenting the UX thinking internally and externally.