Science in Sport (SiS), founded in 1992, is a leading sports nutrition company that develops, manufactures and markets innovative sports nutrition products for professional athletes and sports enthusiasts. PhD, established in 2006 by two serious gym-goers on a mission to change the sports nutrition landscape, is now a global performance nutrition brand. Both brands are sold in specialist sports retailers, high street retailers and online. SiS & PhD underwent a major UX review and redesign of the sites to improve the buying experience for its customers.
At the start of the review, our UX team set about mapping key personas of customers using and purchasing from the websites. That included: needs, goals, behaviours, beliefs, and core characteristics, with the aim to acquire a deeper level of customer insight.
Surveys were sent out to targeted customers in order to map this information. For example ‘Weekend Riders’ on SiS, wanting energy gel, often aspire to go out everyday and to improve their fitness and ability.
This also helped validate assumptions about customers, such as which other stores were customers using to purchase SiS products (e.g. Amazon) and why/how often, what features, advice and tutorials would they like added to products and information, and how can the brand help them achieve their goals.
UX pain points of the existing sites were established, asking how customers themselves would like to improve usability, the display of the brand, colour preferences, colour contrast, accessibility options, etc.
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.
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.
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.
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.
Technically, SIS & PhD were different themes, but both themes were integrated to create an aligned design that fitted both sites. A parent theme was created, with a SiS & PhD child theme; this meant the merchant only needed to manage one theme, but could maintain different styles for both brands. For example, a new feature could be added once to the parent theme, and that feature would then appear on both the child (SiS & PhD) website themes.
The child themes themselves could also be altered to cater specifically per website, for maximum flexibility. A change in a child theme for example, like a PHP or a checkout change, would overwrite specifics inherited from the parent theme; the parent theme would then only update those parts that had not been changed in the child theme.
This innovative Adobe Commerce theme set-up maximised both efficiency (new features only needing to be created once) and maintenance (bug fixing could take place in the parent theme and applied to both sites simultaneously).