Website redesign

Improving An E-Commerce Website

Tools Used

Brand Name
Brand Name
Brand Name

Details

Compay Name: VP Royals
Date: June 2021
Website: https://vproyals.com/

Project Overview

I undertook the redesign for the VP Royals E-Commerce website. VP Royals sell natural haircare and skincare products for all different hair types. The client outlined the current issues they faced with their current website and the goals for their new website.

– The current website needed to be redesigned

– Outlined competition website with a better consistent design

– Business goals are to increase sales and customer experience

Deliverables

– Redesigned website to be more user friendly

– Improve/solve UX issues to increase sales on the website

Problems and Goals

Website design wasn't optimised for the user journey

The competition had a better and consistent UI

Increase sales and customer experience

Solution

Challenges

Site redesign to improve user experience and improve sales

Challenges

Customer research to improve user experience on the website

Challenges

Planning and priority of features

Limited budget and time for research and user testing

Website Before Changes

The main focus for this is to redesign the pages to enhance the user experience. For example, the yellow branding clashes against the white background. The menu options overlap and create extra menu options creating unnecessary pages and journeys for the user.

The main selling point of the company is the offering of naturally sourced ingredients to make haircare and skincare products. The overall goal was to enhance the e-commerce first aspect of the website, influence buyers choices from selecting products and driving sales for the hair services.

Competition & Research

To focus on what needed to change, I began the customer research and research on the competition. Working with the owner, I started the competitor research by asking about who they consider a competitor in their market and also their style inspirations. The client identified the following companies as both style guides and also competitors: Kiya Cosmetics, Afrocenchix, Only Curls, Flora Curl and Jim and Henry. With this information, I began looking at these different websites to see what they were doing successfully, what they did well and how these features could be reflected on the VP Royals website.

 

The websites selected for the had similar features in style, clear menu layouts and CTA’s to engage users to click. These websites have good UI and also follow good UX e-commerce conventions. The simplicity of the designs and layout allows the focus to be on the products instead of figuring out how to navigate through the website. These key elements have been listed as “crucial factors” by bigcommerce.co.uk.

This was an issue for VP Royals, as the website lacked clear organisation on the menu to allow users to purchase products. The several options could lead to confusing and users exiting the website.

This is what Nielsen’s Norman Group identifies as UX principals for e-commerce product pages.

 

Website Must Have

At an absolute minimum, product pages must have these core components.

Descriptive product name

Recognizable image(s)

Enlarged view of the image(s)

Price, including any additional product-specific charges

Clear product options, such as colour and size, and a way to select them

Product availability

Clearway to add an item to the cart, and clear feedback when it has been added

Concise and informative product description

Nice to Have

Shoppers generally expect and appreciate these elements on product pages, but not all sites and apps need each of these.

Customer or expert ratings or reviews, sortable or filterable by rating

Additional product images (rotated or detailed views, animated images of the product in use)

Product videos

Zoom or pan functionality on product images

Related product recommendations

Wishlist or registry tools

Fancy Features

These may be worthwhile for some products, but only if they are flawlessly executed with high usability and utility for the user.

Virtual try-on (for example, via photo upload or augmented reality)

Photo or video reviews from customers

Metadata and advanced filtering in reviews

Recurring- or subscription-purchase options

Product customization tools

360° photos

Step-by-step how-to videos or animations

 

Customer Research

Looking at the competition, I decided to then create a survey to target users who would these sites. All the companies, including VP Royals, target mainly Black women from the UK. This is seen from the images used on the website and the reason behind using natural products due to the negative impact mainstream products can have on afro hair.

Survey Questions

1, What’s your sex/gender?

2. How old are you?

3. How do you usually buy hair and skincare products?

4. How often do you purchase hair or skin products?

5. Have you heard or used any of these companies?

6. Would you recommend any of these companies or another company that sells hair and/or skincare?

7. How important is using natural products on your hair and skin to you?

8. How likely are you to buy natural hair and/or skin products?

9. Would you book hair services through a website that sells hair products? E.g. booking a wash and go or restorative treatment

10. When buying hair and/or skincare products, what do you look for?

Survey Highlights
  • 70% of women
  • 90% between the age of 22-29
  • 80% buy their hair and skin care products online
  • 30% buy products monthly
  • 40% had heard of Afrocenhix
  • 40% hadn’t heard of any of the competitors
  • 60% said it was very important for the products they used to be natural (free from chemicals)
  • 80% are likely to purchase natural products
  • 60% would book a hair service online (a feature of VP Royals)
  • 90% rated customer reviews and product quality as a factor when purchasing hair and skincare products

Design Process

Wireframing

The new focus of the website is the menu organsation, booking hair services and enhance the users journey from start to checkout. The change in the main menu to help users make a decision quicker by directing them (Fitt’s Law). Although several pages have been created, only 6 options feature in the menu to help users make a decision on the website (Miller’s Law and Hick’s Law).

The design focus is to align the style more similar to the competitor websites (Jakob’s Law) and more of a focus on driving sales. Users often perceive aesthetically pleasing design as design that’s more usable (Aesthetic Usability Effect).

 

Shop Page
Services Page
Homepage
About Us Page

The Design

After wire-framing and researching, I was in a position to start designing and turn around the design for the website.

List of changes:

Organised menu – reducing the menu to 7 options (including the icos) – Miller’s Law

    • Change hero image to the slideshow to make the text easier to read

    • Using similar shades for the homepage

    • Including a chatbot

    • “Natural” section would be changed to videos to showcase the products

    • Balanced sales items

    • Focus on hair services

    • Product filter added to the shop

    • Colour contrast

Pulling Colors From Existing Brand & Identity

[
Jet

#333333

[
Golden Poppy

#f9c006

[
Baby Powder

#f7f7f2

Results

Final Result

With the website now better optimised for an e-commerce experience, the process was put together on WordPress. The real copy was added and a few changes were made to the website to better fit the design and selection of photos. The client was happy with the changes as the design is more aligned with their vision.

The main goal was to improve the user experience to increase sales on the website. The changes removes previous barriers so people visiting can become consumers and purchase from the website.

 

You can view and buy from the VP Royals website here: https://vproyals.com/

Customer Review

Vania De Sousa

Co-Founder, VP Royals

We’re very happy about the high-quality service we received, there was great communication throughout the entire process. Very patient, efficient and always willing to meet the needs of the customer. We would highly recommend the service.

More Case Studies