My Role

My role was Lead UX Designer on the project. Since we had a very aggressive timeline for this project and a design-focused client, we modified our traditional approach to make sure we could deliver on time and in scope.

Instead of creating wireframes for each page, we conducted workshops internally and with the client to sketch out each page. Rebecca Seltzer (the Art Director on the project) and I worked very closely together as she turned the sketches into the final designs.

Understanding their product offering

It was important to understand more about Milk Makeup’s products so I could help craft a user experience that would speak to their users. Because their products have quirky names and have innovative packaging, it’s difficult to immediately understand what each product is in traditional makeup terms. In order to reach their desired audience, it would be essential to provide a translation of their product offering that maps to traditional makeup language that users would understand. We conducted a card sort that get to the root of this issue, which helped us to narrow in on our approach.

Skipping the wireframes & workshopping solutions

For this project, we knew that we needed to work closely with their internal team in order to understand their complex product offering as well as their future plans for the site. We conducted several workshops (card sorting and UX sketching workshops) in order to answer some of these outstanding questions.

Since we had such an aggressive timeline for this project, we skipped the wireframes and sketched our ideas with the client during our UX sketching workshops. After our workshops, we went straight to the design phase with a high level of UX consultation on UI elements throughout the design process.

Uncovering content and weaving it throughout the path to purchase

Milk Makeup has a lot of beautiful images, editorial content, and product information that had previously been tucked away in corners of the site that were not often visited. We wanted to incorporate this content in a meaningful way throughout the path to purchase that could add value to users by providing additional product information and inspiration at key points in the user journey.

To achieve this, we added more depth to the homepage by creating modules that surfaced this content; we brought ingredients and other product information to the forefront on the product detail pages; and we added interruptors on the product listing page that added visual interest to the grid and could link to blog articles and other content on the site.

Adding a short description & benefits for each product

We knew that there had been a disconnect between in store shopping and online sales. In stores like Sephora, Milk Makeup was flying off the shelves, but online sales were less than ideal. We went to Sephora to understand what might be causing this disconnect. It became very clear that the sales people helping customers in stores were helping them navigate the Milk Makeup product line and its many benefits, while online it was hard to understand what the products were for and their benefits.

Our solution was to add product subtitles that explain what a product is in more traditional makeup vocabulary and add three unique features for each product that help users understand its benefits. In the example below, Sunshine Skin Tint is a 'Preservative-free foundation' and it's three benefits are 'Preservative Free, Dewy Finish, and SPF 30 Protection'.

Streamlining the path to purchase with a solid information architecture

We created an information architecture that helped users more easily navigate their unconventional product names in a way that retained their brand personality, but categorized them in familiar language. We also created a visual navigation as well so users could visually associate the packaging with the more traditional makeup category names.

Creating a shoppable video player

The client wanted to create a shoppable video player that would highlight the products being used in the video. We knew that this would be no easy task. To find the best solution, we had to understand what was possible from a development perspective. I led a sketching workshop with our design and development teams that helped us all come to a solution that was responsive, intuitive, and draws a clear connection between what's seen in the video and the products they are highlighting.

Laying the foundation for triple digit growth in less than a year

Since the site was launched in September 2017, Milk Makeup has seen triple digit growth in ecommerce sales. A driving force of this monumental growth has been tied directly to our work: “Now, Milk Makeup offers its customers a beautiful shopping experience that includes innovative features such as personalized content, shoppable video content and makeup tutorials that are embedded into product detail pages.” PR Newswire.