Tandem Diabetes
Adding a feature to an existing mobile app and creating a new Apple Watch app with new feature
My Role
UX/UI Designer
Timeline
2 Weeks
Industry
Healthcare, Tech
Tools
Figma
Overview
Tandem Diabetes is a healthcare tech company, which makes insulin pumps and connects them to their mobile application. This helps diabetics manage their blood sugar. I wanted to add a feature to their mobile application to help diabetics count their carbs more accurately and easily. Additionally, Tandem does not have an Apple Watch application, which I also wanted to create.
Background
I have Type 1 Diabetes and the current method for calculating carbs for diabetics is lacking, especially within Tandem’s mobile application. I would like to help make that calculation easier and simpler.
Problem
Diabetics need an easier solution to counting their carbs in order to deliver insulin instead of having to guess, search for nutrition labels, google foods, or use a separate carb manager app.
Solution
Design a new feature for the Tandem mobile application (and create an Apple Watch app) that incorporates a database of food in order to easily lookup and calculate carbs in order to deliver insulin.
Feature Road Map
First… I conducted primary research, secondary research and competitive analysis.
Primary Research
I conducted User Interviews via zoom with 5 participants ranging in age from 18-66 years old.
This gave me an in-depth look into users' thoughts and experiences about what their experience is like managing their own diabetes, using the Tandem app, caring for someone with Diabetes, and generally having knowledge about counting carbs/calories.
Interview Goals
Determine what diabetics look for to help them make managing diabetes easier
What features Tandem has and what could be improved
What would be helpful for caregivers of diabetics
Results
A major theme I saw surrounding my interviews was around counting carbs:
Both diabetics and caregivers think that counting carbs is the hardest part of managing diabetes
Both young and middle-aged people with diabetes say they use an external app or Google their carbs food before delivering insulin
2 diabetics say they mostly guess the carbs they are eating
POVs and HMWs
In order to narrow my problem, I made point of view (POV) statements and how might we (HMW) questions. This helped me to understand my users’ and their needs.
POV
I’d like to explore helping diabetics and caregivers accurately and easily count carbs, because this can be a tedious and stressful process.
HMW
How might we help those using Tandem diabetes app to more easily count their carbs in order to deliver insulin more accurately.
Secondary Research
The CDC emphasizes the importance of counting carbs for Diabetics below.
People with diabetes count carbs to make managing blood sugar easier, which can also help them:
Stay healthy longer.
Feel better and improve their quality of life.
Prevent or delay diabetes complications such as kidney disease, eye disease, heart disease, and stroke.
If you take mealtime insulin, you’ll count carbs to match your insulin dose to the number of carbs in your foods and drinks. You may also take additional insulin if your blood sugar is higher than your target when eating.
Many diabetics struggle with counting carbs, including myself. I did a search on Reddit to find out what struggles Diabetics have with counting their carbs.
On a Type 1 Diabetes thread, user JulzThe Puliz says “I’ve had Type 1 Diabetes for about 3.5 years now and maybe after a year I quit counting carbs. Obviously I know how many carbs there are in 1 slice of bread for example, but when I eat lunch at a restaurant I don’t know… most of the time I am just guessing how much insulin I need and how many carbs I’m eating… How many of you actually count carbs and how do you do it accurately?”
Scarpenter says “I counted carbs for maybe 3 months after diagnosis, but I’ve been guestimating ever since because it is annoying to google or look at the nutrition label of things any time I eat something.”
Competitive Analysis
Opportunities:
A place to have a database of foods and be able to deliver insulin all in one app
Have accurate nutritional information
Ease of use to eliminate guesswork
Second… I defined my user personas.
User Personas
Next, in order to add my new feature to Tandem’s app, I needed to define the different users that would be taking advantage of this app, both people who have diabetes and those that are caregivers of people with diabetes.
Third… I thought about information architecture.
User Flow & Design Decisions
I then thought about information architecture, as I wanted to ensure that this new feature I would be adding to the Tandem app will both be easy to follow and also fit within the framework of Tandem’s existing app layout. I wanted to get more detailed about the specific task (delivering a bolus of insulin). This flow outlines the choice users have to either add manual carbs or search for food and the following decisions after. This task flow helped me to organize this process before beginning the visual design aspect. This option to add manual carbs vs search for foods came from my user interviews. I found out that sometimes people know how many carbs they are eating, so they may want to skip the step of searching for food in the database. This is why it was important to give users the option to either search for food in the database or add carbs manually.
Fourth… I created low and mid-fidelity wireframes for the app.
Low-Fidelity Wireframes
I started the design process by creating low-fidelity wireframes by sketching them on paper. These sketches show a few different potential pages of the added feature while keeping Tandem’s app look in mind.
Design Decisions
My idea for searching for food and the ‘Added to Carb Count’ pop-up was inspired by shopping for products online, adding items to your cart, and checking out. This is a familiar process for users, which I wanted to incorporate.
Mid-Fidelity Wireframes & Design Decisions
Next, I translated those low-fidelity sketches into mid-fidelity wireframes in Figma. I decided to go with a list of cards with a search bar and tabs for the ‘Search for Food’ feature. Within this screen, I wanted to prioritize the most recent foods that the user has eaten, for easy access. Both this screen and the food details page are inspired by carb-counting apps. The Added to Carb Count pop-up and Carb Count screen/flows are inspired by add-to-cart features on online shopping websites.
Fifth… I defined the brand design and components.
Brand Design
Since I was planning to add a feature to an existing app and create an Apple Watch app, I needed to stay consistent with Tandem’s existing brand design, colors, and typeface. I wanted to incorporate a lot of blue in my design because it represents a sense of calm and responsibility, both of which my users need while using this app.
UI Component Set
Similarly to the brand design, I wanted to keep it the existing icons and cards consistent, but also add icons, cards, and buttons that I need for my new feature, but also that fit with the existing UI components within the Tandem app. With the new cards I created, it was important that I kept things consistent (like border-radius).
Sixth… I created High Fidelity wireframes.
High Fidelity Wireframes Mobile App & Design Decisions
I created High Fidelity wireframes by incorporating the Mid-Fi wireframes and the UI Component set/Brand design elements. I decided to keep the background color white and have pops of the signature tandem blue color for the buttons. This design incorporates user interview feedback (like being able to search for foods and not having to guess or google them), while also incorporating features of similar apps (like the food details page). I also added a ‘My Carb Count’ feature similar to ‘My Cart’ on online shopping websites, a process users are very familiar with.
High Fidelity Wireframes Apple Watch App & Design Decisions
I created High Fidelity wireframes for the Apple Watch app. Currently Tandem does not have an Apple Watch app, so this was created from scratch, but heavily inspired by the mobile app version. I created the Apple Watch version because some users expressed that they wanted to be able to bolus and look up carbs for foods on their Apple Watch anywhere, anytime. Overall, the look and user experience are very similar to what I created for the mobile version.
Seventh…I created prototypes and tested them with users.
Mobile App Prototype
Next, I created a prototype for the mobile app, incorporating the UI elements of the current Tandem app, while adding my new feature.
Apple Watch Prototype
Next, I created prototypes for the Apple Watch. Tandem currently does not have an Apple Watch app, so I created the basic features of their Apple Watch app and added my new ‘Search for Food’ / calculate carbs feature.
What I was looking to test
Understand the ease of use and completion rate of my added feature
Find pain points within my task flow
Access users’ feelings towards UI Elements
How I tested
I conducted 5 trials via zoom with 1 Type 1 Diabetic (who does not use Tandem), 1 caregiver of a diabetic, and 3 people who use carb/calorie counter apps. I ran through 3 different flows:
Mobile app flow with searching for food, adding Cheerios and Almond Milk, and delivering insulin
Mobile app flow by scanning the barcode, adding Cheerios and Almond Milk, and delivering insulin
Apple Watch app and searching for Cheerios and delivering insulin
What worked
Everybody was able to get through the user flows and complete them successfully
They liked the idea of searching for foods within the same app as where you deliver insulin
Liked the overall UI elements
Feedback and iterations
1 person wanted a quick add feature (plus button or swipe left on card to add to carb count) instead of having to click into food page.
1 person was confused why there was a plus sign to ‘Add Carbs’ and another one on a pop up screen following that with a plus sign that says ‘Add Manual Carbs’.
2 people wondered how they would add a food to the database if it wasn’t already there. I add the ‘Add Food’ button but hadn’t built it out yet. I will be doing so in my iterations.
Eighth… I iterated my design based on user feedback.
Iteration #1
I added a quick add feature to be able to add your carbs to the carb count easier and faster on both the mobile app and Apple Watch app. Before, you would only be able to add to the carb count by clicking into the full food nutrition page, but after you can swipe left on the card to quick add (or you still have the feature to do the previous way).
Before
After
Iteration #2
I changed the icon for ‘Add Manual Carbs’ from a plus sign to a pen and paper, since users were confused why they would have to click a plus sign button twice to add manual carbs.
Before
After
Iteration #3
I added a screen after the ‘Add Food Button’ to show how users would be able to add a new food if it was not in the database already. This includes adding a photo of the product, including the name, brand, barcode, and nutrition facts.
Added
Overview of Iterations and Design Decisions
Overall, I made these iterations based on user feedback. These changes helped to make the user experience faster to add carbs, easier to understand how to search for foods, and show the users how they would add a new food to the database.
My priority in adding this carb-counting/search food feature was to help diabetics faster and more accurately calculate their carbs all within the Tandem app, based on my user interviews. Similarly, users wanted an Apple Watch version to help increase accessibility and ease of use.
By looking at similar carb-counting apps, I was able to incorporate the most important aspects of the nutrition facts for diabetics (such as total carbs, fiber, and net carbs). Also, I incorporated a ‘My Carb Count’ page (much like a ‘My Cart’ or checkout feature on a website) to deliver insulin. This process is familiar to users and would be easy for them to understand.
This new feature both had to be easy to use and functional, while still fitting within the brand design of the Tandem app and not hinder what diabetics can do with the current app, but rather improve and add to their experience.
Next Steps…
Test the iterations on users
Prep/ organize the design files for developers
Key Takeaways and learnings…
I learned how to add a feature to an existing app, keeping the branding and overall look and feel the same with the new feature I added
I learned how to translate a mobile app into an Apple watch app.
I also ran into resource constraints in this project, where I only had access to 2 diabetics to interview and learned that I needed to think more broadly about who was going to use this carb counting feature, so I looked to caregivers of diabetics and nutrition junkies as well