In mid-2019 I began work on the visual refresh and brand update of a leading FMCG brand global website, initially as UX lead but then moving into full creative direction as the project unfolded. As the project is still ongoing I can’t disclose specifics about the client, except that it is a globally-recognised name in the food & drinks sector, selling over 10 million servings in 150 countries every day.
The project brief had three main components. Firstly, the client wanted to enhance the SEO capability of their main website, in order to capture traffic from people asking questions in search engines relating to the main product and its history. This was to be done by implementing an ‘FAQs’ section within the site, and reorganising the IA to include ‘hub’ pages, which provided information on product categories. We would also add richer information to the product detail pages themselves, such as making-of information, video content or other pieces of interest to keep viewers exploring the site.
Secondly, we were to implement a visual refresh. The site’s design was fairly on-brand but the UX was poor, with little to no affordance given to viewers on what information to find where, broken product pages and an overall lack of relevant content. The client, while not looking to rebrand completely, did want to move away from certain brand associations and more towards others in order to attract a younger, more diverse market.
Thirdly, the client wished to enhance the recipes section of the site., as the product is often used as a cooking ingredient. This already existed, but the recipes featured were old and uninspired; the client wished to revamp this area with new, exciting recipes and more vibrant imagery.
Stage 1: Competitor analysis and content review
Immediately my team and I saw the potential to add value above what was being asked in the brief. As a personal enthusiast of the client’s sector, I had several ideas on how they could improve their digital offering - not just by becoming more SEO-visible but also in their tone-of-voice, how they communicate with their audience and how they portray their products.
I began researching competitors of all sizes but particularly challenger brands, to see how they communicate to their audience, which is often very enthusiastic, knowledgeable and active as a community. Due to its history, our client is still held in decent regard by this community, but there was still a lot to be improved.
My research highlighted a number of things to focus on, namely:
- Authenticity: Brands can only get so far on the merits of their longevity. Being the first to do something is good, but many audiences will overlook that if the product has become too corporate and detached from what its audience wants. While the idea of ‘brand storytelling’ is nothing new, our client has one of the richest histories for a brand in this sector and have a real opportunity to leverage it in their favour, which they have done to a degree. However, they are in danger of retelling the same stories centred around being ‘first’ and ’the original’; they need to use their stories and their history to drive a connection between the brand and the product, or with the people who make it.
- Variety: This sector in particular thrives on new, innovative products and ways of thinking. Again, being the first to do something counts for little if you are inflexible in your approach to customer desires and mindsets, and aren’t offering new products that the market is asking for. Many of the smaller brands in this sector work on a marketing cycle based on ‘hype’ - small quantities, limited edition products and collaborations with others create buzz, generating conversation among the audience and anticipation for the next one.
- Community: As mentioned before the community is an enthusiastic one and the sector has gained a lot of mainstream traction in recent years. Perceptions have changed around the way in which the product is consumed, with an emphasis on quality over quantity and providing a warm, enriching experience to those involved. The community wants to see their brands taking risks; being adventurous with their offerings shows that they are receptive to what people want, and engages them further with the brand.
I put together an audit deck, looking at the current landscape and the client’s place within it. I recommended that the brand evolve the portrayal of their core product, but not to the degree that it alienates its audience, and then leverage its non-core variants to drive a change in TOV that the flagship product cannot.
These secondary products:
- are more in-step with the way the sector has changed
- they carry less 'baggage' and are therefore more malleable to fit into new and interesting marketing scenarios
- they speak to the challenger brand characteristics of innovation through history, storytelling and emphasising experience over brand
- they embrace heritage, but better
I then went on to highlight UX and UI issues with the current site page by page, and demonstrated ways to fix these, looking at a number of in-category and out-of-category examples. At the time of writing, I have presented this deck to the brand’s Global Marketing Director, the Global Content and Innovation Director, Lead Digital Technologist and In-House Design Lead - all of whom were exceptionally pleased with the findings, presenting only one or two issues (one of which was retracted immediately once I clarified the point further).
Stage 2: UX/IA
Once this deck and the ideas within it were approved, I began working on the site’s IA. As the initial brief was so heavily focused on capturing more traffic I began working with a colleague on creating the overall sitemap and page-level IA, with a set of very lo-fi wireframes to outline page structure. These were presented to the aforementioned stakeholders and refined with their feedback until we were happy with how they looked, at which point I created a set of conventional wireframes for each page.
Through liaison with the Lead Digital Technologist on the project, we learned that from a development perspective, the client was looking to re-use as many components as possible from a previous project our team had worked on, to cut down build cost. This created a limit on how ‘creative’ we could be with our layouts but it was a useful constraint to be aware of early on.
Stage 3: UI
Once the wireframes were signed off we moved into UI design. I worked with our lead UI designer to put together a number of conceptual pieces to nail down the look-and-feel of the visual direction. He presented a number of these to the client and once this had been agreed on, he began to fill out some of the pages with more content and design patterns.
That designer left the project as he got a full-time job at another agency, which is the point at which I started taking on the role of creative director. I worked with the designer who replaced him to put together a robust atomic design system, detailing typographic styles, colour, spacing and rules for creating molecules and components. Unfortunately the 2nd designer also left to pursue a full-time role with another agency, so I continued the development of the system by myself.
At the time of writing…(early January 2020)
Client-side, both the Global Marketing Director and the Global Content and Innovation Director moved onto other ventures in the last couple of months, and the project has been taken on by a new Global Brand Director. This new team spent much of 2019 Q4 workshopping ideas for the brand strategy, for 2020 and beyond; as the website would be a reflection of this position, the project was put on hold.
I'm confident that the project will recommence soon, once we present the initial findings and ideas to the new team.