How might we display users' data through visual design?

A Concept Design to Complete an Existing Tracking App on the Market

Overview

Trackabee is a non-medical tracking app to help identify possible food allergies. The application was inspired with a focus on mothers with young children as well adults with unknown allergies. The application is currently on the market and functions as a digital log.

Goal

Our team’s job was to research and design a way to incorporate the “results page” within the existing app and present our process and final prototype to the client. This portion of the app was the final touch to complete the app. In addition to completing the app with the results page, we also had to keep in mind to figure out how it may increase user retention rate using the existing gamification aspect.

Design team                              

Jacqueline Ma, Lisa Choe, Josh Pittman, Nelson Tift                                              

Research

With Trackabee already existing on the market, our team decided to start off our research process by using Trackabee to log all of our food intakes for several days to get familiar with the interface. While active on the app, we kept the following three questions in mind:

Illustration credited to Irene Falgueras

In addition to getting familiar with Trackabee, our team also found it useful to compare other tracking apps on the market. We gathered the following four features that were common on other apps that were non-existing on Trackabee.

1. Specific information presented to users 

2. Colorful and detailed UI for more interactive visuals and better understanding of information 

3. Customization of logs (symptoms and triggers)

4. Notifications to remind and motivate users to log

Testing the initial shipped product:

Affinity Mapping usability test results to capture how users interacted with Trackabee created on MURAL

User Interviews

For our pool of target users, we interviewed 8 participants who fit in the following guideline:

  • Someone who has a child
  • Someone who has allergies
  • Someone who log/ tracks things in a journal or app, daily/ often

and we based the following list of questions for our interviews:

1. How often do you manager your tracking habits?

How often do you document your allergies/ diet/ other?

When tracking/documenting habits/ allergies etc, what are key factors you want to take note of? Time of day/ amount of intake/ etc.

What methods have you used to help track your symptoms or diet?

What are your goals when it comes to managing your allergies?

What does success look like to you?

What gets in your way of achieving your goals?

Tell me about a time when tracking your allergies helped you.

(Interviewees that don’t already use an app to tracks)Would you be interested in using a mobile app to track your diet and symptoms? Why or why not?

What do you do if you forget to track your symptoms for the day?

What matters most to you when tracking/logging symptoms?

What would you want to see on a results page?

At this stage in research, we realized how much harder it really was to have deathly allergies especially for unknown allergies. Some expressed:

Target User Feedback

"I couldn't see some of my friends this past Christmas because they own a dog and I breakout from being around the dog fur."

"Once, while walking home, I passed by this Italian restaurant and immediately broke out in a rash just from the smell of garlic."

These stories we collected put our perspective to the test, how can these incurable and unknown allergies be turned into information to the target users?

Customers' Journey

A journey map I created on Figma to illustrate the emotional roller coaster of Trackabee users

But what is the problem?

We needed a direct statement that will guide us to solve the problem:

Users need a way to figure out what they're allergic to AS SOON AS POSSIBLE because the delay of not knowing is disruptive to their daily life.

How do we solve the problem through design?

We wanted to make sure there was a realistic solution when it came to providing users a way to easily digest and understand the data they’ve logged into the app. With this thought in mind, we knew we needed some form of clear data visualization showing the relationship between triggers and symptoms. We know this design will be helpful when users seeing this data visualization can understand what may be causing their symptoms which may hopefully decrease their allergic reactions. In order to keep the design consistent, we needed to keep the existing gamification aspect.

Gamification

Business Goals

  • Keep the feature of swiping of symptoms (gamification inspired by the dating app: Tinder)
  • Redesign toggle to measure severity
  • Focus on retention rate of users

Toggle feature before and after. The redesign gives users options to pick certain symptoms instead of being presented by the defaulted options.


Who are we solving this problem for?

Ash is our persona. They love food but of course...CANNOT EAT whatever they want, whenever they want. They've had food allergies since they were a child and it changes every couple of years. They were allergic to nuts....but not walnuts. Allergic to several fruits but not allergic to pineapples ANYMORE. If our persona sounds intense, you can imagine how hard it is for Ash. As you can see, Ash's diet constantly changes based on how his body is every couple of years. It's frustrating and a lot of work. But with the help of Trackabee, ash can log his daily meals and snacks and within a short amount of time, they will be presented the data they've put in themselves. The app will only present accurate data if Ash takes their time to fill in the blanks.

Inside Ash's brain [illustration credited to Irene Falgueras

Visual design

We went back back and forth several times when if came to visual design. The "findings page" was our main focus.

A visual graph solution to presenting data that is interactive for users to choose to correlate between the symptom and triggers they've logged

How can we design this process with the existing interface?

We wanted to recreated the tracking process that would lead us to the findings page we designed. During this stage, I was in charge of breaking down the current tracking flow and designing a more visual available timeline. During this process, I thought it was important to highlight the feedback users receive once they completed a symptom or trigger, this is shown by designing an entire screen that flashes a check for confirmation once input has been received.

Timeline display created so users can easily view their tracking

Another important addition includes a separate list that allows users to input their triggers. Currently, Trackabee ONLY has a "ADD SYMPTOM" tab. In order for our findings page to work, a separate list of triggers need to be available to users so there is a way their data can formulate.

Wireframes I created on figma of the timeline, symptoms + trigger input flow

Overall view of prototype

Prototype:

View the prototype below:

Next Steps:

  • Empathetic Onboarding process- kindly welcome users and reassure theres a light at the of the tunnel
  • Additional/ modified data visualization- focus on the easiest way for users to interpret their data
  • Gamification- input as many gamification features as we can to lighten up the process of tracking
  • Barcode feature- users can scan ingredients to get more accurate results of what they've eaten
  • Pet Friendly- need I say more??!
  • Incorporate nutritional + allergies facts- keep users consistently informed