top of page

Costa Coffee's App Updates

iOS & ANDROID • PRODUCT DESIGN

Supporting the team on the app redesign, gamification implementation and leading the introduction of the new calorie system

REBRAND

During my time at Costa, the brand underwent a complete offline and online transformation that needed to be implemented on all the digital platforms in a short amount of time.

I worked collaboratively with the design team, managers and stakeholders to create a cohesive look on all platforms without breaking the current experience, making sure the recognised look and feel of Costa stayed consistent.

256x256bb.jpeg
Asset 1_3x.png
460x0w.webp
Apple iPhone XS Max Space Grey Copy.png
Costa_Old_Website.jpeg
Costa_Cofee_new_website.png
02 Menu.jpg
02 Menu.jpg

New Calorie System

OVERVIEW

The government in the UK has released new guidelines for food providers. In order to stay compliant and help the users make informed decisions, Costa needed to introduce a new way for the users to see the calories in each product.

During this project, I worked alongside stakeholders, product owners and developers.

MY ROLE

Senior Product Designer

N_Order_Customise_02.jpg

THE PROBLEM

The users need an easy way to see how many calories a product has to make healthier and more informed choices when dining out or ordering takeaways.

COMPETITIVE RESEARCH​

App Nutrition - Competitors.jpg

WIREFRAMES

 

Using the current design system, I created 2 different solutions that were presented to the stakeholders. A lot of back and forth trying to understand if the solutions complied with what was needed, making sure the new solution didn't interfere with the ultimate user journey to purchase a product.

There were a few challenges we had to jump through with the CMS.

In the first solution, the calorie information was not dynamic. It offered the calorie count without making any changes if the product was customised. The positioning of the calories were within the product description.

App Nutrition - Solution.png

In the second solution was created in collaboration with the stakeholders who wanted the calorie information to be dynamic but limited to the first 3 customisation units. The rest is not dynamic because the CMS doesn't have the capabilities to add it. This had to be informed to the user in a statement.

App Nutrition - Solution 2.jpg

The second solution was selected and tested with the users.

USER RESEARCH

A prototype was created on Invision and I wrote the tasks instructions and followup questions.​

GOALS OF THE USER TESTING

  • Test the new nutrition solution

  • Reveal any friction points when the user is making an order

  • Identify issues and gaps within the solution

METHODOLOGY

Unmoderated qualitative research (Usertesting.com)

RESULTS

  • The users completed the tasks successfully

  • The users were able to find the calorie information. It was located where they expected it to be

  • The users understood the calorie statement when they read it

  • The users understood they could click the link if they wanted to know more information about calories

ISSUES

  • Users think calories might deter people from ordering

  • Users think the calorie calculator is disingenuous/pointless. It didn't add the most important information that has the most calories.

  • Users think the company is deliberately not adding the extras to the calorie information in order to not deter the user from buying the product.

  • Users rated the new calorie information 2.6 out of 5 because it is incomplete.

RECOMMENDATIONS

  • Implement the design in order to cover the new legislation requirements.

  • Prioritise adding the full calories on the calorie counter

  • Keep it low-key. The calorie counter is not currently adding the full amount of calories and we don't want the users to think the company is doing it on purpose.

bottom of page