Science In Sport & PhD UX Redesign

Product education

Key to the improvement of UX was the improvement of product information on site. SiS & PhD needed to know how best they could use design to help customers understand their products. Product page layouts needed to focus on what the customer deemed most important, in order to help educate on the product and empower decision making. For example, if you are a new customer, how do you know which protein to have, at which time of the day? Category landing pages were utilised instead of taking customers straight to the product page, featuring educational information & blogs for the user. SiS Ambassadors (customers with wide ranging experience) were used to give advice and learned tips to regular customers, such as adding peanut butter to a specific protein shake to boost nutrition, or adding warm water instead of cold, etc. An icon suite was added for ease of use to show benefits and snippets of advice for the customer.

‍

Digital brand style guide

‍A design style guide was created to set out the key rules for designing for both SiS & PhD brands, and how the experience should be visually represented. For example, the guide covered how brands should be visually represented in different countries, providing rules for any digital touchpoint in any territory. This created an international consistency, reproducing the same brand experience anywhere in the world.

‍

Mobile-first

Maximising the brand, product & content within a small screen space was paramount; with the majority of users interacting with the websites through mobile, the new design needed to incorporate key mobile-first principles throughout. Mobile-first UI elements were utilised, breaking down any friction on the customer journey.

‍

‍

‍

Page Builder

‍

Modular templates

Adobe Commerce’s Page Builder was utilised to allow the uploading of specific mobile banners and to Page Builder blocks. Flexibility was of key importance to SiS, in order to react to special circumstances, for example the fast re-merchandising of the homepage during Tour de France, or Olympics. Page Builder was implemented using a modular block system, so that any block could be used with any other block, allowing any design to fit anywhere on the rest of the website, creating maximum effectiveness and versatility.

Both brands were able to utilise the new modular Page Builder templates; templates were designed so that if a new block was created, it could be used for both brands across both websites. This allowed for maximum efficiency when rolling out new banners and content. For example, a new video carousel block could be created, and then repurposed to be used on both the SiS and PhD homepage, featuring content relevant to the different brands.  

‍