LTTPS Final Design Report

Andrew Lor
CS449/649 F20 — UWaterloo
12 min readDec 12, 2020

by LTTPS: Andrew Lor, Alexis Tao, Leah Tu, Abraham Park, Gloria Son

For our CS449 project, our team chose the project theme “supporting the maintenance of good mental health”. Our team took interest in this topic as it is ubiquitously relevant. There is almost nobody that this problem doesn’t apply to. Most people can be working to change or reinforce lifestyles that support a healthy mental state.

To further break down the problem statement, we looked at the definition of mental health. According to the World Health Organization*, mental health is a state in which one can realize his or her own abilities, cope with the stress of normal life, work productively and make contributions to a community. These are four complex and diverse components that factor into any person’s lifestyle, so it’s a tall order to create one coherent solution to address all of them. Instead of tackling them all, we will address realization of abilities and coping with stress, thus still supporting the overall wellness of the mental state.

* https://www.who.int/news-room/fact-sheets/detail/mental-health-strengthening-our-response

Value Proposition: We have set out to add value to individuals’ lives by supporting the creation and execution of goals, which builds habits, improvement and ultimately ability. Additionally, we will try to improve the emotional awareness and intelligence of individuals, which is essential for coping with stress.

Goal: Our goal is to create a solution that is enjoyable to use and enhances people’s lives. Our hope is that our solution will support people taking action towards positively changing their lifestyle and improving themselves physically, mentally and spiritually.

Anticipating Users

As part of the empathize stage, we wanted to have a better understanding and picture of our target users. The first thing we did was create 3 personas along with corresponding empathy maps. A persona is a specific description of a target user based on a fictional character and it’s supposed to help us relate to users. An empathy map externalizes our knowledge about a user to help with decision making.

Persona 1: Liam James, a fourth-year student at the University of Waterloo who struggles with a lack of motivation and stress and time management. See below for the persona and empathy map, Figures 1 and 2.

Figure 1. Persona of Liam James
Figure 2. Empathy Map for Liam James

Persona 2: Heather Kim, a full-time elementary school teacher in her mid-30’s who struggles with work-life balance and wants to find inner peace. See below for the persona and empathy map, Figures 3 and 4.

Figure 3. Persona of Heather Kim
Figure 4. Empathy Map for Heather Kim

Persona 3: Matilda Green, a retired senior citizen who was recently widowed who struggles with loneliness and self-identity. See below for the persona and empathy map, Figures 5 and 6.

Figure 5. Persona of Matilda Green
Figure 6. Empathy Map for Matilda Green

Exploratory Study Process

Once we finished the personas and empathy maps, it was time for us to talk to real people and conduct some interviews to find out people’s current habits, pain points and goals. We created a questionnaire to learn about the person’s current habits and their general feelings about mental health. Then, our interview questions focused on what do they want to see in a mental health app and their challenges with mental health. We conducted 4 interviews, a mock interview and 3 with people who were similar to our first and second personas.

We conducted a mock interview with someone from our buddy team first to see if we should make changes to our questions or interview process. We learned that our original ordering of questions could be improved because we started off with heavier, more in-depth questions and ended with lighter questions. We decided to swap the ordering to make the interviewee more comfortable with answering the more in-depth questions. We also realized some of our questions were too open-ended. Thus, we made changes to our interview questions and our final ones can be seen below.

Interview Questions

  • Is mental health important to you? Why/why not?
  • How do you maintain your mental health/mindset today? (ie. coping strategies)
  • What motivates you?
  • Do you use any products/tools/apps for your mental health?
  • What did you think of them? What did you like? What did you dislike?
  • Describe the effectiveness of these tools.
  • What is the hardest part of maintaining your mental health?
  • According to the World Health Organization, the main aspects of mental health are realizing abilities, coping with stress, working productively, and contributing to a community. Which of these aspects do you want to improve?
  • If you were to use a mental health app, what would you expect to gain?
  • What goals do you want to achieve with the help of an app?
  • What kind of experience do you expect?

Exploratory Study Results

Once we finished the interviews, we created affinity diagrams (as seen in Figure 7) to summarize our findings. The key themes we found were:

  • The desire for human connection: The interviewees believed that having a support system and connecting with others would have a positive effect on their mental health.
  • Time and stress management: Some participants struggled with self-discipline, which may be a factor in poor time management. Regarding stress management, we found that there was a need for continuous and potentially daily stress coping strategies.
  • Emotional intelligence: Remembering past accomplishments and identifying triggers. Interviewees cited journaling and mood tracking as helpful activities.
  • Experience: Want a simple experience with a quick setup for the app.

