How can we aid people to tackle or address on actual stressors in a long term way?

 I made this illustration! Actually, I made all the illustrations for our app! :)

I made this illustration! Actually, I made all the illustrations for our app! :)


Date:  Jan - March 2018

Skills: UX Design, Design Thinking, Human -Centered Design, Interview

Tools: Sketch, Invision

Role: UX Designer, Visual Designer

Team: Corss-functional team of 5

WeChat Screenshot_20180311161408.png

Problem space

According to the National Institute for Mental Health, approximately 1 in 5 Americans experience a mental illness or disorder in a given year. We have a large population experience mental illness, but not of them take it seriously. At first we were trying to find a way to help the user deal with the stressors.

WeChat Screenshot_20180311161649.png


Through interviews we were able to identify our main users. A set of interview questions was devised to be used as a standard framework for each of the interviews. We each conducted them separately across the UCSD campus. We incorporated the interview techniques we learned before, which was the master/apprentice model.  We let the interviewee really lead the talking. Here are example questions we asked to interviewees:

For therapist:

  • Are you familiar with any technology used to help patients relieve stress?
  • How do you get patients engaged with their treatments?
  • How do you let the patients see what the bad and good habits are in their life?
  • How do patients know their needs of the therapy session?

For college students and young professionals:

  • What do you do to get your mind off things? (just to see how they cope with stress)
  • How do you know you feel stressed?
  • Do you deal with stress?
  • When do you usually feel stressed and why?
  • What do you think is not helpful for stress relief?
WeChat Image_20180311143827.png

We gained meaningful quantitative and qualitative data from our interviewees. We learned from the therapists about the importance of self-reflection. They concluded that people don't spend enough time for themselves to examine how and what they are feeling. We also interviewed college students and several young professionals to learn about their thoughts. We found that people do know they are stressed but tend to avoid addressing the stressors. Also, they would rather avoid it than dealing with the issues, creating a vicious cycle. Further than that, people are able to acknowledge that they are stressed but many of them tend to ignore and not spend time to scan themselves how they feel.

WeChat Screenshot_20180311161755.png

Define our design space

After our interviews, we were able to define our design space.

  • How might we aid our target users in finding long term solutions for tackling or addressing actual stressors?

We hope to guide them to acknowledge the stressors and tackle on it. Based on our interview data, we were able to make our personas with empathy in our minds.

WeChat Screenshot_20180322171414.png


Jesse Hutchins

Age: 21

Occupation: College Student

Scenario: When overwhelmed, she puts away things and starts watching Netflix.  She feels good for the moment, but once she is back to the reality she is stressed again.

WeChat Screenshot_20180322171440.png


Tyler D’Andre

Age: 33

Occupation: Investment Banker

Scenario: Tyler started to be aware of his mental health, so started exploring activities such as yoga.  However, he is not sure if it is actually helping him.

WeChat Screenshot_20180311161955.png


We followed Double Diamond design process model. We first thought of different solutions of the problem space. We then visualize those ideas by storyboards. After brainstorming time we converged on our ideas and narrowed them into ones that were feasible. We then finalized our moodboard. Finally, we started some cardboard prototyping! In this process we synthesized our interview data and refining our design concepts.

We also thought about integrating sensors and other interactive technologies to aid our user.  We used the Spire Mindfulness and Activity Tracker from Apple as to keep track of how our user is doing. We decided to have an agent for our user. The agent would take advantages of machine learning to perform needfinding with users. Our agent would learn from users' words/voice input and generated a priority list for our user. In this way, the user would be able to know which stressor they should take care of first. Also, by the power of sensor, we could visualize the data and displayed a graph to our user.

WeChat Screenshot_20180311162117.png

Pilot Test

We did two rounds of pilot test with our potential users. We ran the test with low-fidelity paper prototype so that we were able to make any quick changes. However, we were not able to implement any animation in this case, which could be less user-friendly. During this process we were able to know if our workflow was streamlined from users' perspective. We also learned that we were missing some screens that our user needed. I also found that we had to explain to our user in every step, which indicated the fact that our app was not user-friendly enough at that time. Based on the testing results, we made several iterations on our prototype.

WeChat Screenshot_20180311162222.png


We came up with high-fidelity prototype after our pilot test. We discussed on the development of a consistent design language. I created a basic style guide based on our discussion. The guide loosely defined our typography, colors, icons, spacing and information architecture. I considered this as the foundation for guiding our work in a unified direction while allowing room for us to individually explore creative design solutions. This way we felt that we were all working together, towards the same ideas. Here are a few interfaces that I made for our app by Sketch. I made all illustrations and I designed the workflow based on the data we had. Please check the interactive version on Invision. :D

Improvements made:

  • Interactive splash screen animation
  • Tutorial screens to guide first time user
  • Loading screens during the synchronization between phone and tracker
  • Allow both voice and written input as to make our user feel more comfortable open their mind
  • Little reward feature: The agent will water the plant whenever the user finish a task
WeChat Screenshot_20180311162815.png

User testing

We tested our prototype on 4 different users as to garner feedback. From the feedback I realized that things that were intuitive to me were not clear enough for our users. We recorded the screen. Here is the link to one of the user testing video. We made modification to our app based on those valuable feedback. Here is a subset of the feedback we got:


  • The AI agent
  • The design & color scheme
  • "Everything feels very pleasant."
  • "Tree thing is very creative, grows when you complete tasks."


  • "Button placements issues. It is important that the flow should be intuitive so that I know where to press."


  • "Confusing that I am clicking on my own profile icon to chat with the AI. It feels like I’m talking to myself and not an agent."
  • "Why is the login button on the top right of the screen?" 
  • "Confused about the loading screen. Why do I have to log in twice?"
  • "Buttons and instructions can be made more easy to perceive."
  • How can I read more about how to complete these tasks?"
WeChat Screenshot_20180322164459.png


We made a poster and pitch slide for our application! Check out the slide hereIt was an precious experience for our team to present our idea to all other talented designers!

 Team Focus! Jenny, Echo, Yutong, Julian and Eric! :D

Team Focus! Jenny, Echo, Yutong, Julian and Eric! :D

WeChat Screenshot_20180311162329.png


Bringing up mindfulness for everyone will be a long way to go. For our app, a few improvements can be made if we have more time. Since most of the users had trouble understood our animation/loading screen on InVison, I would like to make animation by Framer.js for those processes. Also, InVison was not able to handle logic issues. We would like to have different set of screens for first-time users and other users as we had a set of tutorial screens for our first-time users. Also, I would like to do empathy mapping for the user as to better understanding their needs.

Given the limited time and vast scope of our idea, it was challenging to focus on just one aspect of the solution. Constant communication with each other played a huge role in the success of this project. :)