Costa Coffee

iOS App

The Challenge

The client approached us with the proposition to redesign, rebuild and enhance their existing Coffee Club loyalty scheme into an new app.

The client had several vital requirements for the newly proposed app such as; new functionality for the user to add funds to an account, purchased products in store, pre-order drinks, view order history and obviously collect points.

The Loyalty Program is a Customer Centred program which allows the customer to access the brand more frequently and enjoy special privileges and benefits every time they visit Costa. It also includes a feedback system which will help Costa to listen to their customers and take corrective actions based on the feedback and improve customer satisfaction.

Timeline
Apr 2016 - Sep 2016
Role
Product Designer
Project Type
iOS App

The Solution

I began this project by evaluating the Costa Coffee in store experience, and reviewing the drink ordering process. This gave me an insight into customer behaviour and how people used traditional paper / stamp loyalty schemes and payment methods.

Following my reviews, I then started to conceptualise ideas, and experiment with functionality in sketches and low fidelity wireframes ensuring I was including all the requirements that the client requested. I realised from my in store review that time and speed were incredibly valuable to this app, as it would be fundamentally used as an interaction between customer and barista and so ensuring this experience was fast and efficient was an essential measure.

I experimented and explored with various methods of interaction for navigation and product ordering and created low fidelity prototypes for internal and external user testing. Testing confirmed that some of my user flows, features and functionality were correct and others needed more refinement and adjustments, but once this was complete I was then able to explore the design language of the app.

Design System

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 the client had brand guidelines, it was predominantly focused towards print, and so it lacked certain digital principles such as grid systems, typography and iconography. And so, my first challenge was to develop a flexible and responsive grid system that could be used 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, it was specifically designed for mobile devices as it maintains legibility at even the smallest of sizes, thus been incredibly flexible.

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

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

Grid System

iPhone 5, SE

320

320

10 Columns

8 Pixel Baseline

Typography

Simple, modern sans-serif

Lato Regular

Lato Bold

Colour

Simple primary palette

#91022E

#E4BF85

#EEEEEE

#FFFFFF

Iconography

Simple 1px, 24px Iconset

UI Components

Small selection of atomic components

Final Screens

The final app is a unique and elegant combination of great user experience, refreshing visual design and remarkable efficiency.

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 exceptional, easy and effortless and allow the customer to get to where they needed to be in the best way possible.

The app was designed 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 incredibly energetic industry.