Goals
- Provide shopper with a best in class experience
- Provide near identical experience for mobile and desktop
- Update the look and feel to a luxury studio
- Give shoppers clear navigation for personalized selection
- Make the experience fun!
Inspiration
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.
Insights
Contextual Inquiry
01
Most shoppers picked up one item at a time, carefully reviewed the item
02
Most shoppers knew what make-up category and type wanted
03
All products were in boxes. Organized, aligned and stacked organized by category
04
Color is very important! Shoppers often test them as part of the shopping process
UX Design Audit
Exploration
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.
Insights
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.
01
Carousel is confusing
Solution: Remove carousel. Incorporate scrolling behaviors for responsive design
02
Copy is inconsistent
Solution: Streamline and unify copy descriptions and titles, more clear CTAs
03
Product findability is difficult
Solution: Organize products into clickable categories and provide filtering options
04
Color selection visibility
Solution: Color selection improvement by removing drop down and adding swatches
Research
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.
Insights
- 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
Synthesis
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:
- Isolate shopping action – Reduce friction from website pop ups or recommended products
- Create a customizable “Studio” environment for the user to select products
- Design a playful interface with immediate visual feedback and the ability to change based on scroll (tap) and select.
- Give users a digital “ makeup counter experience”
Design Exploration
Wireframes
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.
Iterations
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.
Conclusion
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.
