Bare Minerals

Build Your Kit Feature

I was tasked with building a new experience for Bare Minerals customizable kit package. While the kit is an existing feature on the site, the company found most shoppers did not complete the process. In this project I designed a modern elegant solution that ties together business goals of a clear uncomplicated process and user goals of building a personalized make up kit

Client: Bare Minerals
Role: : UX/ UI Design, Research, Strategy
Project Type: eCommerce
UX Audit
Competitive Research


  1. Provide shopper with a best in class experience
  2. Provide near identical experience for mobile and desktop
  3. Update the look and feel to a luxury studio
  4. Give shoppers clear navigation for personalized selection
  5. Make the experience fun!


How do people shop for makeup?

Getting started is all about inspiration. The best place to connect with make-up fans and conduct ethnographic research is Sephora. I visited a large location on fifth ave to to see how shoppers interact with products.

The large selection of products and brands gives great insight into the shopping process. While each brand has individual signage and branding, all products were shelved and organized in the same way.


Contextual Inquiry


Most shoppers picked up one item at a time, carefully reviewed the item


Most shoppers knew what make-up category and type wanted


All products were in boxes. Organized, aligned  and stacked organized by category


Color is very important! Shoppers often test them as  part of the shopping process

UX Design Audit


Before creating concepts for the new design, I wanted to gain a better understanding of the current Build Your Kit shopping experience. UX Audit of current design included a heuristic evaluation of the user flow, controls, indicators, product and color selection, product descriptions.


Design Opportunies

Overall there were some great insights learned from reviewing the current experience. I discovered four top concerns on the current design that would guide my design thinking and brainstorm solutions for the new design.

Carousel is confusing

Solution: Remove carousel. Incorporate scrolling behaviors for responsive design

Copy is inconsistent

Solution: Streamline and unify copy descriptions and titles, more clear CTAs

Product findability is difficult

Solution: Organize products into clickable categories and provide filtering options

Color selection visibility

Solution: Color selection improvement by removing drop down and adding swatches


Competitive Analysis

There are tons of eCommerce companies offering customizable shopping experiences, but how can these solutions be relevant for cosmetics? I chose to look at how beauty industry leaders, an iconic luxury brand, and a revolutionary retail giant give their customers freedom to build customizable products.

  • The strongest customization/ personalization was based on a modular layout
  • All customization lead the user into a personal experience
  • The best experiences let you recover and edit throughout each step in the flow

Design Strategy

The research phase provided so many insights that would inform my design. Combining the shopping behavior study, ux audit of the current site and the competitive analysis gave me a great direction and lots of inspiration.

The areas I focused on:

  1. Isolate shopping action – Reduce friction from website pop ups or recommended products
  2. Create a customizable “Studio” environment for the user to select products
  3. Design a playful interface with immediate visual feedback and the ability to change based on scroll (tap) and select.
  4. Give users a digital  “ makeup counter experience”
Design Exploration


When building out the experience I focused on a mobile first approach. The initial design iteration is lays out the product flow for product selection and color selections. On the second iteration I further refined the layout and selection UI. The third iteration I added a menu for the user to view their shopping bag selections and final confirmation screen.

Mobile Wireframes – Iteration1
Mobile Wireframes – Iteration 2
Mobile Wireframes – Iteration 3

Usability Testing

I created a clickable prototype with the wireframes created above. Each tester brought up valuable insights that impacted the design. The top finding are listed below showing the design iterations.

Product Focus

Users mentioned that the quick view button on Mobile obstructed the product view. I adjusted the UI and changed the quick view button to a plus sign below the product image.

Navigation Bar

The Navigation Bar was the design element received the most feedback. Through the iterations I adjusted the design to make the navigation bar a central control for more functionality.

Shopping Cart

Users were confused as to whether their selections were adding into the shopping cart or view the selected items while building the kit

Build Your Kit

Clickable Prototype

Scenario: You are building out your very first Bare Minerals custom kit. After choosing the option to select four items the studio experience begins with choosing a foundation.

Desktop Mock Up

Translating the design to desktop, I maintained the navigation and messaging. Moving the product selector and product confirmations to the side creates clear orientation for the users stage in the the shopping flow and which products they have selected.

User Impact

A simplified shopping experience with clean and consistent copy. Product selectors provided with large images and more realistic color selections

Business Impact

Elegant design that promotes brand consistency, reduces shopping distraction for increased conversion. Updated look and feel.


Beauty companies are know for having strong brand identities and very loyal customers. Cosmetics are personal, these products help people express their individuality, creativity and can help them build self esteem. In other words people return to products and experiences that appeal to their freedom to express their individuality.