Introduction
Activity or fitness tracking was a huge trend in 2016 and now it has become even stronger with an overall aspect of monitoring health. Even sleep and mindfulness has become a big deal with the rise in high-intensity workouts, lunchtime classes and 24-hour gyms. Sleep has never been essential.
Keeping the upcoming trends in mind, this project aims to be a combination of both information visualization and product development. I developed a hypothetical web based product called ‘Track’. It is dedicated to making it easier to learn about health and activities. The hypothetical app and website enhance the experience of fitness to empower and inspire the users to live a healthier, more active life.
Since, it wasn’t possible to develop an entire app, I focused on highlighting the key fitness visualizations for the users to make tracking health (daily, weekly, monthly) an easy task. My final deliverable is in a low fidelity ‘website-like’ format which introduces the product and tells the users what it can potentially do.
Process and Rationale
This project consists of several visualizations which contribute to one story — health. The dataset from which most of these visualizations were created from was acquired from an open data source for visualizations on Quora. Since this is health data which varies from individual to individual, I wasn’t much concerned with the authenticity but on the relations between the data. My primary idea was to generate data myself but since I don’t have prior knowledge it was difficult for me to make comparisons. I finally ended up finding an old FitBit data set in Italian from year 2015-2016. After cleaning and translating it on excel, it was ready to use.
I then used this data to create visualizations on Tableau Public. The data set was formatted accordingly. My aim on Tableau was to get the visualizations ready but I wasn’t concerned about placing them on the dashboard because they would eventually be exported to Sketch and edited accordingly.
This project is a combination of visualizations created on Sketch and Tableau. The primary ones were made on Tableau and the supporting ones on Sketch.
Visualizations on Tableau
These visuals were the major charts used to help the users to track and compare data and were derived from the primary activity and sleep datasets.
Steps
In order to provide a comprehensive weekly review of the number of steps taken each day, this viz was created using size as the comparative value for the higher number of steps taken each day. The color assigned to steps taken was blue and could instantly be understood by the users to gauge their activity and goals.
Calories Burned
Another analysis was the amount of calories burned by the user everyday. This could be viewed either weekly or monthly. To expand on the capabilities of Track, I chose to show a monthly comparison of the viz. The color I denoted to calories burning is red for the users to relate better and make them feel efficient.
Activity Gauge
This is one of my favorite visualizations. It gives a month long comparative view of the intensity of activity in minutes pursued by the user. Since it is an overall view, I preferred the users would understand it with a glance. Setting up the colors for each value was the key here—bright red being most intense and bright blue/green being sedentary and lightweight. The user can get more details about their daily activity by just hovering on it.
Number of awakenings
This is an area chart displaying how many times the user woke up during his/her sleep. The same could be applied to other measure values of rest, actual sleep time etc. But since this is a web-based introduction to the product, I stuck to showing only one.
Sleep Gauge
Similar to the Acitivity Gauge visualization, this gives an overall view of the users sleep activity ranging over a month. The user can compare the number of awakenings, minutes of rest, sleep and being awake during the cycle.
Comparison – Activity & Sleep
This Viz presents findings to the user of their activity and sleep patterns on a daily/weekly/monthly basis. For this viz, I chose to show a weekly comparison because that is the easiest to understand.
Visualizations on Sketch
I used sketch for putting together all the information and visualizations in a website like format to introduce the product. Along with this I did mini visuals to support the main visualizations.
Steps dashboard
This introductory viz is a dashboard like format for mobile devices to help users understand and warm up to the product. The iconography and colors were meant to support the info on the screen and gives them an option to scroll between daily/weekly/monthly options (that being the primary feature).
Another supporting viz/graphic element is the daily activity gauge just to show to the users that that is also an available option in the results.
User Research
Three users from various backgrounds were recruited to test and provide feedback on the above visualizations. They were chosen carefully on their interest in fitness levels.
User 1
The first user was someone who is moderately into fitness and uses an activity-tracking app to gauge his performance in marathons etc. His prior experience in using such services led to great feedback on understanding what users actually want to see in these services and how understandable my visualizations were as compared to other apps.
User 2
My second user was someone who is really into fitness, strength and muscle building but has never used a fitness app. Even though she hits the gym regularly, she doesn’t like running and the concept of fitness tracking is new to her. Her feedback made me see the product and visualizations from a layman point of view.
User 3
The third user is a data professor who has a lot of experience in studying and analyzing data but doesn’t use fitness apps. His perspective gave me a technical overview of the visualizations and how to convert them into a commercial, user friendly scale.
Methods of Research
User tests were conducted in either of the two manners-
- In-person
- Video chat watching them interact with the prototype which was emailed to them
Each interview lasted around 25 minutes. First, there was a pre-test, asking about a person’s general knowledge about fitness tracking and health apps. Following this, participants were asked to navigate through the website and think out loud about their experience. I observed as participants navigated the website, focusing on usability pain points throughout the testing session. Finally, a post-test was administered, where participants were asked about their opinions or feeling about the experience, the website/dashboard, and Track as a brand.
I made sure that I asked clarifying questions, encouraging participants to share not only what they were looking at but what it made them think of.
Results and Findings
Visualizations Measuring Steps, Calories etc.
These visualizations very clearly represent an individual’s daily, weekly or monthly activity and provides a clear way to compare them. The colors and charts used distinguish them from each other and are easy to read. They are also interrelated. For instance, if the number of steps in a day is high, the total number of calories would be high too. Same goes for number of awakenings, if they are high, minutes of sleep is less and minutes of being awake during sleep cycle is high.
Activity and Sleep Gauge
These visualizations as explained before provide a high level summary of the level of activity each day. On Tableau the minutes of activities have been set up according to measure values and have been formatted according to size and circular shape in order to show a rhythmic yet an effective way of comparison. The viz was made minimal by removing additional formatting to make sure that it was suiting the design aesthetics of the prototype. The colors of each value were selected according to the progression of the Viz (intense to light). They show the sedentary activity minutes are highest during the day and intense activity minutes are low.
Same goes for the sleep gauge. It is divided and formatted according to color. Minutes of rest graphed with minutes of being awake and sleep.
Comparison – Activity & Sleep
This chart mainly helps the users gauge how their activities are affecting their sleep patterns and will help them transform their sleep. For instance, on all the days the activities were intense the users had more sound sleep with less number of awakenings and more minutes of rest.
Final Prototype
The final Web prototype can be viewed here.
There are two tabs on in the prototype –
- Activity Tab
2. Sleep Tab
All the visualizations were put together in a prototype where they looked like a web page for the hypothetical brand, Track. This dashboard like format was set up to present the brand and all the introductory information about it’s features. Like a marketing platform. I made sure that the design was modern and matched well with the visualizations. The ‘pop-up from picture’ like approach was taken to help relate the user better to the product. The content strategy for this prototype was to provide as much information about Track to the users and tell them what it entails.
UX findings
Since it was a scrolling-based format similar to other websites, the users found the prototype easy to navigate and self-explanatory. The content strategy seemed successful in its objective and they unanimously felt that the visualizations were clear to understand with appropriate labels and captions.
However, the users felt that the prototype should’ve been interactive but that was difficult for me to achieve due to my limited skill set. Another feedback I got was in terms of color. Two of my users pointed out that the Activity Gauge Viz was brighter and didn’t look like a part of the color story. It was easy to understand but didn’t seem fitting because of the colors.
All my other visuals were easier to gauge but the more complex ones took the users more time to navigate through but in the end they got it. Another suggestion that was made was to label for added clarity each viz despite the fact that it was a website based format. Overall, the users found each of the visualizations interesting especially the activity and sleep gauge which was defined as “beautiful”, “rhythmic”, “intelligent” and “calming”, but not supremely clear.
Future Recommendations
Based on the user’s assessment of the visualizations of the Track Product, there are several areas that could be improved/extended on.
First and foremost, adding interactivity to the final prototype. I would’ve loved to achieve that through Axure but due to limited skill set and time I was unable to do so but this is certainly an area where I would like to improve upon and make this prototype high fidelity.
Secondly, during this project I struggled with matching colors especially during the viz transfer of Tableau to Sketch. Using Hex codes was the primary idea but Tableau was limiting. I would’ve loved to follow a different color story for the Activity Gauge Viz and make it more unified with the rest of the visualizations.
Thirdly, despite my prototype being a website, I think it would be a good idea to add short but detailed captions explaining the visualizations to the users. Ideally, the prototype/app/website dashboard would’ve been detailed but since this was just an introductory (marketing-based) overview, I didn’t add it in.
Further, I would research more or get volunteers who could willingly share their health app data so that I could get a richer dataset and could play around and experiment with more visualizations. My final objective of this project is to eventually come up with a high fidelity prototype (app and web) with all the necessary visualizations and user interface design. Having a hypothetical brand’s introductory website is just the beginning.