Clickable prototype by Figma

Wonder is an e-commerce website designed to sell makeup & skincare products. The project includes a product filtering system and a guest checkout flow.

Duration: 2 Months
Tools Used: Figma, Adobe Photoshop

The Role

UX/UI Designer

The Problem

Improving the guest checkout experience for customers and streamlining the filter/browsing process for the business' products.

The Solution

Prioritizing the sales, deprioritizing account management

Challenges & Research

Users (and potential users) of the cosmetics site Wonder tend to begin the process of making a purchase, but more often than not it isn’t completed. Research data showed:

50% of users open an average of 7 item pages before abandoning the site altogether
70% of users who do add to the cart abandon the site before making a purchase

‍Wonder’s site currently only allows registered users to make a purchase, so if a new customer wants to purchase a product, they are required to make an account. In order to retain customers, they will need an easier process for choosing a product and a guest checkout which will allow them to complete a purchase with no strings attached.

Research for this project was conducted with 3 different methods: a questionnaire, competitor analysis, and reviews of relevant articles. Results from the questionnaire showed that users’ highest priority when shopping for cosmetics is their personal skin type and how well it will work on them. Users want a product that will be worth their time and will also use things like brand loyalty or the opinions of others to help inform their decision so they don’t invest in a product that doesn’t work. Secondary article research and competitor analysis showed the most successful guest checkout systems were ones that users could access at the same point as signing in or registering.

Solutions

Inspired by the user experience of the sites used in the competitor analysis, I created 2 user flows based on the 2 major issues needed to be solved.

Users who are in the browsing stage will have a method for refining the results of the different categories, and then from there will have details on specific product pages designed to help them make an informed decision.

Users who wish to use a guest checkout will have it immediately presented to them upon checkout, as a second option (the first being for registered users to sign in). Should the user change their mind, there will be an option to create an account right before the order is confirmed, using the information already inputted.

Visual Identity

Based on the site’s brand attributes (Cleanliness, Mindfulness, Sustainability, Quality), I created a style guide which would best reflect these terms. For text I chose a font with a bold weight but soft, sans serif design which balanced well with the simple Open Sans body text. Because it is a cosmetics company and the customer base is more likely to be women, I chose a feminine color palette of light pink accented with a dark golden yellow. However, to keep with the Cleanliness attribute the UI mostly uses a neutral black and white design, with the other colors used sparingly to give warmth to what would create an otherwise cold and clinical look.

Testing

Testing was conducted in 2 phases, with 5 participants per phase. Changes from testing are shown below (click images to enlarge)

A link that allows users to skip to the part of the page that holds customer reviews was made more visually prominent

A greater difference was made between the “Quick Look” method of browsing and the link to the fully detailed product page

An interaction was created to alert users that the password they’ve entered has been saved.