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