blonde gone rogue is a fashion e-commerce business that I co-founded in 2017. We make quirky and colourful clothes for women and men, while promoting ethical production practices and eco-friendly fabrics.
Here are some of our best-selling products. 👇
Recently we embarked on a big UX project. The goal 🎯? To enhance the user experience on blonde gone rogue’s website and improve our conversion rates.
Or read on to find out what went on behind the scenes...
so, what’s wrong?
Low conversion rates on the website of an independent fashion business is one of these problems that have no straightforward explanation. It is a complex mix of internal issues and external factors that feed into it. In other words, it is a very ambiguous problem.
The first step was to identify the smaller issues within the big problem. We would then analyse which of them fall within the scope of UX and would be the subject of this project.
process
Research
Analysing the problem
Design
Test
explore the problem
google analytics
I started my research by taking a closer look at Google Analytics and our purchase funnel. That way I could identify at what stage users leave the website.
These are some of my interesting findings:
Our ‘sessions with product views’ were within the industry average. However, we were falling behind when it came to adds to cart. That indicated potential issues on the product pages.
The website’s blog was popular with about 17.6% website sessions landing directly on a blog article. However, that led to 0% conversion rate. Users who came to our blog weren't there to shop.
Users landing on Dresses and Women’s T-shirts collection pages converted the most. Perhaps these should be given visibility earlier in the user journey.
website survey
Time to hear from the users. I embedded a short survey form on the website in the shape of a pop-up. I did this on Klaviyo, a marketing automation tool we use at blonde gone rogue.
I did conduct a cheeky A/B test (out of pure curiosity 👀) to see which form will collect the most responses. Spoiler alert, it was this one.
These are some of the valuable insights brought to light:
user interviews & usability tests
As the survey was collecting responses, I could go on with usability tests. While preparing the script, I kept an eye on the survey responses for any patterns that I want to examine closer during the interviews.
I tested our website against a competitor popular with our target customer. This made it easier for users to draw comparisons and be more critical.
Some golden findings:
Extensive and well-organised secondary navigation communicates choice which she enjoys having.
Opening a product only to find it isn’t available in her size is a big pain point. It leaves her disappointed. Important information like size availability can be communicated earlier.
Product pages with more content seem more informative.
Size & Fit is the biggest pain point when buying clothes online. That’s why extensive information about the size and fit is crucial for her. She is actively looking for: o Model size and measurement information o Fit information o Size conversion (ex. S -> UK 10) o Models with similar body type to hers
Brands are viewed as not forthcoming and inconsistent with their sizing information. That’s why extensive and accurate sizing & fit information is a big positive.
She does not know her measurements and will not check them.
Here's a fun user profile created for one of the customers we interviewed.👇
screen recordings
I also got insights from screen recordings. I used Smartlook, a visual user insights tool.
The big plus with screen recordings is that I get completely authentic data. It is not a simulated scenario like with a usability test. This is an actual user who came to the website on their own accord with their own goal. I get to see how they go about it.
On the downside, I am unable to see their expressions or ask questions. I must go only by what I see on the screen.
No time to waste. Users spend very little time, if any on the home page. It is important that the homepage communicates instantly what we want the user to know and what will help their experience.
Shop by size. The ‘shop by size’ feature on the home page is used to navigate to products in the user's size.
Here to read, not to shop. Users who come for the blog posts do not go to the catalogue or product pages and do not convert.
what does it all mean?
With all the insights coming in, I needed to start makingsense of it all.
affinity diagram
My co-founder and I started by placing all the findings in an affinity diagram. It was becoming clearer where the website was performing well and where it was lacking.
For example, our check-out felt “familiar” and “secure” to users. We did not encounter issues on the check-out pages when doing usability tests.
However, there were quite a few points made on the product page. The information there often didn’t seem that sufficient.
I then organised all the data in a customer journey map. That way I could ensure that any design decisions I was taking were data-driven. For each step of the customer journey I identified:
There was a clear deadline for this project. Everything had to be up and running before Black Friday.
In order to prioritise the work, we calculated the severity of each issue. We used the following equation:
task criticality x impact on UX x frequency = issue severity
Then, we summed up the combined impact of issues occurring on each page. This way we got the overall page severity. 👇
Based on the results we decided on the following order of work.👇
product page arrow_right_alt home page arrow_right_alt navigation arrow_right_alt catalogue page
Issues with small impact that were taking longer to fix were to be passed onto the next iteration of the website.
get the creative juices flowing
sketches
I quickly mocked up designs addressing issues on the product page.
The final design was a mix of elements from each sketch. I made sure to prioritise these points:
Information architecture. IA follows the order of importance to the user. For example, size & fit information is crucial. It should be brought to the top.
Less clicks. Minimising the clicks necessary to read the information & add products to cart.
Minimalism vs. Maximalism. Product pages with more content (visual and written) were seen as more informative during usability testing. That’s why I didn’t want to keep the page minimal or hide information behind accordion menus.
Users spend very little time reading the information. However, feel they are making a more informed decision when they can see a lot of information.
wireframes
I sketched the wireframes in Figma and passed them to the rest of the team. We could then build the solution and test it.
Once we approved & tested the designs, we moved on to implementing them. This involved work on the sections and functionalities of the website. Also, optimisation of visuals and lots of copywriting.
The first result we measured was our website speed. Our website is now 53% faster! That helps us rank better on Google and improves user experience.
Also, we improved our conversion rate with 21% for the period of Black Friday & Christmas compared to the previous year.
faster website
conversion rate improvement
reflections
I always like looking back at the project and reflecting on what I’ve learnt. Here are some valuable lessons:
What users say in a usability test is not always the case. It is good to challenge users indirectly on their statements. This helps verify them.
For example, one user said she found a page cluttered. However, later admitted to preferring that page to a more minimal one. She found it more informative and reassuring.
Confirm early what can be built within the project timeline. Before I started sketching my ideas, I made a quick research on what is supported by the template we use on Shopify and what changes will need to be coded.
However, I underestimated the complexity of building a grid gallery for the product images, since this was not supported by our theme. That’s why we proceeded with a gallery that was included in our theme and decided to pass the grid view onto the next iteration.
what's next?
What’s coming with the next iteration 🧐
Optimising filters on the catalogue page.
Grid gallery on the product page.
Touches to further optimise website speed.
Other work
Seneca
An onboarding experience for online learning. Or how to find a course in a fun and easy way.
Click to have a detailed look at the affinity diagram in FigJam.
Click to have a detailed look at the customer journey map in FigJam.
