Project Overview
Outlier Beauty is an all-natural body care brand launching in 2020 with their first product, a natural deodorant. My team and I were hired by Outlier to design a responsive e-commerce platform, with a focus on the mobile breakpoint.
The Brief
Learn about the natural body & skincare space and make design recommendations for a responsive e-commerce platform. As a new brand in an already crowded market, Outlier’s founder wanted the platform to have a simple path to checkout while communicating clear brand values to their target audience – millennials who care about what they put on and in their bodies.
The Team
Amani Sheikh, Research & UX/UI Design, Client POC I Julia Kaufman, Research & UX Design I Lina Raeva, Research & UX Design
UX Tools & methods
Research: Competitive/Comparative Analysis, Market & Industry Research, Feature Analysis, User Interviews, Usability Testing, Affinity Mapping, Persona Development, Journey Mapping
Design: Design Studio, Feature Prioritization, Wireframing (Sketch), Interactive Prototype (InVision), Specifications Documentation
Timeline
2.5 week sprint
Research
In order to design an effective e-commerce platform for Outlier, it was important for us to understand user behavior around using & purchasing natural body care products. We wanted to understand how users discovered new products and why they decided to use certain brands over others.
We began by sending out a screener survey so we could identify these users. From here, we conducted interviews with six survey respondents who said they used natural body care products and thought that natural products were important. I led a number of these interviews and asked a series of questions with the goal of uncovering user behavior as it related to these products.
Here’s what we asked them about:
Key Research Findings
After concluding our interviews, we synthesized our research through affinity mapping and found that users shared some common beliefs and behaviors about natural body & skincare products, such as:
“I don’t want to have to guess what’s in a product when I look at the label” - User 3
Persona
We used these findings to construct a user persona so we could clearly define the goals, needs, pain points and behaviors of Outlier’s target users and ensure that we were designing solutions that solved for these needs. Putting together a persona was also helpful to share with our stakeholder to ensure that we were on the same page for who we were designing for.
Problem Statement
When users are looking to purchase natural body care products, they want to know that these products actually contain natural ingredients, as their labels can be misleading.
Lily doesn’t trust that natural body care products are actually natural. How might we clearly communicate the ingredients of Outlier’s products to help her be confident when making her purchase?
Competitive Analysis
How do other brands successfully communicate the value of their products? We wanted to learn about the features that other brands use to convey their effectiveness and showcase the ingredients in their products.
We looked at a range of body and skincare brands and analyzed some of the features and design techniques they used to showcase their products.
We focused on:
Brands that offer natural products and were mentioned by interviewees
Brands that were mentioned by our stakeholder
Natural Body Care Brands (Competitors): We observed several key features across these brands that help communicate the value and effectiveness of their natural ingredients.
1. Build credibility by providing transparency around their ingredients
2. Specify their key ingredients and what they’re used for
3. Separate customer review section below each product for easy information & feedback discovery
Other Consumer Brands: We looked at other body care brands that were not direct competitors to identify how they built trust with their users.
1. Provide detailed description of key ingredients and what they do
2. Include short teaser video of product use information and benefits
3. Build credibility by highlighting select user quotes and separate customer review section
Feature Prioritization
After conducting our competitive analysis and looking at the goals and pain points of our user persona, we identified a list of features that were essential for Outlier’s platform.
These included: Brand Statement / Mission, Detailed Product Description, Key Ingredients List, Customer Reviews / Rating, Directions of Use, Videos of Product in Use, Hi-Res Image of Product Texture & Formula
Design Studio
After identifying these features, we conducted two rounds of design studio to start sketching potential screens that incorporated these elements. When doing so, we focused our sketches on 3 pages – Home Page, Product List Page and Product Details Page. We decided to focus on these in order to capture a user’s path to conversion. Once we landed on our final paper sketches for each screen, we translated these into our mid-fidelity wireframes.
Mid-Fidelity Wireframes
1) Home Page: From our research, we know that it’s important for users to align themselves with brands who are socially conscious and to have clarity around the ingredients they put on their bodies. As such, our goal for this page was to focus on the products, their unique ingredients and Outlier’s brand values.
2) Product List Page: We wanted to keep the product list page simple, once again focusing on the product and highlighting its ratings and reviews which we know to be important to the user.
3) Product Details Page: Our goal for the product details page was to emphasize the product description, provide transparency around the ingredients used and showcase customer reviews and feedback.
Mid-Fidelity Usability Testing
We tested our mid-fidelity wireframes on 5 users with the task of finding the key ingredients of Outlier’s deodorant. While 5/5 users completed the task of finding the deodorant’s key ingredients, all 5 users struggled with the task.
Users did not intuitively tap Shop Now to begin the task as they associated this button with making a purchase whereas they were looking to get to the Product Details page.
They tried to tap on the image of the deodorant, however this was not functional on the prototype.
Once they did tap Shop Now, users were confused by the Product List Page - they initially thought they were on the Product Details Page & and didn’t think it made sense to land on a page with other products as their intention was to find ingredients for a specific item.
Lastly, users were not sure how to proceed - their inclination was to tap on the image to reach the next page, however since this did not work on the previous screen they hesitated here.
Hi-Fidelity Prototype
After uncovering the above usability issues, we updated our wireframes accordingly to create our hi-fidelity prototype. I led this phase of our design process and created the UI elements for Outlier’s mobile website.
1) Home Page Design Changes:
Shop Now was changed to Shop All in order to provide clarity for when users land on the following page
The profile icon was moved to the hamburger menu in order to simplify the site design
2) Product List Page Design Changes:
A page title was added for more clarity
The image carousel was removed as it was confusing to users, who thought that tapping through these would reveal different products and not additional images of the same product as was intended
3) Product Details Page Design Changes
Used text to distinguish between the two product options
The Add to Bag button was enlarged
Hi-Fidelity Usability Testing
We tested our hi-fidelity prototype on 5 users, using the same task of finding the deodorant’s key ingredients. While all 5 users completed the task with more ease this time, we still discovered some interesting usability issues.
We found that 4/5 expected the image of the deodorant on the Home Page to link directly to the Product Details Page.
In fact, users expected the image and the Shop All button to link to 2 different pages - they expected the image to take them to the Product Details Page and the button to take them to the Product List Page.
As such, we updated our prototype so that these two things would navigate to different pages since this came up in both rounds of testing.
Designing For Desktop
After updating our mobile prototype, we went on to create the desktop breakpoint of Outlier’s platform. This included the build out of the primary navigation, which included All Products, Our Story, Blog, My Account and Cart.
Final Thoughts
Working on this project for Outlier Beauty taught me the importance of advocating for the UX process. While a particular method or design decision might be obvious to me, our power as UX designers lies in our ability to tell a story so our stakeholders can understand the ‘why’ behind each decision we make. This type of clear communication between stakeholder and designer leads to more thoughtful products that put the users first and help align both business and user goals and ultimately allows us as UX designers to continue to build products that serve a need.
If you’d like to read more about this project, you can find my full case study on Medium.