Redesign of Toolstop’s Product Page
Overview
Toolstop is an enterprise commercial business that supplies tradespeople and the general public with tools from the best brands with competitive prices and fast-delivery. It is the businesses B2C facing platform.
The task was to redesign the product page as myself and both internal and external stakeholders felt as though the initial design of the website didn’t prioritise the user experience. There was no emphasis on design to cater, and it reflected the needs of the business over the needs of the user.
The redesign was scheduled to be completed shortly before our period of peak trading. This meant that the redesign also had to cater for several upcoming promotions and deals included on the product page.
Problem statement
As this task was a complete redesign of the product page, there were several elements that needed to be considered.
Call to action colour
- This was the first element that I tackled during the product page redesign.
- I noticed that overall, the site did not have a definitive call to action colour.
- This was a priority as introducing a call to action colour would positively impact the entire website by promoting consumer engagement both in terms of maximising sales and establishing brand loyalty.
Visual Hierarchy
- It was clear that there was no hierarchical structure when it came to the information displayed on the product page.
- Restructuring the product page and what information was displayed would increase the functionality and usability of the page. This is important to maximise sales and increase revenue.
Removing Unnecessary Elements
- There was a lot of potentially unnecessary information displayed on the product pages.
- I had to collect quantitative data in order to determine which elements were essential to the users and would contribute to increasing conversion, versus which elements were unnecessary and served only as a distraction to the user.
Users and Audiences
The market and target user ranges from males 18–50, who work in the trade industry. This is a key factor when deciding on design decisions in regards to the product page. The information has to be quickly digested and catered for mobile. Our user’s device percentile is 60% mobile 40% desktop. Our peak times are in the morning, afternoon lunch time and later in the evening. We know from this that this tends to be around our users work shift patterns.
This leads us to constantly considering our mobile users when deciding on how we improve the website.
Roles and Responsibilities
We are a small company and therefore have limited resources to allocate to large-scale projects such as this one. This meant that we had to work closely as a team in order to execute the project as efficiently and as effectively as possible. The team included our Product Lead, Digital Marketing Manager, two Software Developers and myself, the UI/UX Designer.
As the sole UI/UX designer in the company and on this project, it was my responsibility to:
- gather user research to identify areas that require improvement and establish user needs
- develop high and low fidelity wireframes
- collaborate with internal and external stakeholders to identify business priorities
- creating prototypes and communicating with the development team in order to effectively execute my designs.
Scope and constraints
The upcoming period of peak trading and the project to introduce several promotional deals over the festive period created several constraints on the redesign of the product page. The promotions and deals would directly impact the product cards, which created constraints with regards to my initial design of the product page. This meant that I had to alter and simplify several elements to allow for the deals to be implemented at the required time. In order to do so, I met and collaborated with stakeholders to identify the design changes that they deemed essential in order to initialise the design process of the new product card that would accommodate the upcoming promotions.
A constraint for the team was the inability to conduct any user testing over the course of the project. I unfortunately could only rely on quantitive insights to make design decisions
Process and What I Did
Bold letters, large fonts and big buttons. We were dealing mostly with users who spend all day on a construction site so our site design had to reflect this and I did not want to alienate them with designs that would not in reality make sense to them as a user group.
- User research
- Wireframe Sketches
- V1 product card
- Iteration process
- Final Designs
User Research
To understand what real problems the user was having with the product page, we decided to apply analytics using VWO and Google Analytics. With VWO we applied heat-maps, screen recordings and A/B Testing .
With Google Analytics we looked at the overall site performance to get an understanding of what types of devices our customers were using as well as what platform. This would help with the design decisions in regards to desktop and mobile.
With VWO we applied insights onto the product pages, this provided what elements were being clicked/used. The session records provided me with key insights into the users behaviours on the page; what elements were being hovered over, clicked and scrolled.
The first issue I raised was the website and specifically the product page lacked a call to action colour. The current call to action button the same colour as the header, this causes a number of issues. The first one is usability, as there was no definitive colour the user can easily mistake this element for something else. Also the position of the button in relation to the Klara container’s ‘more info’ button adds to this confusion. The second was the size of the ‘add to cart‘ ’button. It was not the most distinctive element on the product page, this overall can effect user engagement as it does not clearly define its purpose.
I decided to do A/B testing on the element. I changed the colours and width of the button to see what had more engagement and ultimately increase the conversion rate. We found the new colour that was introduced performed better by .5% in conversion rates than the current button. It was very important that this proved to stakeholders that there was clearly room to improve the usability of the page.
I moved onto tackle what elements were considered necessary. To do this as mentioned previous, I used VWO’s insights to view heat-maps, clickable areas and screen recordings. I found that a number of elements cluttering the product above the fold were actually not being interacted with:
- SKU number
- View All Products link
- Klarna container
- Warranty Logo
This lead to removing these elements or links all together or moving the information further down to a more relevant section of the page.
Focus Groups with Stakeholders
After I had investigated the page gathering the relevant quantitive data, I took my findings to stakeholders. I had to balance what was required for business needs but did not jeopardise the user’s experience of the site. The requirement from stakeholders included the Klarna finance banner and our Guaranteed In Stock badge. I researched other E-commerce retailers and noticed a variety of designs for Klarna. So I pursed the company who provided the widget to allow for restyling. This was tricker than it sounded, as it was an external widget provided by a company called Imegamedia. We had to work with them to provide classes to the elements to allow our developers to style it into a more suitable design reflective of our website. We achieved this and moved onto sketching how the new site should be designed.
I had to figure out what composition was necessarily to fit our user’s needs and goals. The title, brand, price and ex-VAT were important, as well as our ‘Add to Cart’ button.
Wireframe Sketches
This was what information was key to providing a better user experience. I decided to trimmed down the title and brand together by giving the brand inside the title string a heavier font-weight. Increased the font weight and size as the price was the same font-size of the SKU element.
At this stage I started to consider Accessibility. Our daily average user base consisted of 18–60 year old males who use the platform before, during or after work. It was imperative to me that:
- The content of the page was clearly understood and streamlined to make sure they can see clearly see — Where they currently are on the site (Breadcrumbs)
- The titles are of readable size regardless of sight (25px) and suitable contrast (black text on white background)
- The price was the largest text element on the page as it was the most important. I provided space around the information to make sure users could clearly understand where to look.
- The add to cart button was now the biggest interactive element on the page.
The user research was an ongoing process while working on the project as there had to be iterations to the design.
V1 Product Card
I moved onto the high-fidelity wireframes using Adobe XD after completing the sketching phase of the design process. This was one of the first iterations of the design. The design provided the user what was required to make a purchase; A title, brand, price quantity and add to cart. The design also included requirements from stakeholders; the guaranteed in stock label, Klarna label and also an ‘order by’ notification. I extended the product container to be max-width, this created more white space which I felt was lacking from the current site. It allowed the information to have more space around it for the eye to be able to read.
I started the prototyping process to get initial feedback from a variety of user groups. This included Stakeholders, Marketing and Wholesale.
After developing a prototype of the new product page I decided to do some user-testing with stakeholders and the wholesale team who use the website every day. I used Adobe XD and Google forms to allow the user to access the prototype and fill out a questionnaire after their experience.
We discovered that there was positive response to the simplified redesigns of the product page, though, there were challenges around time constraints and development blockers to allow these designs to go ahead. Moving the images to the left side of the photo was trickier than expected, we added new ‘add to cart’/cart functionality that required investigation from the developers as we were tied to the CMS platform BigCommerce. The Brand inside the title string would have required a custom script to allow the title to be a larger font-weight than the other part of the string. The design
Compromise and Iteration
I organised a meeting with stakeholders, marketing and the development team after the blockers were raised around the design. We needed to decide what action to take in regards to finishing off the project successfully. We decided to park the more complex current design and create a reduced version, one that was closer to the current website but did not introduce new functionality, only styling.
We knew that the simplified designs were more catered to the user so I started picking apart the current design vs the first iteration to strike a balance for users, what was achievable for the dev team and what the stakeholders business needs were.
What positives came out of the iteration process?
- A catered design to suit the users needs which was a much needed improvement on the current site
- Stakeholder business needs were met
The Final Designs
The project was conducted over several weeks with other projects in-between. Here are the designs that are now live on the platform:
https://www.toolstop.co.uk/dewalt-dcd796m2-18v-xr-brushless-compact-combi-drill-2-x-4-0ah-batteries/
Mobile Designs
Our mobile designs were the biggest improvement in regards to usability. As previous the mobile design was the afterthought. I put time into both devices; desktop and mobile. As you can see on the left below, the mobile was just a squeezed version of the original desktop. I gave mobile its own hierarchy and composition to provide a much better user experience.
- Old (on left) Redesign (on right)
Outcomes and Lessons
This was the first major design overhaul I achieved while working at Toolstop, so it hallmarked an achievement of what could be possible. I am the first UI/UX Designer that the company hired, so there was a lot of buy in when it came to making design decisions. It echoed to the stakeholders that the design process is necessary when it comes to implementing changes of this scale for the website.
There were many lessons personally that I took from this. I have found that there is no clear linear progression to the design process and each company has to go through their own process to achieve their goals. I had to learn how to communicate my decision making process to Toolstop’s management, as well as managing their expectations. To inform them when I believe ‘wanting’ something doesn’t always suit the users needs even though it may seem good for business. As a UI/UX team of one I had many obstacles to overcome, given that this was the first UI/UX project that had occurred cured in the company, as well as finding the right information to improve the page, I also had to inform staff of what it was I actually did and why it was important. Which has now led to a more open-mind and trust in regards to pursuing design improvements in other parts of the website.
Thanks for reading.
Declan
