My role was Lead UX and I was responsible for research & analysis, information architecture, UX workshops with the client, business strategy, and UX consultation with our designers and developers.
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, Rebecca Seltzer (the Art Director on the project) and I worked very closely together to sketch out each page on a whiteboard. She took those sketches and turned them into the final designs with close UX consultation.
Understanding their product offering
As someone who does not wear a lot of makeup, it was important to understand the products they were selling so I could help create a user experience that would speak to their users. Because their products have quirky names and are pushing the limits of how traditional makeup is packaged and used, my task went beyond understanding traditional makeup categories and the challenge became clear: in order to reach their desired audience, it would be essential to translate their product offering to language that the traditional makeup consumer would understand. We conducted a card sort that got to the root of this issue and helped us to narrow in on our approach.
Workshopping solutions & skipping the wireframes
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 what they had in mind for the site. We conducted several workshops (card sorting and design sprints) in order to answer some of these outstanding questions and make sure we were answering the right questions through our designs.
Since we had such an aggressive timeline for this project, we skipped the wireframes and sketched our ideas out in workshops with the client. 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 has a lot of beautiful images and editorial content 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.
Focusing on the mobile experience
We knew that a majority of traffic from their site was coming in via mobile traffic, so creating a site that was truly seamless between desktop and mobile was critical to the success of the site. While I always design in tandem with desktop, we knew that this was going to make or break the site and gave it extra attention during our workshops with the client.
Adding microinteractions that offer functionality, product information, and brand personality throughout the experience
We knew that for a brand like Milk, microinteractions that added functionality could elevate an otherwise traditional ecommerce experience to one that captured Milk’s quirky personality. Small moments like interactive swatches that allow users to preview colors on the product listing page help to offer additional product information that would otherwise require an additional click.
We added a scrolling tickertape module above the footer that links to their blog and allows for an on-brand interaction that's fun and requires little effort to develop or maintain. branded interaction and movement with little effort.
We also created a button state for the "Add to Bag" call to action that temporarily changes the button text to “Added” when a user adds a product to their cart - this is especially helpful feedback for mobile.
Streamlining the path to purchase with a solid information architecture
We created an Information architecture that helped users more easily navigate their quirky named products in a way that retained their brand personality, but categorized them in familiar language. We did this by adding short product descriptions after the product names that would give context so users would know that a product like "Blur Stick" is a primer and "Cooling Water" is a de-puffing stick.
Throughout the site, we made an effort where possible to increase the scannability so users could spend less cognitive effort navigating and more time focused on the products and content that we sprinkled throughout the site. This manifested itself through our visual global navigation for desktop, the product subtitles that explain what a product is in more traditional vocabulary, and the three taglines for each product that help users understand what it offers at a high level on the product detail pages.
Creating a shoppable video player
Milk 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 intimately what would be technically possible from a development perspective. We could design many different solutions that would work in theory, but most of those solutions would require hours and hours of development time that we didn't have. With these constraints in mind, 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.
Anticipating what users want at all points in their journey
This module is a commitment to anticipating what users want at all points in the journey. For users watching a makeup tutorial, being able to easily find the products that interest them takes away the hassle of trying to find that product outside of that context. This thoughtfulness is part of what inspires brand loyalty and trust in a highly competitive market.
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.