UX Designer
square_ww.png

Wishing Well

Wishing Well

10 weeks, Winter 2017, team of four

 

Wishing Well is a mobile application that provides the structure to allow a group of friends to support each other's mental wellness, as well as their own, through active reflections.

Wishing Well promotes honesty and vulnerability, positive and healthy relationships, and regular care for both yourself and your close friends.

 
 
 

Design Process

 

1. Problem definition

2. Design research

3. Task analysis

4. Design sketches

5. Storyboards

6. Paper prototype

7. Usability testing

7. Digital Mockups

 
 

The Team

 
 

Problem

 

Mental wellness goes beyond diagnosable mental health issues; it is the maintenance of wellness and prevention of problems, and is often self-motivated rather than prescribed. With increasing levels of stress and anxiety, how can we design an application that helps college students track and maintain personal mental wellness?

 

Our Research

 

We conducted research through three methods: two interviews with mental health counselors on campus, a survey of college students with 50 respondents, and a diary study with three participants. We had one week to design our research methods and carry them out, then three days to analyze our findings and design tasks.

 

Research

We conducted two one-on-one interviews with mental health counselors on campus and learned:

  • "Self-monitoring is an intervention in itself”
  • Relationships can be a great source of stress, but also a great source of support
  • Online support groups and communities can also be a helpful source to maintain mental wellness
  • Routine is incredibly important to maintain mental wellness
  • Mental wellness is just as important as physical wellness

From a survey, we identified six major themes in how our target group defines mental wellness:

  • Balance in life/time
  • Daily happiness
  • Peace of mind/feeling content
  • The absence of stress and/or anxiety
  • Positive social relationships
  • Self-care
Participant 1's notes for filling out an entry

Participant 1's notes for filling out an entry

Diary Studies

With our focus on tracking mental wellness, we knew a diary study would produce richer insights than just an interview.

The structure for each diary entry was flexible for each participant. In our initial meeting with each participant, we asked about the ways in which they already track their own mental wellness, then we asked them to track that in a diary entry. Our first participant, for example, knew that music was a huge indicator of his mental wellness, so he decided to write about it in his entries.

This flexible entry style allowed us to see how different people track different things, and each became a prototype of an application.

 

Themes from Research

 
  • Social relationships have a huge effect--both positive and negative-- on mental wellness
  • The act of checking in on a friend, and having a friend check in on you, is mutually beneficial
  • People will sometimes publicly post on social media if they aren't doing well to reach out for help
  • Awareness is an important factor in mental wellness
  • According to one of the mental health counselors we interviewed, "self-monitoring is an intervention in itself"
  • Helping people become more aware of their mental wellness already helps improve it

 

  • Each participants' diary entry styles were unique, but equally important
  • Accounting for differences in personal style and priorities is key in aiding mental wellness
  • If our design is not flexible, it won't be helpful

 

Task Analysis

After our design research, we found that a diary entry-based system may be a successful design solution for tracking mental wellness. Our diary studies provided rich evidence to base design decisions off of. We designed the following six potential tasks based on our research:

1. Building a habit of checking in on yourself

2. Determining what is important for a self check-in

3. Completing a self check-in

4. Checking in on your friends

5. Sharing feelings with a support system

6. Reaching out for help

 

 

Sketching

 

After determining six potential tasks, we sketched three potential designs each using four different tasks to explore the the design space.

 
 
IMG_2510.JPG
 

 

Design Sketch 1: Self-Journaling App

wishing_well_presentation.jpg
 

Our first design was based on creating a habit of checking in on yourself in order to increase awareness of your mental health.

 
 

Design Sketch 2: Wearable for Buddies

 

This design was based on allowing for quick self-checkins, with a social system based on one close "buddy." The buddy would see how you're doing, and you would see how they are doing. After various check-ins, the application would be able to start tracking helpful patterns in mood, such as location or time. A buddy is important to motivate you to continue checking in, to feel like someone cares about you, and to feel like you play an important role in someone else's mental wellness.

 
 

Design Sketch 3: Social App

wishing_well_presentation_5.jpg
 
 
 

