Uber Eats - Calorie counter

Adding an app feature to an existing framework

Project Overview

Role Type Timeline

UI/UX designer Adding a feature to an existing app 80 hours

Introduction

The problem I identified here was to do with the serious misapprehensions people can have about the real impact ordering takeout can have on one’s health. Customers are misled by jargon about healthful takeout orders that have no numbers to ground them in. I think restaurants should be clearer about what is in the food they offer, and that that should be the case on every platform it’s offered on. The potential improvement in quality of life is clear – customers with health conditions like incipient atherosclerosis and/or diabetes etc. would greatly benefit from increased labelling around food options.

Research

User Interviews

I interviewed 4 people about their experiences using both food delivery and health and nutrient tracking apps separately, also focusing on their views concerning the value of uniting them in a single application. Users thought the idea of visible and documented nutrition info was very appealing, and that there was commercial value in it. They noted it's potential to guide users to restaurants that served healthier menus, but the calorie tracking feature itself was seen as something of a novelty to begin with. Exporting app data to robust fitness apps was a major draw. An affinity map capturing some insights from the interviews is below.

Affinity Maps - Uber Eats user interviews.pdf

User Survey

I also created a user survey, and it served as a supplementary data collection instrument for the user research phase of this project. User research offered the promise of a few valuable insights. Most people had used Uber Eats or food delivery before, so I expected they had ideas about what it lacked and what they would have liked to see it do better.

Secondly, I created and administered a user survey. In total, 5 participants answered 12 questions about their experiences with UE alike apps. 2/5ths had used UE ‘rarely’, and the other 3 at least once a week or more often. 3/5ths ‘rarely’ considered the nutritional value of food they ordered, with one calorie conscious person answering that she did so ‘often’. Only 1 in 5 were willing to pay extra for a version of Uber Eats that included calorie tracking features. Users generally preferred graphs etc. in displaying macro or calorie information; also stressed simplicity in adding and removing food items from display logs.

The research showed that there was a clear business case for the app. 2/5ths of users agreed with the notion that a calorie tracker feature would definitely increase their use of and time spent on the app, while another 2/5ths were open to the idea that it would do so.

Overall, the business goals this reflected were significant:

Implementing calorie tracking could get users to spend more time in the app.
Implementing calorie tracking could draw in users from a new market (calorie conscious youth) to the app.

In surveying the competitive landscape like fitbit, myfitnesspal, and other fitness and food tracking applications, it became clear that this calorie feature offered a distinctive use case. In general, the characteristics these apps seemed to have were:

Extensive food databases with predefined item entries
The ability to search through databases and add entries to the food repository.
Aside from allowing for custom meals and macros, these apps integrated some goal based tracking and weekly progress tracking.

Overall, there was no direct competition for the combination of features UE, i.e. direct access to food delivery with calorie tracking, could offer. This feature consequently wasn’t aiming to replace health tracking apps, but to enhance the ecosystem by offering customers more information overall around their food choices.

Define

Synthesis of the user and market research phase revealed several key issues about user goals. These were:

Interests in visual macro/calorie tracking and cross-app integration.
Interested in daily calorie and macro goals and linked health advisories.
Frustration around a lack of transparency in nutrition information.

As part of making clear the problem scope involved in the development of this feature, I developed 3 distinct personas that reflected these user goals.

Personas - ue app 1.pdf

Sitemap

Integrating the feature into the taskflows that were already embedded in the app was probably the biggest challenge. I created a sitemap to help conceptualize where calorie tracking might fit into UE. The idea was to be as non-intrusive as possible over restaurant and menu displays, and to have that information feed into a food tracking hub.

Sitemap Uber Eats 1.pdf

User flows

Next, the following user stories were selected for inclusion, i.e. for developing wireframes.

A user wants to order an item and check the calorie information associated with it.
The user wants to understand how many calories he/she has consumed in a given week of using the Uber Eats app.

I selected these two user stories because they were associated with (a) the most common action in the app and (b) they exhibit both in-line and dedicated calorie hub features in the app.

Uber Eats app user flows 1.pdf

Design

Wireframes

I went through two key iterations of wireframes; first low-fi, which essentially consisted of mapping the task paths that had previously been identified.

Key details centered on implementing the in-line calorie information; the mechanism I settled on was a pill shaped toggle. Low-fi wireframing also concretized the idea of an independent calorie/food hub accessible through the user profile.

ue-lowfi wireframes 1.pdf

The paths and associated functions defined in the low-fi frames were then integrated with Uber Eats’ branding.

ue hifi frames.pdf

Prototype

Test

The final part of this process involved usability testing. I was mainly interested in two key hypothesis:

The calorie tracking feature was consistent with UE’s design language.
The calorie tracking feature surfaced information that painted a coherent, actionable picture of calorie consumption in the UE app.

Users responded mostly favorably. A majority thought the toggleable in-menu calorie display was clear (60%). Nearly all (4/5) thought the aesthetic of the food hub was consistent and well thought out. The feature also received high ratings for memorability (4/5 were able to recall details of use), and self-reported satisfaction (4/5). Additional graphs reporting user responses are below. In general, results from the usability test were positive, with about 4/5ths of users satisfied that the app feature was consistent with the design language of Uber Eats while communicating useful calorie information about items they might be interested in ordering. A key issue raised was about how distinctive calorie info was amid a thicket of information in a restaurant menu.

Iterate

Following usability testing, I made further revisions to the design of the central calorie tracker/hub page. I replaced color based indicators, which was based on a red/green (over/under) color scheme with messages indicating whether the user had overstepped their calorie goal. I also streamlined the calorie/macro toggle, and made the calorie goal setting control more prominent, so users could adjust their settings for this without having to dive into a separate profile area. This also improved the accessibility factors associated with the app as calorie message was no longer dependent on a visual indicator, like color, alone.

Next steps

The pill based toggle control proved an interesting option for a minimally intrusive presentation of calorie information, which was what I was trying to accomplish with the app. Future revisions might include tighter integration with the calorie hub information; such as allowing users to track weekly calorie progress through ubiquitous progress indicators, and requiring calorie information to accompany item listings rather than hiding behind a control.

Conclusion

This first attempt at integrating a feature into an existing app framework went fairly well. The primary challenge was integrating a new function into UE that required displaying new information and new interactions while remaining within the interaction paradigms that had already been set up by the app’s makers.

I found the key part of this process was feature, process and site-mapping, where I had to take a clear look at the structure of the existing app and ask myself how to modify my feature to fit. Overall, the process was a good introduction to the complexity of plugging into an existing design workflow, and ideating within constraints like this was fun!

Page updated

Google Sites

Report abuse