ABOUT

Brief / background

After their Pro product launch, SMA wanted to increase engagement and acquisition to their Baby Club program, focus more on millennial consumers and ‘premiumise’ their brand.

Ogilvy had already developed a ‘mum’s ally’ brand strategy and recommended the Baby Club include dads, as well as same sex partners, other family members, and friends.

The project timeline had two stages:

Stage 1: Discovery

We were given a global Nestle web framework to explore integrating into existing SMA website and digital branding, taking a ‘mobile first’ approach. Extensive research was done; from over 150 personas we used about 15 to focus on to develop a UX strategy and present a few key page designs with a hybrid of the two styles.

In parallel, the client also hired Clear (Saatchi & Saatchi) to run a series of ‘premiumisation’ workshops, which considered work we’d already done for the new site, as well as SMA Pro, in making recommendations about design and communication approach going forward across SMA’s digital, offline, above the line and health business areas. These included some of the preliminary design work done (such as using gold and navy colours, and a more clean interface) which we then re-integrated into our continuing design process.

Stage 2: Production

An agile production process meant development, UX and design all happened in parallel and in batch sets; the challenge being that all elements had to be future-proofed. The UX approach used modular components and put the (completely rewritten) editorial content at the forefront, based on insights about different ways mums or dads consumed information. Mums tended to research and read in depth, whereas dads wanted to know something quickly and now.

I designed the look and feel to be clean, open, and use a lot of whitespace. All typography, buttons and icons were carefully styled so they could be used across all component types. Page layouts were balanced and divided through use of colour blocking of backgrounds and a mix of wide/narrow components. As photography was prominent in the designs, a number of image aspect ratios were made to be able to fluidly scale across the page grids.

A navy blue and gold primary colour palette was developed, and yellow brought in from the product packaging for better online/offline brand recognition. The 4 developmental colours (pregnancy-toddler stages) were kept but used more subtly through details like icons and CTAs. More metallic gold details were used on product pages to differentiate them from the (flatter) editorial content. All colour and text combinations were thoroughly tested for accessibility.

Photography featured more prominently with this editorial content approach, and was inspired by the ‘Lean In Collection’ from Getty, “a library of images devoted to the powerful depiction of women, girls and the people who support them”. We wove principles of realness, diversity and inclusivity into our recommendation to show not only dads, but a diverse representation of who ‘mum’s ally’ is. All photography was graded to soften/mute the dark tones and unify the imagery across the site, as well as give it a premium feel.

A ‘visual style guide’ document was also made. All PSDs were provided with a spec layer for grids and element measurements.

Project/UX lead: Omar Bakshi
UX: William Godfrey