User Research

Competitive Analysis

To begin the formal research, I performed a competitive analysis on two different popular coffeehouse chains (Tim Hortons and McCafe) to better understand if they have a calorie tracker and how it works in comparison to Starbucks.

I was surprised to learn that these two coffee-chain companies do not currently have a responsive calorie counter in their apps, and users are required to calculate their own calories depending on their own drink customization. However, Tim Horton's and McCafe still have an advantage over Starbucks because their app has an actual breakdown of the calories per serving, and users can use this information to calculate their total calories. Starbucks, on the other hand, does not have those capabilities.

As a result, I wanted to implement not only the responsive total calories of a customized drink but also the calories per serving because it would be useful and informative for users to see exactly the amount of calories.

Tim Hortons

From the red highlighted boxes, it is clear that both coffeehouse chains offer a breakdown of the calories per serving for most customizations but still do not have the total calories reflected when customizing a drink. Starbucks does not offer any of these features.

I decided to improve my original feature idea to create a responsive total calorie tracker by adding a similar “calorie per serving” design, as I think both of these features work in unison.

User Research

I conducted a user interview with three participants who have experience ordering from different coffeehouse apps. For the interview, I curated questions to better understand the users:

• Ordering habits and the customizations they often make to their drinks

• Decision when making a beverage choice and whether calories impact that decision.

• When given a task to calculate the total calories, can they do that with the information given?

My key findings were organized by an affinity map:

100% of users used the calories shown on the app as an indication of the total calories of their customization and were not aware that the total calories were not accurately reflected.

100% of users let calories impact their drink of choice.

100% of users would be more willing to try different drinks if calories were accurately represented in the app.

100% of users find both the feature of having total calories and a breakdown of calories to be helpful.

User Persona

I gathered information from my previous user interview responses to create an accurate representation of the users who would find this feature helpful.

To prepare for the high-fidelity screens, I created low-fidelity screens to focus on building my initial design ideas and the overall flow of the screens. After the low-fidelity screens, I was able to jump into the high-fidelity screens, already knowing where and how to use the UI components and filling in the black space with more detail. In order to help me make these minor details, I went back and forth between the original app design and adding slight feature changes.

Design Process

Prior to designing the high-fi mockups, I went onto the Starbucks app to choose a drink that had the most customization options and was relatively high in calories. Also, because the drinks within the app were so consistent in terms of the different customizations, I was able to mock up these high-fidelity screens with just one type of drink.

I wanted to make sure that this feature would be implemented seamlessly, even with the most complicated customization options. As well, a high-calorie drink will address an earlier user concern, which was how calories impact their drink choice, showing them that with this feature, they can bring down those calories on a relatively high-calorie drink.

Original App

Users had a difficult time pinpointing where the total calories were located during the user interview. Therefore, I added total calories on towards the top of the screen as the original design had it at the bottom.

As well, I added calories per serving and filled in the color to match the total calories so that users will naturally draw their eyes to the total calories.

Instead of removing this customize button that was originally on the Starbucks app, I decided to build another path where users can use this button to customize more complicated drinks.

I added “standard drink” and left the calories for users to compare it to the customized calories.

I added the calories per serving in the app so users can make an informed choice on which to use and addresses the user quotes in the beginning where users wanted to compare the different drink options.

I mocked up the original check out screen just for the usability testing so it feels complete when they hit add to order and then are on the check out screen.

Focused my prototypes on improving user experience and accuracy for my user usability testing:

1. I designed a button where will change colors when pressed so users can see what they have selected (as you can see from the screen recording).

2. I went through each screen to ensure the calories per serving were reflected on the total calories at the top so that users can see the change during the usability testing

My usability test focused on two user flows that can both customize drink options. The reason for two user flows is because, as mentioned earlier, I saw the advantage of having both as they served different purposes. Pressing the “customize” button would be used for more complicated drink options where users can see all the options and change them at once. For users who are customizing only one drink option, they would use the main screen.

The task was given to the same participants from the user interview: users were told to order a Mocha Cookie Crumble Frappucino with soy milk, light whipped cream, and a choice of two or three frappucino chips.

Key Takeaways from the Usability Testing

100% of users:

• completed the first and second task with ease

• saw a benefit with having both customization methods and found them both easy to use

• found the features helpful for tracking calories and exploring new drink options

• no other suggestions for areas of improvement

I was thoroughly surprised at how a mere problem in my own personal experience was able to be translated through this capstone project. I was able to take my own motivations and goals for this app and create a feature that would improve the user experience for individuals who resorted to using an online discussion forum for help.

This project allowed me to understand how calories impact our drink choices and prohibit us from trying new drinks. As well, it was interesting to find out that users were not aware that the total calories were not reflected when they customized a drink. Perhaps a big factor in why users are unwilling to try new drinks is that they believe that even with their customization, the total calories are still so high for certain drinks. Due to this reason, I spent a lot of time making sure the calories were reflected with each customization in my prototype. It may seem like a nuance in the design process, but it was clearly noticed by the users when they went through the usability test, as many users pointed out. A lot of my design choices were just focused on the details to mimic an accurate representation of how a responsive calorie tracker can improve the user experience.

More Case Studies