%201.svg)
UX/UI DESIGN
UX/UI DESIGN
HP Nutrition – Sales Funnel Redesign & CRO
My Role
UI/UX Designer
Timeline
Jan 2025
Homepage Clutter
- The homepage feels cluttered with too many moving parts.
- Logos added to every image make the page look overly busy.
- Beyond the hero section, there is little variety in how products and collections are displayed.
Collection Pages
These pages are less cluttered but could still benefit from improvements:
- Text links do not meet sufficient contrast standards set and subsequently fail the WCAG AA guidelines
- Introduce larger tap targets to improve usability.
- Filters could be tidied up to improve usability.
- More products should be brought above the fold to enhance visibility.
Product Pages
- Product pages are too long, making it difficult for users to find key information.
- Product details should be distilled into smaller, more digestible sections.
- Content could be better organised for easier user consumption.
- The dropdown menus for product options are not ideal:
- The Baymard Institute recommends dropdowns with 5–10 options, yet some products have fewer than 5 flavours.
- A more visual selection process (e.g., similar to fashion e-commerce sites displaying colourways) would improve the user experience.
Mock-up of an instagram advertisement
Mock-up of a hero image for Shannon Airport blog post
An example of a graphic created for Twitter to promote an upcoming webinar.
Screenshot of Dromoland Castle redesign including hero section
Screenshot of the Dubarry of Ireland product page before the redesign
Colour Changes
- The orange colour in the menu was toned down to improve contrast, particularly for the main menu items.
Adding Submenu
- Less critical information and menu items were relocated to a submenu above the main menu items for better organisation.
Announcement Bar
- An announcement bar in the brand's signature orange was added to stand out on the page.
- An announcement bar in the brand's signature orange was added to stand out on the page.
- Next shipping day.
- Special offers.
- Free shipping thresholds.
Screenshot of Dromoland Castle redesign including hero section
Initial concept for the redesigned product page that I designed
Collection Page
For the collection page redesign, my goal was to optimise usability and ensure key content was easily accessible. Please see some of the changes below.
- Pushed description text lower down the page to bring more products above the fold, ensuring they are immediately visible to users.
- Retained essential elements at the top of the page such as the page heading, f ilters and breadcrumbs
- The collections subcollection text links were replaced with image based links with featuring a single product from each subcollection. However upon reflection I could’ve opted text based buttons which would’ve taken up less space.
- Collection cards with images, text, and buttons were added within the collection page to display different collections relevant to the user (e.g., protein shakers for mixing the protein shake and clear whey isolate as an alternative to whey protein powder).
The newly designed reviews that I created, which we are currently in the process of integrating into the site.
Based on the feedback gathered from users during the second round of usability testing, we decided to implement the following changes. However, we are still in the process of addressing some of these issues:
- Add the product technology logo to product cards for products that feature specific technologies.
- Rewrite the text on product cards appearing in product recommendation blocks or on the collection page to highlight key product USPs, such as whether the product is waterproof, breathable, windproof, etc.
- Add tags to product cards with product callouts such as "Waterproof," "Breathable," etc.
- Add tags to Mega Menu items to distinguish between Country Boots (Waterproof) and Country Lifestyle Boots (Not Waterproof).
- Switch to a one-page checkout.
- Offer better filtering options on the collection pages such as improved price filtering and other possible filtering options as outlined by Kate Moran of Nielsen Norman(Moran, 2018).
- Add a sticky "Checkout" button on the mobile cart page.
Example of a collection page featuring 'Adspots' and the GORE-TEX logo, added to highlight the waterproofness of Dubarry’s bestselling leather boots with GORE-TEX lining.
An example of a looping video created for television screens within each of the 7PSD department based around the globe.
Mock-up of an twitter card with new branding
Mock-up of display advertisement for google ads
Homepage
With some of those changes in mind, I began sketching wireframes on paper for each section and then transitioned into Figma.
Hero Section
- Focused on highlighting one collection or product (two at most) to minimize clutter and simplify the user experience.
- Included a protein-per-portion tag to provide users with key product details, which could also be applied to non-protein-based products.
Featured Collections
- Limited to a maximum of seven collections to avoid overwhelming users as suggested by a Nielsen Norman article.
- Incorporated brand identity by shaping collection images in the shape of the HP Nutrition logo.
Shop by Goal
- Added a new section allowing users to browse products tailored to their training goals or habits.
Product Cards
- Now includes product reviews and ratings (number of reviews).
- Now includes nutritional details like calories and protein per recommended serving
Brand Carousel
- Introduced a carousel showcasing brands stocked by HP Nutrition to establish trustworthiness
Vitamin Bundles
- Introduced grouping vitamins based on their benefits to help users find products for their specific needs.
Blog Section
- Added to educate users
- Added to so that the HP Nutrition team can create SEO-friendly content to enhance visibility and drive traffic to the site.
.svg)
