I started collecting data from Trustpilot and Zendesk to highlight any consistent issues and problems that users were experiencing whilst using the website to make purchases.

Using these platforms gave me a great overview and allowed me to make a list of the most common issues. We also had Google Analytics, but this wasn’t properly embedded so the data was very unreliable.

Whilst looking through the data, there was an overwhelming amount of feedback highlighting the “lack of communication” about the order status. People also highlighted after entering all the required details and clicking ‘Confirm’ to make a purchase, the user then got notified that the item was out of stock!

Users never got informed what was happening next and some users were being charged. So the plan was to create a much leaner user flow notifying and informing the users what the state of their orders was.

I created an affinity map to help highlight any pain points identified by the users. I created a date range of 3 months and purposely selected to view reviews with only 1 and 2 stars.

I grouped these problems under common themes and features for the website.

By doing this mapping session it was quite clear that two main problem areas needed to be looked into.

In a 3 month period, there was a whopping 38 complaints, lots of people mentioned the ‘lack of any communication’ once the customer’s orders have been placed. Not even a ‘Thank you for your order’ email / text.

Some people also mentioned that they wouldn’t even receive a date from the Royal Mail, the order would just arrive.

As a result of this, customers naturally got suspicious thinking HYPE was a scam company. Especially for people who have never purchased anything from them previously.

24 complaints in the same 3 month period were made about customers placing an order and afterwards being informed that the item was actually out of stock! – Although I didn’t have any involvement with regards to the stock system that was being used, I was able to create ways in which users could be made aware of stock shortages or items that were out of stock.

Doing this would therefore reduce the anger and frustration caused to the user when buying items that were never available to buy in the first place.

I created several user journey flows to compare the current design with the new design I proposed.

My approach focused on making user flows as streamlined as possible. If a step can be removed without impacting the user’s ability to complete their main tasks, I aim to eliminate that friction. Fewer clicks typically result in less friction, leading to faster task completion and an overall smoother user experience.

It was clear that I needed to work on a more lean checkout process that informed users of any out of stock items. Alongside this, I worked on a selection of order confirmation layouts that would inform users what step their order is at in the delivery process.

So the current process is that a user selects what item they want to buy, and on the item page you can select the size which is required through a dropdown.

There are two issues with this:

The dropdown in the item page where you’re supposed to select your required size is poor! Yes, it highlights all the sizes, but it doesn’t actually state if they’re in stock or not at that point.

After you select the size you require, it is still a lottery if the size is actually available. The system is supposed to check if the size selected is available, but according to 24+ complaints across 3 months, I would suggest that this logic isn’t working correctly, or working at all!

So a size is selected, the user clicks ‘Add to Cart’ – you then have a bunch of other clicks to make. When you eventually get to see your cart/basket, you click ‘Proceed to Checkout’ 

When in the Checkout screen, you still have to click another ‘Checkout’ button, to enter all your details: Name, email address, shipping address, check a box if the billing address is the same as the shipping, enter the long card number, name on the card, expiration date and security code. 

Once you think you’re finally done, you also get told to enter your mobile number and finally click (punch, smash) the ‘Complete order’ button. 

Phew!

So after filling out all of these steps, you then find out that the item is actually out of stock after this step, not to mention you have just been charged for the item, and a lot of people don’t even get any sort of confirmation that the order has gone through. I understand why people get angry!

I took a step back and looked at the current process and noticed that every single time a user wanted to buy an item off the website, they had to re-enter all of their details each time.

This got me thinking, why not just enter your details once, save them onto an account area that is dedicated just for you and then when you return to make another purchase in the future, you can select the same details you have used in the past (with an added step of typing your bank cards security code for protection reasons).

So taking the new flow into account, the user hovers over the item they want to buy, an overlay appears at the bottom of the image of the item showing the sizes that are available for that specific item.

If the item is in stock, the user selects the available size which will get added to their basket. They then click the ‘Checkout’ button which allows the user to select a previous payment method that they have stored on their account. Once selected, the user clicks ‘Complete order’.

The user will then instantly receive an email confirmation giving a breakdown of the items that have been purchased, showing the delivery address, and which payment method was used.

With the item panel in progress, I started researching into some competitor analysis to see what information could be added/removed from the current email correspondence.

