Costa Coffee

Creating a brand new digital design language for the UK's largest Coffee retailer, enhancing the visual and physical experience of the iOS Coffee Club loyalty app.

Overview

Costa Coffee is the UK’s leading coffee shop chain, with over 2,000 coffee shops and profits exceeding £2 billion annually. The loyalty programme ‘Costa Coffee Club’ is equally impressive and ranked in the top 10 loyalty programmes in the UK amassing over 1 million users. 

Costa Coffee approached Digital media & product agency Graphite digital, to enhance the Coffee club loyalty program from the traditional card approach to a new mobile app experience, to enable customers to purchase their daily coffee more quickly with a new ‘pay and collect’ feature and fast lane in the stores.

Graphite was challenged with researching, defining, designing and building this new premium experience for Costa coffee customers.

Designing the experience & flows

Upon joining Graphite, the project was already in full swing, and they had complied a majority of the research and data. The user flows were broadly compiled, but there were several scenarios which weren't considered. So after discussing with the team, I put together the flows using my own low fidelity wireframing kit so we could get a bigger and clearer picture. We also filled in all the missing scenarios such as onboarding and error states.

Digital Design language

Costa Coffee is a well-established brand, and so it was no surprise that they had strict brand guidelines to adhere to. I meticulously followed their brand guides, ensuring the app adhered to the form and consistency of the Costa Coffee aesthetic.

Although Costa coffee had strong brand guidelines, these predominantly focused towards print; therefore, they required me to define digital principles and guidelines which we used for the app but also for other digital products. My first challenge was to develop a flexible and responsive grid system that we use on a variety of devices but also translated for other platforms such as Android at a later stage.

I opted to use Lato as the main typeface for the app; Tailored for mobile devices as it maintains legibility at even the smallest of sizes, thus been flexible, but also cost-effective as this is a free font served from Google fonts.

The colour palette of the app needed to be on-brand, and so I followed the guidelines for this. The client had no consistent iconography, and so I created a small icon set based on 1px outline and 20px grid system.

Once I had completed the grid system, typeface, colour and iconography I then moved on to build the 200+ component library which comprised variations to navigation bars, menu bars, button states and smaller elements such as drop-down menus, selectors and input fields.

UI Component Library

I then built out a small component library using the atomic design methodology, which would enable the app to be more efficient, especially if any changes had been required or updates in future releases. The creative director also asked me to create several illustrations for the apps onboarding experience; these had to be simple to understand and adopt and within a style appropriate to the Costa coffee branding.

Final Design

The final app is a combination of clean, aesthetically pleasing visuals with pleasurable and effortless user experience.

Throughout the entire process of designing the app, I carefully considered not only the user but also the barista that would be part of the experience. I ensured that both sides could fulfil tasks on the app quickly and efficiently. I wanted the experience to be easy and effortless and allow the customer to get to where they needed to be quickly and efficiently.

We designed the app for a large demographic and so stripping back unnecessary elements and functions that didn't belong was vital. The app is a comprehensive and refined solution to a feature-full platform for an energetic industry.

PREVIOUS PROJECT

NEXT PROJECT