How might we track calories from our food delivery? Here is an idea!
For a lot of people outside there is calory tracking a part of their daily behavior. The motivation for a user depends on their needs. Some people want to lose weight, live a healthier life, or want to optimize their gym workflow. In the end, people want more transparency about their food behaviors. With this in my mind, I started my “Add a Feature” quest by the idea of Tanyel Taran (he also start this adventure, so check him out).
So Tanyel give me the quest: “Hey Tobias! Can you add a calory tracker in the Lieferando App?”
I was sure to handle this task, but this is not a piece of numbers in a new menu. This is more. This is a deep impact on the App and at this point, User Research was super important.
This feature is added to the base of the iOS Application. My part of the project was UX Research, UX Design, and UI Design.
What are the Challenge? ⏰
I got 4 days to clone and mimic the Lieferando App and implementing this feature in a way that makes sense. There are two big parts for me for accomplishing this quest. The Implementation and Distraction but what is that mean in detail?
Implementation
This part focuses on how I can implement a calory tracker it is easy to use and have a real outcome and where I have to put the signifiers for the food.
Distraction
This part is very tricky. Not everybody will be fine with a piece of new information on the food card when you order. So here I have to find a way to set this info in the App calm as possible not disturbing the user flow.
What are the user thinking 💭
After I made the first game plan it’s time for asking the user what they think. I created a short survey but want to try some new stuff by asking people directly what they think. In this example, I implemented the calories directly on the food card and ask what the people think in the survey by showing the picture. Here are some interesting insights from a pool of 100 people.
66,7 % don’t care about calorie indicator
61% would be not Influence by calory Indicator choosing food at Lieferando
72,2% are not annoyed by a calory indicator next to the food
That’s a good starting point for creating a first paper prototype but before I started I refine my game plan with a roadmap.
- How I can implement the ne category where you can see all your stats
- Where I have to implemented the calorie indicator in the App right now
I created a Story User Map from the Lieferando App to get an overview to integrate an MVP Calorie Tracker.
- I need a new category in the menu
- The food cards needs a calorie indicator for transparency
- In the order history you need a general overview
Split the App into his parts was also a good exercise for me for using a kind of Story User Mapping to get a clear overview of how the app works. On the other side, it shows me up to where I can implement Calories Indicator and the statistics or overview and create a step by step To-Do List for myself.
Let’s start with the Category ⚙️
The Lieferando App got a very clear hierarchy so there is not a lot of space for freedom. I chose to create in the Menu a new Category called Health. Why Health Tobias? A lot of people connect calorie tracking with health. This was also one of my questions in the survey to choose this name on facts of user research. One of the ideas I got was creating a category for sustainability. How about implementing something with healthy food at a later stage? So you can use this category to get this in the behavior of the users step by step.
I create a basic User Flow where people testing the new feature. In the first testings, I focused only on implementing the new category. I start to test it with a Lo-Fi Paper Prototype. Due to time limitations, I was able to test the prototype only with 4 persons.
The results went very good! All users were able to complete the task without any issues and rate it with easy or very easy
By these results I started to create a Mid-Fi with the following parts:
- Category based on User Research and testing
- Started to implementing the Calorie indicators in the Lieferando App that I can test how the indicator distracts.
This part was tricky. The goal was to implement the indicator without distract the User Flow or the overall user experience for ordering food. For me this feature is not a gamechanger, it should help some people order healthier food and maybe it would change for some fellows outside there order behaviour. (By the way, one of the reasons I want to start with UX Design is to change the world at least a little bit 😁)
I decided to stick to the results of my survey and put the calorie indicator next to the food and also integrated it into the Order history. These are two main places where I give the user direct feedback over the calories.
The Mid-Fi are ready to test 👌
After created a Mid-Fi Prototype I began with a new bunch of user testing. This time I added a second task for the implementation of the calorie indicators by 10 new users.
As in the Lo-Fi, the people had no big issues finding the complete data of tracked calories. A bigger issue was the Icon because for a lot of people it was not clear enough. I choose to began to create something very simple and start to redesign it after the feedback of the Mid-Fi testing and do an A/B Test with the same 10 users. 80% of the users have preferred the new Icon.
The second task about the calorie indicators had no significant impact on the dish choice. I created examples with different food styles and calories. 70% of the people choose the option they like and not getting distracted by the new indicator.
Implementation of the Concept in a Hi-Fi 💡
Let’s start with the High Fidelity Prototype. One of the challenges was to clone the App we add the feature from scratch because we are not able to use a Design Guide or UI Kit. So I start to save some time to create my own with Fonts, Colors, and some Components.
To get a better result from my distracting topic I tried to change the color to “Lieferando Brand Blue” and the font style for the calorie indicators and I tested it again. The result increased to 90% by changing it to the support color and give it a lighter font style. That’s a great result and I was happy with it.
Changing the color and font style of the Calorie Indicator on the food card increased the number of happy testers by 20%
I also mimic the micro-interaction but there are in Lieferando not very special
In the end, I chose for my Data Overview of calories sticking to the Apple Style in the CI of Lieferando. This feature was from the beginning for iOS. To give the iOS User consistency and a familiar look I stick with the Apple Human Interface Guidelines by using CareKit to display graphical data that can help people understand how their treatment is progressing. You can also export the data to Apple Health.
Next steps
- It would be nice to expand this Health Category in Lieferando with other cool features, there is potential.
- Automatic Apple Health Export to grab automatically data and combine it with other apps in Apples own data center
Thanks for reading this article and my way to add a feature to a existing App. When you want to get in contact with for a cup of coffee and a awesome talk DM me on Instagram under the Username TobiasStoll or via Twitter by searching for Jitko.
Stay healthy and see you soon 😊
