SPORTSHOES HOMEPAGE REDESIGN
My role: UX/UI Design | Website Design
I led the project in 2019 to redesign the SportShoes homepage. During this project, I worked with a number of different stakeholders at different levels to develop the new layout and ensure a smooth release of the homepage when it went live.
The first step I took was to run a workshop with the marketing and design teams to list out the goals and identify the problems and opportunities. From this, I created an ideation map to organise these and identify the challenges.
I worked in partnership with our external data agency to access click-maps and interaction data to form insights on the use of the website. I also analysed competitor websites from within the running and fitness industries to identify trends and draw inspiration and ideas from them.
The below video shows the old webpage design featuring a carousel header, category tiles (which always remained the same), new releases, and then a shoe collection navigation, which was found to be quite intimidating for new customers.
Wireframe and final design
Using the data and research I had gathered through the project, along with my design experience and knowledge, I took a fresh approach to the SportsShoes homepage. This included
A brand new top navigation design, reordering and displaying categories more clearly and efficiently.
A video header is used to excite and intrigue the user as soon as they are on the homepage.
A product carousel showing the newest and most popular products is under the header, showing the customers what they want to see. There is a product count indicating the vast range of products offered, and the carousel also indicates there is more to see.
A new brand feature section can be updated with seasonally relevant brands offering a bespoke customer experience; it also features a product highlight feature, allowing customers to go directly to the product or to the brand as a whole.
A new news, blog, and events section, this section gives SportsShoes the chance to leverage the existing and new additional content it provides to the running community. It also gives a space to promote events, driving more engagement with the brand, something important in SportsShoes mission statement.
Featured collection section, this offers a deeper level of navigation to the brand section and allows trendy product ranges to feature on the homepage.
The redesigned footer only shows a few key brand propositions, and more information about the company and its policies can be seen in the drop-down navigation, providing a cleaner experience.
I went through multiple iterations, which were then presented and reviewed with the Managing Director and Head of Marketing to refine and develop the correct approach. Below, you can see the wireframe I developed to house these new features and an example of it in situ with live content. I used a 12-column grid to arrange the new components, allowing flexibility for new components to be developed in the future as needs arise.
I am very proud of this project, as it is an example of how I worked end-to-end to deliver at all stages of the project. Also, this homepage design is still being used years later, which is testament to its success for the business.
I designed and developed the homepage wireframe to be device-responsive. So the components resize and adjust their position to suit the device they are being viewed on. Break points were identified for large desktop monitors, laptops, tablets, and mobile devices. The below videos show how the homepage is displayed on a laptop or mobile device.