The Soapery

Summary

Redesigning an eCommerce website to improve the user experience and user interface.

Project Role

UX Researcher, UI Designer

Project Length

2 days

Year

2021

Background

What is The Soapery?

The Soapery is a UK based company that supplies people with natural skin and hair care products that can be made into different products such as scrubs, moisturisers and hair treatments.

The Challenge

As a frequent customer of The Soapery, I have encountered some issues when purchasing products from their website. The presentation of the website could be clearer and more aesthetically pleasing. I will focus on redesigning the landing page and product pages for this project.

I gave myself 2 days to complete this project from start to finish.

Project Goals

To improve the user interface of the existing website

To focus on creating an accessible user experience

To further develop skills and understanding of the UX process

To create a functional eCommerce platform that complies with UX methodologies

To increase sales of The Soapery products

Design Process

To improve the user interface of the existing website

To focus on creating an accessible user experience

To further develop skills and understanding of the UX process

To create a functional eCommerce platform that complies with UX methodologies

To increase sales of The Soapery products

Discover

In order to understand the pain points users may face on the existing website for The Soapery I decided to annotate a screenshot of the home page to highlight areas which could be improved.

Competitor Analysis

Findings

Navigation bars placed at the top of the page

Home page structured in sections which highlight different sections of the business

Detailed footers at the bottom of the page contains key information

Define

The purpose of the define stage is to gain a deeper insight into the problem you are trying to solve.

User Personas

When designing products, Personas may be created to represent target users of your products. Personas can help designers to get to solutions faster. I created two personas.

Develop

Crazy Eights

Using Invision Freehand, I gave myself 8 minutes (1 minute per screen) to sketch out 8 different screens ideas. The Crazy Eights technique allows you to generate as many ideas as possible within a short timeframe. I choose this technique to get into a creative mindset, it allows me to think more creatively.

Wireframes

Design System

Accessibility

Colour Palette

I kept the colour scheme simple and I choose colours that reflected the brand of the company.

It is important the colour contrast complied with the WCAG guidelines. I also took into consideration that some autistic people have a sensitivity to bright colours so I avoided anything to bright.

Typography and Text Size

I chose two fonts that are readable and scale well. The smallest text-size used was 20px in order to ensure that it was more accessible for visually impaired people.

Layout

Another goal of this redesign was to achieve consistency and clarity within the structure of the website which can help the website be more 'autism friendly' by removing distractions and helping them to better process the information on the page.

Deliver

Header

I decided to move the side navigation to the top so that the website users would be able to quickly see all the sections of the website without scrolling.

I decided to remove the banner seen in the first image and replace it with a nice large image showcasing what the website has to offer.

Accessibility - The CTA button focuses the attention if the website user and helps them to understand the flow of the user journey.

Featured Products

A major pain point of this website was the layout and the alignment of the elements of the page. As shown below, I aligned the images to a grid structure with consistent labels underneath each image.

According to the Law of Proximity objects that are near each other tend to be grouped together.

Blog

I decided to add a snippet of the blog posts on the home page so browsing customer can have a quick read which may lead to them buying certain products.

In accordance with the Gestalt Law of Common Region, elements tend to be perceived into groups if they are sharing an area with a clearly defined boundary.

Note: In order to improve this section I would probably add a 'read more' button so users can go directly to the blog page. Furthermore, I would probably change the layout so that both images are parallel to each other and the text is underneath with may help with the flow and consistency of this section.

Footer

I moved the search function to the header section so that website users do not have to scroll or hunt for the search feature. I also categorised common e-commerce website links into the categories, 'Helpful Information,' 'About Us,' 'Social Media', and 'Sign Up to Our Newsletter.'

Product Page

The product page was aligned into two columns. The left column contains the images of the product and the right column contains the product information. I changed the drop down menu items into a visual select size option in which the selected size turns highlight blue when selected and the price changes are shown below.

Reviews

I condensed the reviews so that the two top reviews are shown and the user can select 'View More' if they wish to continue reading.