Bella Cosmetics — eCommerce Case Study
Timeline: 5 weeks (June 06 — July 10)
My Role: UX/UI Designer: Comparative Analysis, User Research, Synthesizing Research, Style Guide, Wireframing, Visual Design, Prototyping & Testing
Project Type: Bootcamp Project — an eCommerce Scenario that calls to design a digital product that focuses on improving sales conversion.
Solution: An eCommerce site that provides a Product Comparison Tool and a guest checkout option that improves the conversion from browsing products to completing the checkout process.
Bella Cosmetics sells cosmetics and skincare items on their desktop web experience. The Product Manager has found that users are opening item pages without adding the items to their cart or abandoning their carts at the account registration page.
What is the goal of this project?
The goal is to improve the conversion from browse to completion of checkout to increase revenue on the Bella web experience.
What are the current user pain points?
- 50% of users open an average of 7 item pages and abandon the site without moving any items into the cart
- Users are unable to determine which item is best based on relative features
- 70% of users who place an item into their cart do not complete their purchase
- Abandon at the registration page because they must make an account to purchase
Identifying these pain points allowed me to decide on which UX research methods to utilize and what questions to ask.
Research
Methods: Comparative Analysis, Interviews
1. Comparative Analysis
What makes a successful cosmetics eCommerce site? To figure this out, I took a look at Sephora, Ulta, and Nordstrom to see what options and information they offer their customers. I also included MVMT and Apple in the comparison as good eCommerce examples. Apple also has Using a Google Sheet, I synthesized elements across the sites on what I believed made them successful in sales conversion.
What I learned:
- The information listed on the product pages were similar across cosmetic sites (e.g. ingredients, how to use, related products) — customers are looking for and expecting similar information on these sites
- Other than Apple, all sites offer a guest checkout option that captures email — guest checkout likely reduces the barrier to complete purchase
- Plenty of photos are included for each product — provided the customers with a better idea of the product
2. Interviews
After seeing some good examples of cosmetic eCommerce sites, I wanted to learn from specific user experiences. I reached out to people who are comfortable with shopping online and have bought cosmetic products online. I was able to speak with 5 women ranging ages 23–40 who participated in the interviews.
What I wanted to learn:
- What do people look for when they shop for cosmetics?
- How do people decide which products to buy?
- How do users feel about signing up for an account to complete a purchase?
What I learned:
- Participants find which products to buy through sources such as beauty websites, social media, or word of mouth
- Most product research is done on external sites such as Youtube reviews or articles, so users arrive on a website with product in mind
- Reviews with photos are extremely helpful and necessary when evaluating products
- When deciding between two products, price, reviews, and brand reputation are important factors
- All participants would prefer a guest checkout option on websites that they probably won’t visit again
It was interesting to see the similarities among the participant responses. They especially agreed on needing a guest checkout option and reviews with photos.
Problem Statements
After synthesizing my research, I was able to figure out what problems I wanted to focus on.
How might we help users determine which products are most suitable for them?
How might we help users complete their purchases securely and with ease?
Hypothesis: If I implement a product comparison feature and design a guest checkout option, then users will be able to decide on which products to buy and successfully complete their purchase.
Clarifying the hypothesis allowed me to identify which user flows were necessary for the solution.
Design
User Flows
From the interviews and generating the problem statements, I was able to identify 4 user flows that were necessary to meet the goals of this project.
- Browsing for a product — design an easy experience that allows the customers to quickly find what they’re looking for
- Reading product information and reviews — provide enough information and informative customer reviews on the site to assist in helping the customer make purchasing decisions
- Comparing products — to help customers identify which product is most suited for them
- Purchasing/Checkout Process — especially building a guest checkout option to increase completion of the checkout
After identifying the user flows, I created a simple style guide for Bella before designing wireframes.
Style Guide
Colours
After reviewing some of the most successful eCommerce cosmetics sites, there were minimal colours used and typically a white background with a primary colour. I chose orange as my primary colour because I wanted to convey brightness, joy, and warmth. I wanted the contrast of the orange against the white background to draw attention to call-to-actions. The addition of the red accent colour was to add a pop of colour and to add a more energetic/playful feel to the site.
Type
The font families I chose to use on Bella were Lora for headings and Poppins for body text. I chose Lora which is a serif font because I wanted the site to appear professional and classy. I also wanted a clean and easy-to-read body text so I chose Poppins.
Low-Fidelity Wireframes Designs
Low-fidelity wireframes allowed me to visualize the solution to helping customers decide on a product and easily complete their purchase. I was able to determine the layout I wanted for the comparison feature.
Low Fidelity User Testing
To test my designs, I reached out to 5 participants and conducted the user tests over Zoom. The participants were all interested in cosmetics and have experience purchasing them online. 3 out of 5 user test participants were also part of the interviews.
What I wanted to learn:
- Do the product reviews provide enough information?
- Are the users able to use the product comparison feature?
- Are the users able to add a product to their bag and complete the checkout process?
Feedback from 5 participants:
- 3 of 5 participants — Want to compare more than one product,
- 2 of 5 participants — Do not want to have to type in the product name and would prefer an easier selection method,
- 3 of 5 participants — want to filter through reviews since there are so many reviews available,
- all participants — chose to go through Guest Checkout and found the process was easy to complete,
- 4 of 5 participants — commented on the colour scheme saying that the site presented a clean and nice look
Since there are not many cosmetic comparison tools available, these low-fi user tests taught me a lot about what needed to be improved on my designs. These findings allowed me to iterate for my high fidelity designs.
High Fidelity Designs
The main iterations that were done were on the Ratings & Reviews section and the Bella Comparison Tool.
High Fidelity User Testing
To test my designs iterations, I reached out to 5 participants and conducted the user tests over Zoom. 2 out of 5 participants were also part of the first user testing.
I focused more on testing the review section and comparison tool since the checkout flow was easy to use.
Feedback from 5 participants:
- 4 of 5 participants— were able to select products to compare easily; only 1 participant used the search bar within the comparison tool,
- 3 of 5 participants— Users commented on the sorting feature for reviews; 2 participants wanted to sort by 1-star ratings to see what bad reviews the product received
- All participants — commented on the reviews with photos saying that they find them helpful
Final Screens and Prototype
Final Thoughts
This was my first time designing an eCommerce platform and it was very helpful for me to reference all the successful websites. It was an additional challenge to me to implement an unfamiliar feature such as the Comparison Tool, but I took advantage of the user tests and learned a lot from the participants.
I found that customers shopping for cosmetics spend quite some time researching which products will work best for them. Since there are so many options, there are many things to consider before making a purchase.
Further Considerations
- Adapting this experience to a mobile platform — I learned from the interviews that users generally conduct their product research on their desktops, so they end up shopping on their desktops, but this experience could be designed into a responsive experience for multiple devices.
- I’d like to conduct more research on which comparison factors customers are most interested in
- Incorporating more payment options could accommodate for more types of customers
- Develop membership perks to increase customer retention could increase sales in the long run
