VP Royals

Updating an E-Commerce Site

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.

Role

Web Designer
UX Researcher

Deliverables

Website Design

Tools

Invision
Adobe XD
Wordpress

hachikoinu

Project Overview

Issue

- The current website needed to be redesigned

- Outlined competition website with a better consistent design

- Business goals are to increase sales and customer experience

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.

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 highlights taken from analysing the competitor websites:


-Kiya Cosmetics and Only Curls website start with a sign up call to action for customers to receive a discount

-Kiya, Afrocenchix, have a clear banner slider with a hero image of the product - no text clash

-Bestsellers section to highlighted all the different products with customer ratings

-A section with what parts of the bodies their products should be used on

-Kiya have their customer review above the footer

-Kiya and Only Curls have Chatbots

-All showcase where they've been featured

-Afrocenchix keeping to 7 menu options (including the profile, cart and search icons)

- Kiya offered a filter section for products


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. https://www.nngroup.com/articles/ecommerce-product-pages/

Questions and results: https://docs.google.com/forms/d/16tbIO48d_wSWCObWGQF-eNaeAWbsBLsNnCnviAlRtNM/edit#responses

Wireframes

Final Designs

The new focus of the website is the menu organisation, 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).

Conclusion

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/