Meet Jon Gibson – the creative lead on the exceptional Costa Experience website

Costa Coffee take us on an interactive tour of the journey from bean to cup through the aid of an exceptional One Page website titled The Costa Experience.

The illustrations are beautiful and each chapter is packed with color, subtle animations and loads of interesting facts.

I caught up with the creative lead on the project, Jon Gibson, where we talk about the brief, the development process and adding the x-factor to the site.

Hi Jon! To start can you please tell our readers where you are from and what you do for a living?

I live in the brilliantly creative south coast city of Brighton & Hove, where I spend my days working as a Senior Designer for Graphite Digital. We are a fairly small agency, but we take on some big projects and like to create digital experiences that make both our clients and their users smile.

It is obvious a ton of love went into the Costa Experience website – how long did the whole project take – from initial meeting to launch?

Thanks! I think in total, the project came in around the 6-month mark. We spent a lot of time planning and wire-framing so that we could be really efficient when it came to creating assets and illustrations. We also knew we were going to need a sizeable chunk of time devoted to coding the site and making sure it degraded gracefully across older browsers and screen sizes.

Who’s idea was it for the concept? Did Costa Coffee literally approach you guys and say “We want a beautifully animated storyboard in One Page”?

The brief was put together quite collaboratively. Costa wanted a web experience that was informative and educational but also something that would engage and involve their customers – they have a really loyal fan base and wanted to build on the great work they’re already doing in social media channels. Costa are a fantastic client – they encourage us to explore ideas and then trust us to run with them.

Our idea was to design beautiful environments and reward users that take the time to explore them. At first we thought of using a more photographic style, but we quickly moved to an illustrative approach to give us more flexibility compared to relying on photographs, and keep the loading times down for users.

The Experience was to sit within their main website navigation so it needed to work on One Page, without navigating away.

What was your exact role in this build and who else was involved?

I was the creative lead on the project. I covered all of the design phase from wireframes to illustrating all the scenes, characters and assets. We’re lucky to have a really great group at Graphite; it was definitely a team effort!

Our developers were amazing; they built custom frameworks to handle about 90% of the sites functionality. They were great at making sure our code was really efficient so it would still be great on older or less powerful processors.

I need to give a big shout out to our animators too, without them the site wouldn’t have half of the personality and charm that it does!

There are so many subtle animations throughout the site that really add to the experience – are these scripted in the beginning or is there just say a stage in the development when you all sit down and say “how can we really add the x-factor”?

The first objective was to illustrate all the screens and scenarios; from there we sat down and discussed which elements we could animate to add to the experience. It was a combination of balancing our development timescales and processing power. We wanted to add as much as we could without making it too busy or overloading processors. We spent time optimising the sprite sheets, but there’s only so much optimising you can do!

We had to fit the primary animations inside a 960px safe zone; after that it was about picking elements that complimented them and added a bit of personality and character.

Thanks for chatting with us Jon, where can our readers follow you online?

Any time! For all things Graphite-related, you can find us on Twitter, Dribbble or visit our website. If you want to seek me out then you can catch me on my Twitter!