This is the design we decided to move forward with. The social-based app is different from the buddy wearable because it is focused on a group support system rather than just two people accountable for each other. We went forward with this design because we had a great amount of evidence supporting it in our diary study, including one special diary entry where a participant's friend had called for a friend meeting to reach out for help. This meeting ended up being helpful for both the friend calling it as well as the participant writing about it, even though the participant was going through his own rough patch. We wanted to support group-based mutually beneficial actions like these on our application.

These groups of users are intended to be small groups of close friends who decide together to join the app and support each other. These are people who desire the scaffolding to help nurture each other's mental wellness while supporting their own.

 

 

Storyboard: Interactive Content with Alice and Caitlin

 
 
alice_440.jpg
 

Sketching out Screens

 

After presenting our storyboards and design sketches to the rest of the class, my team and I began to prepare for the next phase of our project (user testing) by designing the individual screens necessary to complete tasks in our chosen design. We also added a new feature: a visual calendar and color picker feature to help people easily consume information about their past entries. This decision was based on a recommendation from one of our diary study participants.

 

Usability Testing: Round 1

 

We asked our participants to complete the two tasks from our storyboards: completing a customized entry and interacting with a friend's content by "pinging" them. In our first round of testing, we had two participants.

This first round of testing allows us to quickly identify interface and basic functionality issues, and what we learn from it will allow us to identify deeper issues and validate design decisions in testing round two.

 
 

Findings from Testing, Round 1

1. Clarify onboarding and customization process

Participants were confused when they began using the application for several reasons. The entry customization process was confusing because participants didn't understand what the customizable sections meant and how they would be added to an entry. 

Design changes: A tutorial mode for new users explaining how entries and other features work, explanations of different customizable section types, no changes to how customization is done yet

 

2. Improve calendar view

When our participants looked at the calendar view to see past entries, they were confused and thought that tapping a day in the calendar would allow you to add an entry for that day. Participants also wanted to be able to scroll through past months.

Design changes: Reflect user's expectations and allow for tapping a day in the calendar to lead to a new entry for that day, add scrollable months

 

3. Streamline friends view

The current design for viewing friends' entries and deciding to ping them was inefficient and frustrating. Furthermore, the "ping" button was confusing and poorly placed.

Design changes: Move "ping" button to top right corner of screen, change "ping" to "knock," remove friends' front profile page and lead straight to entries calendar

 

Usability Testing: Round 2

 

After identifying some interface and functionality issues from two usability testing sessions, the team made design changes and prepared for a more formal usability testing round. This time, we were prepared with a script and written tasks. We tested with three participants.

 
 

Findings from Testing, Round 2

1. Tutorial improvements

Our new tutorial mode helped participants understand the functions of some features better, however, it also created some new problems. Participants didn't expect to still be able to interact with the app during the tutorial mode, and they wanted to get out of it. However, we want to still have some sort of tutorial function to showcase the functions and workings of the application.

Design change: Implement a card-type tutorial system for first time users that isn't interactive, where users can scroll through the tutorial or skip it

 

2. "Ping" vs. "Knock"

We switched the wording of this feature from "ping" to "knock" to avoid sounding too technical or harsh, however, this switch led to a lot of confusion about the meaning of the feature. The purpose of a ping is to reach out to a friend and show that you are there and you care. It is supposed to start a conversation. For now, we are switching back to "ping" because clarity conquers cuteness.

Design changes: Switch "knock" back to "ping"

 

3. Customization as an "expert" feature

We originally included the customization feature as a way to refine entries so that users don't feel like they need to fill out all sections. However, we observed participants skipping over sections they didn't want to do just fine. Rather than eliminate the customization button and feature, we are reframing it as a way to fine-tune details for users who want to do so.

Design changes: None

4. Streamline main navigation

Originally, our home screen was the only way to switch from viewing friends to viewing your own entries. Participants had to press back until they got to the home screen in order to switch views. We want the application to bring the two together more and allow for easier transitioning, rather than making the two features feel like two separate apps.

Design change: Implement a navigation bar at the bottom of the screen to quickly toggle views

 

 

Digital Mockup

 

After testing, we improved our screens based on feedback. We used Google's Material Design UI kit to build our interface.

 

Final Thoughts

This was one of my favorite projects and teams to work on.

 

 

If I were to continue working on this project, I would:

• Refine the UI further by giving it its own visual language (rather than elements of Material Design)

• Further develop how the app would first gain users

• Learn more about destigmatization of mental health and apply that knowledge to the app's design