Heinz Baby Responsive Website

Heinz Baby redesigned their online experience to better showcase their product range and professional advice for parents and their and babies.

UX Design  |  UI Design  |  Creative Direction

Background

The Heinz Baby product range is an Australian icon and has become synonymous with providing healthy and nutritious food for infants and babies throughout all age stages.

Working with marketing and web development teams, I lead the redesign of the Heinz Baby online experience where the goal was to enhance the customer journey with comprehensive advice regarding pregnancy, nutrition & feeding throughout all stages of growth.

From leading early exploration and research with the creation of customer personas and journeys through to prototyping and visual design, the new Heinz Baby website was designed to complement the much-loved baby food product range with professional advice for parents around Australia.

Assessing the previous website

Initial discussions with the client were centred around their desire to better promote the health benefits of their products and the professional advice available on their current website. They wanted to address this primarily through the product pages which were informative but lacked the personality of their brand, clear visibility of information and brand advocacy from happy customers. Heinz also wanted to revise the structure and the display of information for the various age stages of infants which was a primary traffic driver to the site.

Mapping the user journey

From these initial discussions, we worked with researchers to map out the user journeys for existing and potential customers on the Heinz Baby website. We explored and defined the decision making process for how a customer would search for information regarding their baby and how that could lead into the purchase of Heinz baby food products.

Sketches

With the user journey map as a guide, this helped inform the initial sketches for the redesign where I explored a range of options for consideration such as video content, user reviews, product recommendations, recipes, sharing and ecommerce functionality.

Prototyping

The sketches were refined into a series of wireframe prototypes to clearly define features, functionality and responsive templates. This included the location of information touchpoints, product imagery overlays and key information along with a docked navigation element at the top of the screen as users scrolled down the page.

Several iterations of prototypes were produced in order to explore how the content within these templates would work at different breakpoints for tablet and mobile devices. The IA of the current website was also refined to allow for a clearer path for users to browse all products and advice without having to dig too deep into the site.

Visual Design

A core focus for the visual design was to reinforce the Heinz Baby Food site as reputable source of information for parents looking for nutrition and practical advice for infants.

The new design used fresh food and wood grain textures as backgrounds elements to further reinforce the Heinz Baby brand as the leading choice in natural, healthy food that is made locally in Australia.

Informing parents with practical advice

The age-stage landing pages are full of nutrition, health, practical advice and recipes for parents who want to know more about what’s best for their baby. A video containing advice from nutrition specialists features prominently at the top of the page along with the other helpful information touch points.

Brand advocacy & encouraging exploration

We wanted parents to enjoy browsing the age-stage landing pages just as much as product pages so we provided a relatable narrative with user reviews that encourage brand advocacy while providing detailed information about the product. Recommended products and recipes also provide parents with a range of ideas to create meal ideas for their babies.

Responsive & mobile friendly

Analytics from the previous version of the site told us that close to 40% of traffic was coming from mobile and tablet devices. Making sure every aspect of the site was responsive was a key focus as to provide the best viewing experience for visitors across all devices. With traffic from mobile devices increasing every week, the new Heinz Baby website ensures that all new and existing customers will be able to access the information and products with ease from any device.