To solve the key issue of human connection, we thought the app would likely require some aspect of social networking. For time and stress management — a scheduling feature. And for emotional intelligence, some kind of record-keeping functionality to encourage self-reflection.

Figure 7. Affinity diagram based on user interviews

After analyzing our affinity diagram, we identified 3 key user tasks: creating a goal, challenging a friend and completing a goal. We chose these tasks because they’re closely associated with the key themes mentioned above. For each task, we created a hierarchical task analysis (as seen in Figure 8, 9, 10) to break down the task into subtasks and have a better understanding of the user interaction at different levels.

Figure 8. Hierarchical task analysis diagram for creating a goal
Figure 9. Hierarchical task analysis diagram for completing a goal.
Figure 10. Hierarchical task analysis diagram for challenging a friend to complete a goal together.

Design Alternatives & Iteration

After reviewing our affinity diagrams, we came up with five key features for our application: emotion tracking, emotion summary, challenges, challenges summary, and a social feed. Then, we used storyboard, sketches, and user flows to conceptualize each of our features.

From our user interviews, we learned that many people value self-reflection and awareness. Our interviewees explicitly said that journaling and having a mood tracker are useful tools for maintaining their mental health, so it made sense for us to combine the two into one feature to create emotion tracking. Another key problem we discovered was the lack of motivation and self-discipline to complete personal goals. To solve this issue, we wanted to help users by creating something engaging and motivating. Setting and recording goals help create a sense of accountability, which led us to the creation of challenges. For these two features, we decided to create summaries for exploring insights and statistics to detect patterns and triggers. Also, by separating the summaries into two different views, it helps avoid overwhelming the user with too much information. Lastly, we wanted to foster a sense of community in our application to address the need for social connection. The social feed helps people stay connected and also provides a source of motivation to participate in group challenges with others.

Emotion Tracking

In this feature, users will be able to log how they’re feeling for the day. They can also add notes with their entry. Based on these entries, the app would look for patterns and alert users if any are found. This is an important feature because it raises self-awareness and allows them to analyze patterns in their emotions.

Figure 11. Storyboard for emotion tracking
Figure 12. Sketches and user flows for emotion tracking

Emotion Summary

In this feature, users will be able to see a summarized view of all the emotions that they’ve been tracking. This will include graphs of not only their current emotions, but other factors that may have contributed to what they were feeling. For example, stress levels, busyness, amount of sleep that one got are all factors contributing to mood. This will give insight into how different environments and habits can affect users which helps to further develop their self awareness and how mental health is not an isolated factor but influenced by a combination of things.

Figure 13. Storyboard for emotion summary
Figure 14. Sketches and user flows for emotion summary

Challenges

In this feature, users will be able to invite/challenge their friends to reach certain goals together and earn rewards on completion. The idea behind completing goals with others is to increase motivation and foster an encouraging environment where people can work together.

Figure 15. Storyboard for challenges
Figure 16. Sketches and user flows for challenges

Challenges Summary

In this feature, users will be able to view an aggregate and statistical summary of their challenges data, displayed in an infographic format. Visualizing and highlighting key metrics in the challenges data is important to keep the user engaged and motivated, thus this feature ties into the integral user need of discipline.

Figure 17. Storyboard for challenges summary
Figure 18. Sketches and user flows for challenges summary

Social Feed

In this feature, users will be able to post and view updates from their friends. This social feed will help users connect with others because they will be able to view/interact with their friends’ updates, creating a supportive and social experience.

Figure 19. Storyboard for social feed
Figure 20. Sketches and user flows for social feed

The Low-Fidelity Prototype

We decided to focus on 2 of our main features to create prototypes for and test since they were the most complex part of our application: creating challenges to motivate users and emotion tracking to raise self-awareness and mindfulness. We began with low-fidelity “paper” prototypes, but they were still digitized to some extent due to the remote nature of our team during COVID.

Figure 21. Paper prototype for the challenge feature
Figure 22. Paper prototype for the emotion tracking feature

