Client: Woodlands Dairy
First Choice High Protein
Full site design & build for High Protein's brand refresh, introducing three product lines across a new Next.js and Sanity CMS platform built for content, community and conversion.
Context
High Protein is First Choice's fitness-focused sub-brand, producing a range of high protein milk drinks for active lifestyles. The site was due for a full redesign as part of a larger brand refresh - the product line was expanding from one to three distinct offerings, each targeting a different audience: balanced for yoga and wellness, recovery for runners and endurance athletes, and max for serious gym goers and powerlifters.
The brand refresh was led by Hoola Agency, who handled the visual identity. I received the updated brand guidelines through Impact Digital Agency and was responsible for translating that identity into a fully designed and built website.
The Problem
The existing site was built on WordPress and was showing its age. It was slow, visually inconsistent, and difficult to maintain - plugin updates, security vulnerabilities, and a bloated backend made regular content updates a chore for the client. Structurally it wasn't built to handle the complexity of three distinct product lines, and the content offering was thin - recipe pages were basic popups, there were no workout resources, no ambassador hub, and no way to help users understand which product was right for them.
The new site needed to do more than market a product. It needed to become a content platform that kept the High Protein audience coming back.
Design System
Black Metal (#050504), Naples Yellow (#FFEB42), and White (#FFF) was established in the brand refresh and carried across intentionally. Naples Yellow was used sparingly and deliberately, reserved for primary actions like buttons and key callouts, ensuring it retained its impact rather than becoming noise against the dark background.
Rift Bold leads as the display typeface - angular, athletic, and built for impact, while Montserrat SemiBold handles body copy and supporting text, keeping things clean and readable across longer form content like blog posts, recipes, and nutritional information.
Project Description
Moving from WordPress to a Next.js and Sanity CMS stack wasn't just a technical decision - it was a structural one. Sanity's decoupled architecture separates content management from the codebase entirely, meaning the client gets a clean, intuitive backend without the bloat, security risks, or plugin dependencies that were slowing them down. Pages load faster, content updates are instant, and the platform is built to scale with the brand rather than against it.
The core design challenge was presenting three distinct product lines — each targeting a different audience with different needs — without the site feeling fragmented. The homepage hero became a sliding experience that moves between Balanced, Recovery, and Max, each with its own visual treatment and a clear CTA into that product world. From there, each product line has its own dedicated page with active ingredients, benefits, and content tailored to its audience.
Hero Slider
Product Details
One of the more considered additions was the protein calculator on the nutrition page. Rather than leaving users to figure out which product suited them, I designed the logic and question flow myself - walking users through their goals, activity level, and lifestyle to recommend the most appropriate product line alongside relevant recipes to try. It removes friction from the decision and connects the brand's content to its products in a way that feels useful rather than promotional.
The previous site had a single generic contact form. In reality the brand receives four very different types of enquiries; support, stockist requests, supplier enquiries, and sponsorship applications - each requiring completely different information. I proposed and designed a single contact page that switches contextually between four distinct forms depending on what the user selects. The result is faster for the user and more useful for the client, who receives structured, relevant information instead of a generic message.
A significant part of the project was designing the content schemas in Sanity - the underlying structure that determines what the client can create and manage. Blog posts gained read time estimates and related article recommendations. Recipe pages were rebuilt from basic popups into fully structured entries with nutritional tables, ingredients, steps, prep and active time, difficulty, servings, and author attribution. Workout pages were structured around each product's audience - yoga and pilates for Balanced, HIIT and cardio for Recovery, and lifting and powerlifting content for Max. A bento grid navigation system was added across key pages to surface relevant content and reduce dead ends.
The ambassador programme is central to the brand's identity. The redesigned team page features a marquee of Instagram images interspersed with ambassador quotes, giving the page energy without it feeling static. The homepage reinforces this with a marquee of Instagram and TikTok reels from ambassador partners - real content from real people that builds credibility without feeling forced.
Outcomes & Reflection
The site launched as a significantly more capable platform than what it replaced. Faster, more secure, easier to maintain, and built around content that gives the High Protein audience a reason to return beyond just buying a product. Vercel Analytics is now in place to track performance going forward.
The recipe, workout, and calculator features are built and ready - the client is still building out the content to populate them, which is a reminder that designing for future capability requires buy-in across the whole organisation, not just at the build stage. If I were doing this again I'd push earlier in the process for a content plan to run alongside the build, so those features could launch with enough substance to immediately demonstrate their value.
The most satisfying part of this project was the shift from a site that purely marketed a product to one that genuinely serves its audience - and the calculator and workout pages, when fully populated, are what complete that picture.