Week 5: Tracking App

Building a Stress & Mood Tracking App: “Ease”

This week's project is about creating a tracking app of our choice. We are working in pairs and my teammate and I decided to go for a health-related application to track stress levels.

The goal of these 2 weeks (yes, this is the first project that lasts this long!) was to present the whole process from research to a high-fi MVP; that including a style guide (which was pretty new to us).

User Research

As for this point, we only had the very basic idea of building a stress tracking application, so we have to start by doing user research and discover what are the opinions of the users on this kind of apps in general, who would be interested in using such an app and what they would expect to find in it.

Survey

We conducted a survey (17 answers) which led us to the following points :

• Most of the users had already had experiences with tracking apps for their phones, including those related to health. They mainly downloaded them out of curiosity or following a certain goal.
• They have a positive opinion of this kind of application in general, they believe they are a useful tool.
• They were very aware of their stress levels and consider it important to find ways to reduce them.
• When thinking about stress, the main factors they recognize to influence it directly are not having time to relax, not sleeping enough, and eating badly.
• When asked about ways to track their stress many users mentioned activities like journaling, taking short pauses, breathing exercises, and meditation.
• When asked specifically about their previous experience with stress tracking apps most of them said not having used one yet but seemed open to trying one.
• When asked about how oft they would like to enter information about their recent stress levels into the app they chose the weekly option (over daily and monthly).
• They mentioned it would be very important for the app to have useful information on how to reduce stress.

Interviews

To have a more profound view of our user's opinions and confirm the information coming from the survey, we continued our research by conducting 7 interviews, from which we gathered the following points :

• Aware of how stress affects them, find it very important to keep an eye on it and reduce it.
• They mention recognizing their mood and its changes as directly connected to their stress levels.
• They recognize bad eating, sleeping & not taking time to relax as factors that affect their stress & mood.
• Have vast experience with a variety of tracking apps mostly related to fitness & organization, that they mainly downloaded to reach a goal and deleted right after or even before.
• They mentioned some applications are too “persistent” and send too many notifications or expect them to use them all the time or too many times a day; others also mentioned some of these apps expect them to insert too exact information, which can be confusing and annoying.
• Had no experience with a stress tracking app but are very open to trying one.
• Would like a simple, easy-to-use application that won’t get complex with time, where they can have a clear view of their progress.
• Would like to have a personalized app that gives them positive reminders based on their previous information, that could help them not only to reach a goal (which could cause them anxiety) but long term and gives them the feeling of being talking to a friend or writing a journal.

How might we…?

After collecting this information and analyzing the results of both survey and interviews, and with the help of an affinity diagram -a method used to cluster findings, physically see trends and relationships in data, & organize them into groupings based on their natural relationships- we started to work on ways to interpret our data and used “How Might We” (HMW) questions for that.

Choosing a final HMW question helped us to see the problem from a specific angle and focus our work to arrive at a possible way to solve it more efficiently.

The next one was our final HMW :

Persona

Having narrowed down the problem, we worked on interpreting the data coming from the user in order to create a user persona.

With the help of an empathy map, we could work on synthesizing rational and sentimental aspects of our users through their situation, acts, feelings, and emotions, so we could later make decisions throughout our design process based on our users and of course, build our user persona, which in this case is Joanna, a 31-year-old Social Media Manager living in Berlin:

Competitive Analysis

As part of our research, we analyzed a series of tracking applications related to health and well-being. This helped us to have an idea of what later would be our app structure and features.

During our research, we came upon a larger number of applications, including “Pillow”, “ZEN”, “Waterllama”, “Rise”, etc. We discarded them from our chart because their main functions went too apart from our application’s goal.

Nevertheless, it was interesting to see how the majority of these tracking applications that focus on relaxation, mindfulness, and mental well-being tend to get very complex and have a vast number of features including whole courses with video, audio, etc. and make these into the main focus of their functionality.

In the following chart, we ended up reducing the number of apps and made a list of features that we found persistent in “Headspace”, “Simple Habit”, and “MindDoc”. We found these apps were the most aligned to our application and included most of the features we also found on the others.

The features we found compatible with our app are:

