Wahey for Whey Box

October 11th, 2018 in Web Development 3 minute read

The Brief

After securing their presence in stores such as Holland and Barrett, Tesco, and ASDA, Whey Box came to Zeal wanting to evolve their online offering (a simple Cratejoy, WordPress combination) into a solution that would grow with them as they continue to expand as a business. With a need to compete with the likes of Cocoa Plus, Pip & Nut, and MissFits, it was important for the website’s new responsive design to focus on ease of use with obvious calls to action and simple navigation.

The main challenge was to provide subscriptions functionality which allowed customers to change the contents of their subscription before their next delivery. This needed to appeal to active, sporty women looking for a convenient way to get creative with their post-workout snacks.

The Design

User Journeys

Whey Box User Journey

The creation of user journeys form a key part of Zeal’s web design process. We worked with the client to establish key user personas that covered their key audience, including their level of familiarity with the product and the brand. Using these alongside establishing the key user goals, we developed journeys throughout the site that allowed the users to achieve their goals with minimal barriers or disruption. This customer first process allows the focus to always remain on the key targets of the site throughout every stage of design and development.


Wireframes allow us to rapidly turn our user journeys into prototype concepts, these ‘lo-fi’ page and component mock-ups focus on the building blocks of the page and the users journey throughout them. Wireframes don’t include brand colours, imagery or styles to allow us and the client to focus on how we get the user from A to B (or first visit to purchase). This stage is a collaborative process and by not getting lost in the details of typography, margins or border widths, wireframes can be rapidly improved at pace.

Final Design

Once the wireframes are finalised we then designed a full UI style guide containing all the assets and components of the site along with full page designs of key pages. The resulting design, is a fully responsive layout tailored to Whey Box’s target audience and anchored in helping their users understand the product and ultimately make the sign up to subscriptions as simple as possible.

The Build

Magento 2

Whey Box asked Zeal to recommend the most appropriate website framework to build the new Whey Box site, one that would serve them well now, but also one that will be ready to scale as their business grows. At Zeal we are open-source advocates, we build all our sites using open-source technology, and in this case Magento 2 was the perfect solution. Zeal’s development team have years of Magento experience building enterprise level sites and extensions for global brands along with providing ongoing support.

Subscriptions & Custom Flavour Picker

The key feature of Whey Box’s offering is their subscription service and the ability for users to customise the selection of Whey Box sachets they receive before each delivery. As there were no existing Magento extensions that supported this functionality out of the box, we needed to develop a custom solution that was flexible enough for customers to change their orders mid-subscription. This approach enabled a transformation from the customer having to send an email whenever they wanted to update their flavours to an entirely user-driven process giving the customer the power to change their preferences within a few seconds and right up to 24 hours before their next order is due for shipment.

Furthermore, integrating with PayPal enabled Whey Box to avoid costly PCI compliance regulations until a later date and PayPal’s mobile-ready checkout aligned perfectly with Zeal’s dedication to provide responsive designs that work no matter which device a customer uses. The ability to change flavours mid-subscription enables users to keep things fresh and exciting. The newly introduced vegan flavours were immediately adopted by existing customers without them having to cancel and resubscribe.

Whey Box Website

In Conclusion

The Whey Box website makes it possible for users to create and customise a subscription based on their personal tastes. A focus on ease of use streamlines this process and demonstrates the brands commitment to convenience.

An appropriate choice of technology ensures the site will support the business as it continues to grow and that customers will consistently receive the same great experience.

Using our responsive and content-first approach, we develop websites that work in the way you need to provide the best for your customers. Find out more about our website services and how we can work with you to build what you need for your next stage of growth.

More from the Blog