Heineken, Starcom

CMS Web Portal for Heineken

World-renowned media agency, Starcom, required a private CMS website to help them manage communications around multimillion-pound marketing plans for one of their biggest clients - Heineken.

Clients

Heineken,
Starcom

Role

Senior Interaction Designer
UX, UI & Code

Date

2014 - 2019

Problem Statement

Historically, Starcom delivered campaign media planning to Heineken via a plethora of presentational slide tools including PowerPoint. The content was continually being amended by different people creating an inefficient workflow. Members of the agency had previously worked with WordPress, so I was hired to build a private, custom CMS website so campaigns could be centralised, edited, and delivered more efficiently.

UX Challenges

Time and scope was the biggest challenge. I had two months to design and build the first version of the site, working only evenings and weekends. The first major UX hurdle was familiarising myself with the campaign and content strategy so that I could map out the digital experience. 

Structure information to match user needs

Design & develop a private, custom CMS website

Set up user accounts

Provide technical help and assistance to users

UX Solutions

Stakeholder interviews

Information Architecture

Prototype Testing

User Mindsets

Stakeholder Interviews

To initiate and help shape the CMS solution, I interviewed stakeholders and media planners at Starcom and Heineken.

Marketing Manager, Heineken

“I need to see and share the latest version”

The marketing manager reviews and approves media plans, ensuring campaigns align with long and short-term business goals. It is critical that the marketing manager is viewing and sharing the latest presentation with key stakeholders.

Comms Planner, Starcom

“I need to update and share the presentation”

The Comms Planner is one of many working interchangeably on numerous campaigns. Content is constantly changing and valuable time is spent managing the amends and latest versions of content.

Information Architecture

After many discussions and reviewing a significant amount of content, delivered in a fast-paced agency environment, I soon identified and developed ideas for the user flow. Based on the findings of the interviews, and working in close collaboration with the client through an iterative process, I produced a sitemap, and drafted the information architecture of the site. 

Wireframing & Prototyping

I created a lo-fi clickable wireframe that provided a clear outline of the page structure and information architecture. I then built a hi-fi prototype using Bootstrap, writing the bulk of the custom CSS. These were shared with the client and provided usability insights. After some discussions regarding the UI, the prototype was approved.

Visual Design

The client wanted a clean, minimalist look and feel, whilst following the Heineken Brand guidelines. This ended up being a careful balancing act of finding harmony between branding, minimalism, and usability. 

Images and copy for the first campaign were supplied, which I dropped into the prototype. This was useful as I now had real content to aid the development of the visual design.

Using a rapid, iterative design process on the prototype, I was able to quickly test ideas with the client. The final visual was soon approved and was ready to be developed.

Code

With the deadline fast approaching, I set up the WordPress CMS, and copied the CSS directly from the Bootstrap prototype into an empty WordPress Bootstrap Child Theme. After ironing out some minor technical issues, the website was approved and went live just before the deadline.

Heineken, Starcom

Outcome & Learnings

The project was very successful and led to further Heineken work as a result. I managed this product for many years making various versions, modifications, and improvements along the way. That said, this project was wildly ambitious for one 'design developer' to take on. After launch, it became apparent that members of the agency hadn’t had much experience with CMSs. This resulted in me needing to provide an enormous amount of user assistance and tutorials. This went beyond the scope of the initial project but I learned a lot along the way. As the sole product designer and developer, it is a wonder when looking back on it, that I managed to make the initial deadline in such a short timeframe. This was only possible because I managed to gain a clear understanding of the user requirements from the start. Also having both the necessary design and development skills together with drinking a lot of coffee, certainly helped too.

Darren Courtney

Heineken

Elizabeth Hodson

Starcom

Tamara Schmidt

Kamilla Tate

Jack Kelly

Nick Whitcroft