• The user can calculate their stress level, by completing some kind of psychological survey or by indicating themselves how they think their stress level was during some period of time.
• The user can add mood changers or factors that affected their mood during a determined period of time.
• The user can find recommendations on useful information about how to reduce their stress inside of the app.
• The user can receive reminders to enter their stress levels and mood changers.
• The user can set a goal of reducing their stress level in the future.

From this list, we later worked on deciding which features we would implement.

Feature Prioritization

In order to build our MVP, we needed to select and prioritize what we wanted to include as features in our app. For that we used the Moscow Method, which helped us to think of the possible features and categorize them in :

1. Must-haves, those that definitely have to be in our app for it not to lose its goal:

• Stress calculation, at this point, we were considering using a determined psychological tool called the Perceived Stress Scale, which includes a series of 10 questions to be answered just once at the end of each month, and would give the user a certain, simple, and trustworthy result they could later guide themselves from.
• Add mood changers/factors, at this point we thought about asking the user about those factors that influenced their mood weekly, this coming from the survey and interview when the users indicated they would prefer interacting with the app weekly,
• Positive reminders (also coming directly from the user), we thought about giving the user reminders based on previous positive activities that might have been good for them in the previous weeks,
• Notifications on phone, both for completing the stress calculation survey and the weekly mood changers, that we later renamed as “weekly highlights” for better understanding.

2. Should-haves:

• Related articles including tips and useful info about how to reduce stress.
• Registration info, that would include the user’s name in the case they are new in the app, would help us to communicate to them in a more personal, friendly way.

3. Could-haves:

• Option to connect and chat to a friend, at this point we were not exactly sure how this feature would be shaped but we thought it could be something that might enrich our user's experience.
• Setting a goal, as mentioned before some users mentioned this could make them anxious; nevertheless, it is a feature that would need to be tested with more users beyond the MVP.

4. Won’t-haves:

• Relaxation courses, as we thought they would bring more unnecessary complexity to our app when that is exactly what our user doesn’t want.

Lo-fi Exploration

Knowing the features we would implement for this MVP, we starting sketching what would be a Lo-fi prototype from the whole application, including a welcoming for new users. This helped us to have a first base of the app’s structure, which then we used to build our user flow on the next step.

After various ideas and sketches, this is the last version of Lo-fi my teammate and I worked with, on it you can see :

• Guided welcoming to the app, starting by name registration and explanation of the stress level calculation. We decided to go for the Perceived Stress Scale a psychological tool that includes 10 questions, should be made once a month, and gives approximative results.
• We then take the user to the stress level screen where they would see an info box with a short insight on the monthly test calculation and next, an invitation to start the survey — which in reality included 10 questions; on the below-shown image, and for space and visualization reasons of this post, it was shortened to just one.
• after the survey, the user would see their stress levels for the past month, and when clicking on it, could open the month in weeks. Then on each week, the user could add “weekly highlights”
• Once the user picks their mood, activities, diet & nutrition, and sleep factors that might have been present in the selected week, this data would be added to their monthly stress level screen.
• From there on, the user would be taken to see their progress, where they would find a graphic of their stress levels during the past months and also, a list of happy reminders, based on activities they made in the past.
• After that, they would be taken to check the articles menu, where they would find useful tips related to mindfulness, stress, sleep, diet & nutrition & others.

Lo-fi exploration.

Mid-fi

After testing the first Lo-fi and having positive first feedback we jumped into working on a mid-fi prototype, this time :

• Starting from the monthly stress levels screen on the “Today” menu.
• Going to weekly highlights where the user would be invited to add their highlights to the selected week (should only be the recent last week or the one before that).
• After selecting the highlights the user would be taken to see the whole month and the highlights of each week by clicking on them, and then, would be notified to start their monthly survey.
• After completing the survey, the user would be back in the monthly results screen and would be then invited to check their progress on the “Progress” menu, where they would also find their happy reminders.
• As the next and last step, the user would go to the “Articles”, to check on some interesting & useful information.
• A charging page, after completing the survey was also added, to give the user the security their answers had been admitted and will be calculated.

First Iteration

After testing this mid-fi prototype, we received the following feedback :

