top of page

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

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

bottom of page