Previously lots of customers were unhappy with the lack of communication after purchasing an item. Lots of people highlighted once the item had been bought, it wasn’t uncommon for there to be no communication whatsoever.

Some people even mentioned that the only communication they had received was an email to give a review on the product, which hadn’t even been delivered at that point! I experienced this first hand myself, and it definitely adds to the confusion, because you wonder if the order has actually been delivered and I’ve just missed it, or the postman has put it somewhere that I just haven’t seen.

The plan was to reorganise the current logic that was set up and see what could be done to improve to current processes.

Firstly, there wasn’t any logic in place, so it was no wonder that nobody was receiving any emails.

Secondly, when looking into the email settings, I discovered that if users (like myself) have a personalised email address outside of the usual Gmail / Outlook / Yahoo etc, the system would just bounce and never send an email.

So I fixed the settings so everyone should receive an email when making a purchase going forward! That’s a bit of the battle won!

I ended up creating a series of emails that would follow one another in the delivery journey of the items which have been purchased by the customer.

I created an email template that showed users the items they’d purchased, I also created a series of icons that highlighted the current step the order was at.

I needed to take into consideration the point when the order is in transit, the user could possibly get a text message or an email from the Royal Mail / DPD etc.

When working to fix problems that have previously arisen by feedback, it is vitally important to try and tick all the boxes, especially if the feedback is as regular as it was at the time of working on this project.

I personally feel it is important to add transparency and friendliness to any sort of communication between company and customer. Making communication feel personable, not just a copy and paste jobby which gets sent to everyone regardless.

So taking user feedback into consideration:

By adding the orange banner under the header gave customers a clear understanding of the step their order is at and what’s next in that process.

When the customer’s order reached the Dispatched state, the email communication changed to show the customer’s tracking number – the user can click on this number to navigate to the relevant page and track their order.

So the current process is that a user selects what item they want to buy, and on the item page you can select the size which is required through a dropdown.

There are two issues with this:

The dropdown in the item page where you’re supposed to select your required size is poor! Yes, it highlights all the sizes, but it doesn’t actually state if they’re in stock or not at that point.

After you select the size you require, it is still a lottery if the size is actually available. The system is supposed to check if the size selected is available, but according to 24+ complaints across 3 months, I would suggest that this logic isn’t working correctly, or working at all!

So a size is selected, the user clicks ‘Add to Cart’ – you then have a bunch of other clicks to make. When you eventually get to see your cart/basket, you click ‘Proceed to Checkout’ 

When in the Checkout screen, you still have to click another ‘Checkout’ button, to enter all your details: Name, email address, shipping address, check a box if the billing address is the same as the shipping, enter the long card number, name on the card, expiration date and security code. 

Once you think you’re finally done, you also get told to enter your mobile number and finally click (punch, smash) the ‘Complete order’ button. 

Phew!

So after filling out all of these steps, you then find out that the item is actually out of stock after this step, not to mention you have just been charged for the item, and a lot of people don’t even get any sort of confirmation that the order has gone through. I understand why people get angry!

I took a step back and looked at the current process and noticed that every single time a user wanted to buy an item off the website, they had to re-enter all of their details each time.

This got me thinking, why not just enter your details once, save them onto an account area that is dedicated just for you and then when you return to make another purchase in the future, you can select the same details you have used in the past (with an added step of typing your bank cards security code for protection reasons).

So taking the new flow into account, the user hovers over the item they want to buy, an overlay appears at the bottom of the image of the item showing the sizes that are available for that specific item.

If the item is in stock, the user selects the available size which will get added to their basket. They then click the ‘Checkout’ button which allows the user to select a previous payment method that they have stored on their account. Once selected, the user clicks ‘Complete order’.

The user will then instantly receive an email confirmation giving a breakdown of the items that have been purchased, showing the delivery address, and which payment method was used.

When working to fix problems that have previously arisen by feedback, it is vitally important to try and tick all the boxes, especially if the feedback is as regular as it was at the time of working on this project.

I personally feel it is important to add transparency and friendliness to any sort of communication between company and customer. Making communication feel personable, not just a copy and paste jobby which gets sent to everyone regardless.

So taking user feedback into consideration:

By adding the orange banner under the header gave customers a clear understanding of the step their order is at and what’s next in that process.

When the customer’s order reached the Dispatched state, the email communication changed to show the customer’s tracking number – the user can click on this number to navigate to the relevant page and track their order.