• At this point, it was only possible to access the weekly highlights screen from the “today” menu, by clicking directly on the month graphic (month column), which made it pretty confusing how to access both, monthly results & weekly highlights in general.
• It also resulted in confusion, to show the monthly results as the first step before the weekly highlights. In the mind of our testers, it made more sense to deal with the weekly action for then pass to the monthly one.
• The visual elements indicating the weekly highlights of each week seemed too small and not so attractive for the testers.
• About the 10 questions survey: It is important to mention that the length of the survey was a concern that we had since the beginning but after testing it, the users were more than happy to answer it and even commented that they felt the length gave them the feeling the test was trustworthy and helped them to really reflect on how the last month was. The fact that it is only to be answered once a month, was also a plus.

Second Iteration

Considering all the feedback we received on the last iteration, we made some changes and built this second mid-fi prototype, which mainly includes :

• Division of the “journal” menu screen in two visual parts “Results” and “Highlights”, for easier and fast access.
• Better and more visual elements in both the “highlights” (rectangular cards with mood faces icons on top).
• Added icons to the main menu, to complement each text.

We also considered not showing the “Results” screen at the beginning of the user flow, as the user would be brought directly into the “Highlights” screen by a notification on their phone to add their weekly highlights.

User Flow

Having a better view of the flow of the whole app, we focused our attention on what would be the flow for a user who has already been using the app for some time.

Visual Identity

Time for visual exploration.

Visual Competitive Analysis

To start building our brand, we worked on checking to competitive space our app would be in, and for that, we worked on creating a visual competitive analysis.

By assessing the identities of competitors we paid attention to their logos, colors, and any assisting imagery that they use. Then, we also made a list of their brand attributes.

In this case, we included “Daylio”, a journaling app with a very distinctive and colorful interface.

This helped us to later create our own moodboards and think of the attributes that should represent our brand.

Brand Attributes & Moodboard

After analyzing the competition and their attributes, we started working on our own, having our user's feedback as a base. For that matter, we made a list of adjectives that would answer the next question:

What kind of app do our users want?

• Easy going
• Trustworthy
• Friendly
• Reachable
• Calmed

With these attributes, we built two different moodboards which we then took to a survey to let users decide which of them represent better our attributes.

Option 1 (on the left ) and Option 2 (right)

In this case, Option 1 took most of the votes and we decided to go with it into the next step.

Style Tile

As the next step, we worked on a style tile, consisting of fonts, colors, and interface elements that would communicate the essence of our visual brand but could later change as the design evolves.

This was a very quick step to determine our design direction early on in our project before investing time and energy into creating high-fidelity mockups.

We decided to go with pastel colors coming from our moodboard, stay with the very rounded typeface Poppins for the whole app to ensure consistency, icons on 1.5pts thickness, and simple graphics and imagery in the same pastel tones.

Considering all these points, we came up with the name “Ease” for our brand and a very smooth & simple logo that would reflect the essence of the whole app.

Now it was time for high-fi prototyping.

High Fidelity Prototype, what does it include?

After testing the first version of the high-fi prototype, we received the following feedback:

• The text on the phone notification was misleading, we changed it from “how is your week going” to “how has your week been going”.

• The info box on the “Highlights” screen was not visible enough. As it was very important for the user to read that piece of info, we changed the color to make it more visible but still, maintain the whole tone.

• The same issue was present on the results page, where the cards including reading recommendations were not visible enough.

Style Guide

Considering all the points from the feedback, we worked on the last final high fidelity prototype (which you can see in the next step) and built the first version of a style guide that would help carry out a consistent brand strategy and communicate design instructions for future implementations:

Final High Fidelity Prototype

PS: You can run the prototype yourself on Figma here.

Conclusions

• It was a great experience working completely from zero and see our product take shape according to our findings. What we definitely need more practice in is working with colors and knowing how to keep a good balance along the whole design.
• Prioritizing features was also a very hard task, as at the beginning we had so many extras and ideas that we thought we had to implement. For that having the visual help of the Moscow Method was a great tool.
• And once again, testing and iterating quickly helped us tons to be able to deliver this MVP.