Results

Quantified Citizen empowers users to engage in scientific research or self-track health metrics, offering personalized insights for lifestyle enhancement.

To boost retention, we aimed to incentivize users, ensuring they see the tangible value of study completion in their daily lives.

Platform

Mobile

collaboration

Product Owner

duration

2 weeks

category

Data Visualization, Results

MVP Features

Alert boxes to communicate small bites of info to the user (kind of like instructional type content) - Quickly bring important information or next steps to the users attention
Elements to display percentage (number and graphic) / "Big number" type of element (like "You microdosed 3 out of 7 days per week") - Metrics were important to help measure progress
Bar graph element - With data, visuals are very helpful to find information fast and notice trends in your activity
Text-based insight element (to say stuff like "Over the course of this study, you completed your goal") - This was to add a bit of personalization and motivate the user by adding a sense of accomplishment

Things that work well:

Tabs - an easy way to switch between views. But this could only work depending on how many views were needed since tabs have limited real estate
Large numbers for averages - makes information that users may be immediately interested in very visible

Things that could be improved:

The alert to swipe across the chart - looks like a CTA rather than informational
The chart/legend wasn't very accessible - its hard to use colour as the only indicator (i.e., we may have colourblind users)
Graph - a label for the axes was missing
Would be nice to have a tooltip on the graph with the exact data point info (i.e., when tapped) - it's hard to tell what the exact data points are on such a small screen

Main Feature - Graphs

Scope

The way v1 was being built, the y-axis will not remain fixed when the user scrolls horizontally, so we need a visual queue to the user about the y-axis values.
There will be several charts, most of them will be using a dropdown filter to swap between the different factors.
Need legends for all of the graphs to show what the colours and lines mean if they’re not labelled on the axes.
A consistent style of line to be used on all graphs to indicate that chart’s average score.
Samples of how the graph currently looked were provided. I was given the freedom to restyle them, however it was noted that there may be some limitations on implementation as they were being made with python so some things were hard to do.

Examples of the old graphs:

How to show the data - on/off days

There were a few different scenarios that we had to account for depending on if users completed a factor or not (i.e., completed a sleep assessment), and if they consumed a substance (like alcohol) or not. The point was to see correlations of how consuming different substances could affect the factors that you're interested in. For example, how does consuming alcohol affect your quality of sleep.

1st Iteration Improvements:

The background colour throughout the app was currently grey. I suggested changing this to white for a cleaner look, but we decided not to change the background colour yet because it wouldn’t match the rest of the app.
Originally used tabs to filter the graph by different time ranges, but since the first version needed to be the most basic possible implementation, we decided to stick with the current horizontal scroll.
I suggested having tooltips appear when the user interacts with the graph since it may be hard to tell what the exact point is from the small graph. However for v1, The research team was hoping to use points on the line to indicate that for now since we're not doing interactivity at first.

2nd Iteration Improvements:

I really wanted to remove the green header of the app but we decided to wait for the redesign so we could make an app wide change
They liked my suggestion for the graph design, and wanted me to provide some extra details:
- Some colour options to be used to show different data points
- Add dots on the graph to show data
- I thought that all the graphs would be showing the same kind of data, which is why I thought they could all be grouped together and viewed in a carousel. However I learned that there would be different types of graphs and therefore this wouldn't work.

3rd Iteration Improvements:

Added dashed line on the graph to show average. Decided to keep it a neutral colour so that it doesn’t interfere with the graphs that have multiple coloured lines.
Accordion to hide the graph description and reduce length of the page.
Got rid of the carousel design and had a card for each of the different graphs.
Designs for different graphs - research team shared the data that they wanted to show and I made it fit within our current design.

Brand redesign

The company was going through a brand refresh, so they met with a brand designer to come up with the style sheet and new look and feel of the app. Using that, I created new design components in Figma and redesigned all of the screens that we currently had to match the new brand direction we were trying to go with.

Takeaways

Prioritize what we need for MVP

As is common with a lot of early startups, the company had a lot of great ideas but sometimes it felt that we were losing direction of what is needed for MVP. Our discussions would often drift from talking about this results feature to other parts of the app, or "it would be great if we could do this...", but I tried to remind them often that we need to come up with requirements of what we want for MVP and how we were going to meet that.

What I would have done differently

Along with our own ideas, we knew this results feature was needed because it was also feedback that we had received from our users - they had no idea to see the results to the surveys that they were filling out. However I think it would have also been nice to do further research into what these users may want to see on this page, and what would motivate them to keep coming back and viewing these results. Due to lack of resources and budgeting, we weren't able to do this, but I think we would have gained some valuable insights from it.