Heineken, Starcom

CMS Web Portal for Heineken

Starcom, a major global media agency, needed a private CMS website to manage communications around multimillion-pound marketing plans for one of its biggest clients: Heineken.

Clients

Heineken,
Starcom

Role

Senior Product 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

The biggest challenge was time and scope. I had two months to design and build the first version of the site, working only evenings and weekends. The first major hurdle was familiarising myself with the campaign and content strategy, so 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 a lot of content to work through in a fast-paced agency environment, I began shaping the user flow. Drawing on the interview findings and working closely with the client through an iterative process, I produced a sitemap and drafted the site's information architecture.

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.

Working rapidly and iteratively on the prototype, I could test ideas with the client quickly. The final visual was approved and ready to develop.

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 a success and led to further Heineken work. I managed this product for many years, making various versions, modifications and improvements along the way. That said, it was a wildly ambitious thing for one 'design developer' to take on. After launch it became clear that members of the agency had little experience with CMSs, so I ended up providing a great deal of user assistance and tutorials. That went beyond the scope of the initial project, but I learned a lot along the way. Looking back, as the sole designer and developer, it is a wonder I made the initial deadline at all. That was only possible because I understood the user requirements clearly from the start. Having the design and development skills in one place (and drinking a lot of coffee) certainly helped too.

Darren Courtney

Heineken

Elizabeth Hodson

Starcom

Tamara Schmidt

Kamilla Tate

Jack Kelly

Nick Whitcroft