My Role

As the UI/UX Designer on the project, I was responsible for collating feedback and data from both customers and stakeholders, wireframing, creating user personas, creating user journeys, heat mapping, event tracking, mockups, QA and prototyping.

Project Summary

The Jones Bootmaker website had not been updated or maintained in several years and it was in need of an overhaul to both code and UX/UI. We set out two key phases to tackle the project:

1. Stabilise the existing site, improve site speed and user experience.

2. Create a new site, utilising the functionality provided by Shopify 2.0.

This resulted in an improved experience on the site for both the ecommerce team and customers.

The Challenge

On the site, the brand identity was confused and had not been updated in several years. Features had been implemented without consideration for the site as a whole and customers’ trust in the brand was low. This poor user experience was coupled with slow innovation due to legacy code holding back improvements.

At the start of the project, we established what the businesses KPI’s for the site were and combined them with a few of our own to ensure we delivered the best project outcome.

The business’ KPI’s included: Don’t deviate too far from the current site, preserve existing functionality and increase customisability, whilst reducing reliance on the web team.

Our own set of KPI’s and challenges included: Improve site speed, Improve accessibility in accordance with WCAG, Revitalise the Jones Bootmaker online image in collaboration with the brand team and work around legacy infrastructure.

The Solution

Phase 1

I started by talking to the creative and brand teams to gather any pre-existing brand guidelines, user personas, target audiences and best practices they had. I then adapted these as closely as possible for the online brand, keeping WCAG as a guide to help the heavily print based teams understand the importance of adapting the brand guidelines for online content. The key takeaway from this task was that there is a large concern throughout the business to not alienate the customer base.

I then took the guidelines I had set and used them to update the existing sites design elements. This involved creating a UI library, updating the homepage sections for the e-commerce team and making small design changes across key pages. Whilst doing this we made sure any additional CMS functionality was added to take tasks away from the team.

Phase 2

I communicated with other teams inside the business to get an understanding of our competitors, researched how these competitors presented their brand and used activities like card-sorting to establish how features and content should be prioritised and grouped.

There was no consensus among departments as to what the target demographic was or what features drove conversions. So I started to gathered data about the existing site to make sure that the new site was fit for purpose.

I utilised the data in Google Analytics to create user personas, identify key points in the user’s journey and where exit rates were highest. I then used Hotjar to find pain points and features that gathered a lot of interest for users.

After collating my findings into users personas, a list of features and their priority, I started working on wireframes for the site, adhering to these requirements in order to present back to key stakeholders.

After some in-depth conversations about what features needed to be added or altered, I moved onto mockups and some short form user testing such as 5-second tests and first click tests due to the short timeline of the project.

Results

Looking back at the project, I think myself and the team have delivered the best product we could under the circumstances and limitations. Whilst we haven’t deviated too far from the original design of the site, I think we have managed to give the brand a more current look and achieved the following:

• Jones Bootmaker now has a more trustworthy and premium feeling presence online.

• Accessibility on the site has been improved, providing a better experience for all users.

• There is a robust set of design guidelines to shape further improvements and features that are added to the site.

• This stable platform allows for more agile improvements through a new CRO project.