Alpro.com needed a refreshing approach to enhance their site with a new design and better UX to accommodate the changing needs of the audience, with a more user-centric discoverability experience for users to explore and easily find what they are looking for.

With an ever changing product catalog that varied across each market, discoverability for their product ranges is key. We set out to improve the navigation and overall experience based on user needs.

We partnered with Alpro to design, develop and launch a website that brings its brand story - and its plant-based products - to life in an engaging, branded experience for consumers. We created an experience that didn’t just bring the brand to life, but showed the life in the brand, educates users about healthy choices available with plant-based options and shares ideas, inspiration and recipes to create irresistibly tasty foods. 

We worked with Alpro to define the areas of focus starting with the Discovery and Understanding phases and ultimately tested how users behaved on the site: What do they like? What do they feel is missing? What can be improved? Through heuristic evaluation, user testing, user research, and motion study, four key themes emerged: Discoverability, Recipes, Brand Enhancements and Motion. 

Discoverability

We wanted to ensure that users could not only find their favorite products, but they could easily find them by range and ingredient.

User testing

For Alpro, understanding their audience has always been key. We conducted user testing to learn how customers navigated the site, getting to the heart of whether users really understood product types and ranges, asking questions like: Can you find a drink to make a foamy caffe latte? Can you find a product suitable for a Keto diet? 

Meganav

From this research, we created a meganav that allows users to explore by category that can be personalized and curated by individual markets according to the range of products, ingredients, or product collections. The meganav is a rich, animated resource to help users discover content across the site. 

Our research showed that customers were searching for products by base ingredient, so we wanted to give them fast access to products based on their different ingredients, including people with food allergies such as nuts or oats. Ingredient landing pages with more of a storytelling approach describe the benefits of oats (for example) in their diet, how they’re grown, the product range to demonstrate flexibility, and a direct link to recipes, showing the versatility of the products and providing inspiration to discover a new delicious dish. 

Recipes

Based on discovery and user research sessions, we learned that users loved the recipes on the site and wanted to discover what to do with Alpro’s plant based products, but wouldn’t have thought to go to Alpro.com for inspiration. The recipe pages were not mobile friendly, filters were not intuitive, and users wanted to see more visuals.

Inspirational and rich recipes that invite exploration and attract users to come back

We created a mobile friendly, easily searchable Recipes section that features aesthetic food photography of gourmet dishes, enticing users' visual hunger (after all, we eat first with our eyes!), and creating a feeling of intimacy and bonding over the universal language of food. Users can now filter by ingredient, cooking time, course and dietary requirements.

Brand enhancements

Using motion as the vehicle, we enhanced the Alpo brand by emphasizing the naturalness of their products and infusing a sense of taste to the site. Alpro is known for its great taste and we wanted to create a site that looked as good as it tastes.

We also looked at how we could inject more brand personality into the site, creating the feeling that users could ‘taste’ the ingredients. Each Alpro product is bursting with natural goodness, brought to life with more colorful, rich photography and a storytelling approach on product pages including where products come from, how  to use them, and links to recipes.

Motion

To enhance the user experience, we wanted to upgrade the motion design features of the site to create connection between elements, add expression to the brand and provide timely feedback and indications to the user, enhancing the overall experience.

Motion enhances the user experience, bringing together purpose and branded interactions and moments that stimulate users’ appetite, as they ‘taste’ their way through the site.

Organic

Motion elements feel natural and never forced, embracing the authenticity of the natural world and its perfect imperfections. Floaty rollover interactions were designed to compliment the brand's organic look and feel.

Reassuring

Motion helps ease the user through the digital experience. It aids the flow of discovery, giving clear guidance and reassurance and support where needed. Brand elements animate on scroll to guide users down the page, directing them to the most relevant content moments.

Purposeful

Motion should always bring joy and never frustration for users, never getting in the way of user intent. Products that sway as the user drags a carousel is cohesive to their interaction. Playful animations emphasize the Alpro brand expression and enhance the brand narrative.

The new Alpro.com features an optimized user experience, with higher customer engagement levels, more returning visits and an increased number of pages viewed per visit, bringing them closer to their audience. 

• 61% increase in number of pages visitors viewed
• Better engagements on recipe pages saw a 48% decrease in bounce rate
• 97% increase in the time visitors spent on the site.

A bold and delightful website to be proud of, helping Alpro shape the future, paving the way for the next wave of immersive experiences, delivered at scale.