Coca-Cola Enterprises

An agile approach to designing a visual refresh for this responsive site.

The team at Coca-Cola Enterprises wanted a visual refresh to their site while also updating and improving their CMS.

After initial workshops with the product owner, we decided on a route where an editor could inject buckets of content wherever they wanted when creating a page using the CMS. We then built a backlog of what these components would actually be, ordering them from most important down to desirable.

A screenshot showing part of the home screen experience. — We utilised the home screen to tell the Coca-Cola story and link to key areas of the site. As this was a templated site we made sure to create examples of effective visuals for the top area which could be scaled down gracefully to tablet and mobile viewports.

These new components worked great when creating new pages, but we also needed to make sure a visual refresh applied on all older templates too. The most efficient way to tackle this involved me working closely with our scrum teams front-end developer and picking apart global elements like the header, footer, button styles, and typography, which we then restyled.

A screenshot showing part of a landing screen. — Landing screens were also designed to be visual experiences. A big part of this project was helping sell the content more and get users to engage often and longer.

The client was really happy with the rapid output and delivery our agile process provided, so they decided to extend the project where we were briefed to redesign the homepage as well. This template had to provide a clear brand message and define who they were as a company in an inspiring but informative way. We commissioned a fantastic promotional video, and I also created an animated SVG illustration with our front-end developer which attempted to define what Coca-Cola Enterprises actually did as a business.

An example of how a quote should be rendered on the site. — Example components we designed and built which content-makers could add for their content pieces.

An example of how a video preview should be rendered on the site. — Example components we designed and built which content-makers could add for their content pieces.