Costa CoffeeiOS 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.

costa Cover Image
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.

costa Wireframe 01
Connector
costa Wireframe 02
Connector
costa Wireframe 03
costa Wireframe 04
Connector
costa Wireframe 05
Connector
costa Wireframe 06
costa Wireframe 07
Connector
costa Wireframe 08
Connector
costa Wireframe 09
Design systems

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
8 columns | 22px width | 16px Gutter, Margin | 7px Baseline
Costa Coffee Columns
Costa Coffee Baseline
Colour
All colours used for the project
costa Primary Colours
Typography
All typefaces used for the project
costa Typography 01
costa Typography 02
costa Typography 03
costa Typography 04
Iconography
20px grid system, 1px outline
costa Iconography 01
costa Iconography 02
costa Iconography 03
UI Components
Atomic design system
costa UI Components
costa Device 01
Final UI

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.

costa Device 02
costa screen 01
costa screen 02
costa screen 03
costa screen 04
costa screen 05
costa screen 06
costa screen 07
costa screen 08
costa screen 09
costa screen 10
costa screen 11
costa screen 12
costa screen 13
costa screen 14
costa screen 15