We ran an evaluation for our paper prototype by asking users to complete various tasks for each feature and a ‘wizard’ would change the pages to mimic the application’s response to their actions with predetermined responses. At the same time we observed how users would typically complete these tasks and the difficulties they encountered. Some difficulties we observed were having trouble navigating back to the large calendar view due to the small month button, unclear information conveyed from the emotions on the monthly calendar summary page and a confusion over the optional nature of adding friends or due dates to challenges. A few design suggestions from users were also to remove the dialog pop up in the emotion tracking feature and to make the overall language more interactive (eg. “Notes” vs “What made you happy today?”).

We took all of these suggestions and made improvements to our design by adding dotted lines to optional fields, removing unnecessary dialogue frames, using colours to represent emotions on the calendar instead of small face icons and changing language to be more user friendly. We also solidified a colour scheme and font for all of our screens, making the application more consistent.

The High-Fidelity Prototype

Figure 23. App Icon and Logo (image: Freepik on Flaticon)
Figure 24. Snapshot of High fidelity prototype for the challenge feature
Figure 25. Snapshot of High fidelity prototype for the emotion tracking feature

To test our high fidelity prototype, we used both a heuristic evaluation and cognitive walkthrough. Three tasks were created for users to complete for these evaluations: create a challenge with Ashley to run 10k every week starting November 14, log your mood as happy for today with a note, and navigate to the calendar/summary view for emotion tracking.

Two heuristic evaluations were completed by other students who were familiar with designing applications and they were asked to focus on 5 heuristics that applied to our application: visibility of system status, consistency and standards, error prevention, recognition rather than recall and aesthetic and minimalist design. Both evaluators rated the aesthetics of the application highly but also suggested improvements in other areas. For error prevention and consistency, they suggested removing outlines from message alerts which could be mistaken for buttons, adding a darker colour to active drop-downs and changing language of the buttons to clarify what action will be taken.

During the cognitive walkthrough, there were mixed success rates on task action sequences. The user completed all of the steps for the emotion tracking feature task; however they had a little bit of difficulty with navigating back to the monthly calendar view and creating a challenge. Despite the initial missteps in both of those tasks, discoverability was still high since users eventually completed the correct step within 1–2 moves.

We made small changes based on these evaluations such as consistent active drop-downs, removing unnecessary text outlines and making the clickable area on the calendar larger to make it easier to navigate back to the monthly summary view.

Figure 26. Final High fidelity Prototype Demo Video

Icon Credits

https://www.flaticon.com/packs/pineapple-character-1?word=pineapple
https://www.flaticon.com/packs/emotion-face?word=emotions

Reflection on Process

Looking back over the course of this design project, it’s clear to see the positive results of adhering to the human-centered design process. Each of the five phases (empathize, define, ideate, prototype, and test) in this iterative design process builds on the blocks laid out in the previous phase in a sequential manner. One of the advantages of this logical ordering of phases was that we were able to gather the necessary user information right from the start of the project, which we utilized throughout the project’s duration to design the user experience based on first-hand feedback. This helped us to create app features that correspond to real user needs and not just our own assumptions. Furthermore, because the human-centered design process puts a strong focus on people, we continuously emphasized with target users and designed with a human perspective in mind.

It’s worth noting that although the design process can be beneficial to designers, it is not an algorithm — it is more so a toolkit. The pursuit of good design and user experience is an exploratory process, and can often result in the discovery of something new. In each phase, the human-centered design process offers multiple options to the designer that can assist in furthering this design exploration. For example, in the define phase, a myriad of tools and methods such as affinity diagrams, card sorting, hierarchical task analysis, and work models are available; however, it is up to the designer to choose which and how many of these to implement.

Limitations and the Future

Due to time constraints, we were unable to fully flesh out the social feed feature of the design project, which would have added a greater dynamic to our mental health app. Similarly, with more time we would have been able to go through a greater number of rapid paper prototype iterations, likely resulting in better app usability. The truth is, there are already various alternative products that exist to support mental health in some way or another, whether through community, habit tracking, self-reflection, providing information and resources, journaling, mood tracking, or meditation. In the future, aside from adding more features and further prototyping and testing, it might be beneficial to give the app a strong personality or something that makes it stand out over alternatives. These could be things that cater to a user’s surface attention such as a cute mascot or a clean aesthetic, or UX aspects such as high effectiveness, efficiency, or utility.

Unlisted

--

--