This site is a design-in-progress. More updates to come.

Coca-Cola Enterprises

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

A montage of mobile, tablet and desktop screenshots showcasing designs made for the Coca-Cola Enterprises 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.

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.

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.

A screenshot showing part of the home screen experience. A screenshot showing part of the home screen experience. A screenshot showing part of the home screen experience. A screenshot showing part of the home screen experience. A montage of the home screen experience on tablet. A montage of the home screen experience on mobile.
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.
An example of the animated SVG we produced to help tell the production story while highlighting their improvements to greener energy. I designed the illustration and worked closely with our front-end developer to animate it.
A screenshot showing part of a landing screen. A screenshot showing part of a landing screen. A screenshot showing part of a landing screen. A montage of a landing screen experience on tablet. A montage of a landing screen experience on mobile.
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.
An example of how a quote should be rendered on the site. An example of how a video preview should be rendered on the site. An example of how an image which is being viewed full screen should be rendered on the site.
Example components we designed and built which content-makers could add for their content pieces.