Costa Coffee Calorie Counter

NATIVE iOS & ANDROID • PRODUCT DESIGN

New Calorie System

OVERVIEW

The UK government 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, legal, product owners and developers.

MY ROLE

Senior Product Designer

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

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.

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.

The second solution was selected and tested with the users.

USER RESEARCH

A prototype was created in 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.