A collective breathing game experience that can help improve your stress levels
CollateralPrinciple Prototype, Concept Video
TeamTony Jin, DongWhi Yoo
My RoleInterview with Expert, Competitive Analysis, Ideation, UI & UX Design, Usability Testing
Tools Sketch, Principle
Video demonstrating how does Up&Up work
Majority of students and millennial suffer from high level of stress in their daily lives. However, a lot of people do not pay attention to their stress levels and deal with that early. High stress levels can lead to more serious mental health issues, an outcome that is undesirable.
A fun, collective and immersive breathing game is created for students to utilize. Users will be able to practice breathing, a stress intervention technique, with friends or others in an immersive and relaxing environment provided by the app - Up & Up. The collective experience and collaboration promote peer support, hence improve participation from various users who are under high stress levels.
Here is a video explaining the details behind the project and how exactly does Up&Up work.
A lot of people experience high level of stress. Georgia Tech students, for instance, particularly suffer from a high level of stress due to their academic workload. If the high level of stress is not intervened or acknowledged early, it can lead to more serious mental health issues. In order to address the problem, our team decided to introduce stress intervention solutions with Georgia Tech students as our primary users in mind. As we narrowed down the problem space, we began our research process. We conducted in-depth interview with health expert from Georgia Tech's counseling center, interviews with 5 Georgia Tech students and competitive analysis to gain a better understanding of our problem space. The methods helped us to understand the following questions:
Interview with Health Expert
How many students are actually experiencing high level of stress or other mental health issues?
What are the major mental health issues concerning the GT student body?
Why do those major mental health issues are more significant among GT students?
What is the counselling center doing to address these issues?
How effective are the solutions?
Why are those methods effective?
Interview with GT students
What are some of the main sources of stress for GT students?
How are they currently coping with stress?
How effective are their current stress management methods?
What are they looking for when they need to cope with stress?
Are they aware of existing stress intervention techniques and utilize them?
What are some of the existing solutions out there to help users to cope with stress?
Are existing solutions good enough for users in terms of stress intervention?
What are some of the strengths and weaknesses of the existing solutions?
Not only does the research help us to understand the problem space and user group better, but also indicated it is a serious issue that needs to be addressed. As a matter of fact, over 1400 students have started going to the counseling center in the academic year 16-17. There is a total of 9671 counseling appointments made in last academic year. These are all proofs showing students need better support in terms of mental health. Moreover, our interview participants also indicated that they experience stress often. Our team came to an agreement that an effective solution needs to be introduced to intervene GT students' high stress level.
To ensure we are designing a solution that truly address users' problems, we first identified users' characteristics.
Majority of GT students are type A students, meaning they are extremely driven and achievement oriented. Therefore they experience a higher stress level than others.
Lack of time
With high workload and driven characteristics, majority of students do not have the time to properly take a break and relax - which is required for successful stress intervention.
Not suprisingly, GT students are technology oriented. Techniques/tracking methods involving technology introduced by counsellors are extremely welcomed by students.
Unaware of techniques
A lot of GT students are unaware of useful relaxation techniques such as breathing and muscle relaxation exercises. Yet these techniques have been proven as quite helpful in terms of stress intervention.
Users really need to learn and practice the stress intervention technique that are proven useful. This will provide them an extra useful weapon when dealing with high level of stress.
Simplicity & Convenience
As users have limited time, they need something that is simple to learn and convenient to use. If the solution is not simple and convenient enough, it will only cause extra stress to the users.
Users need to be reminded that they have to take a moment to pause when they are overwhelmed. Having friends reminding them to do so will be extremely effective.
Users need to experience something truly immersive so that they can temporarily forget about their sources of stress and actually enjoy the moment of pausing.
We also utilized the findings from our interviews to create 2 personas. These personas helped us to empathize with our user group in terms of the source of stress they experience, their goals and frustrations better before we move on to ideation and designing our solutions.
With the research done, we decided to focus on solutions that introduce breathing as a stress intervention technique. Not only is it simple and easy to do, it is also proven as extremely effective in our literature review and competitive analysis. Once we decided to focus on breathing exercises, we started a brainstorming session with 3 team members generating as much ideas as possible within two 15 minutes sessions. After brainstorming, we shared and grouped similar ideas together. In total, we generated 35 different ideas and they can be categorized into the following 4 categories.
Immersive collective experience
Individual app that connects
After discussion, we decided to pick our top 3 ideas and prototype them. Our goal at this stage is to get feedback from users early so that we can choose the best design based on users' comments and iterate our designs early with users' input.
Top 3 ideas
Collaborative breathing app
A breathing app that allows users to breathe alone or with others on campus. Various visualization patterns will be provided to show how are different users connected over breathing.
A public installation located in the center of campus which turns a room into a pitch dark setting filled with futons. Users will follow audio cues to breathe, and their breathing patterns will be visualized in ambient lighting.
Collective breathing game
A collective breathing game that allows users to connect with their friends and "blow" their sources of stresses away in the form of kites. Number of kites flying will vary based on the number of users.
We then conducted A/B testing with 6 participants with prototypes of all 3 ideas (Immersive room was presented in form of storyboard only while the other two were InVision prototypes). We then asked our participants to go through the prototypes thinking-out-loud to better understand how do users perceive each solution. At the end of the usability testing session, we also asked our participants to rate each solution according to how frequently will they be using them in real life, how effective do they think they are as stress intervention as well as how likely will they recommend them to their friends on a scale of 1-5. Here is a quick overview of the result.
Quantitative scores for comparing 3 solutions in A/B testing
It was clear to us that solution 2 and 3 were the most popular two out of all 3. The scores for these 2 solutions were also quite close. While solution 2 gets a slightly higher score, we did not simply chose to pursue it. We decided to review the pros and cons of the 2 solutions as well as our user needs again in order to decide which solution will work best for our users. Eventually, we chose to iterate on the collective breathing game idea because of the following reasons.
As mentioned, students only have limited time to practice the breathing exercise. It is clear that it is more convenient them to pick up the phone to practice instead of going to the center of campus all the time.
Concerns regarding disturbance
Users need moments to pause, calm down and relax. The immersive room which can hold 20 people will have a lot of people walking in and out, disturbing those who want to relax. However, an individual mobile game which can be used any time and anywhere individually will not cause any disturbance or extra stress to its users.
Users will need proper feedback to know if they are doing the breathing exercises correctly. It will be hard to reflect feedback to individual user effectively in a room with 20 people. Yet it is extremely easy to provide specific and clear feedback in the game.
Based on the comparison results, we decided to pursue idea 3 - collaborative breathing game. Yet we also could tell there is room for improvement based on our usability testing findings. Therefore, we moved on to iterating our design and completion of a high fidelity prototype.
04 Design & Iteration
After we conducted A/B testing, we analyzed our findings and identified opportunities for us to improve on our design. The iteration direction is listed as following.
Iteration & Design Direction
Emphasize on collaboration
Participants in A/B testing phase mentioned they think the kite flying game is slightly too competitive, as they see multiple kites flying for themselves in the sky. The game mechanism with elements of competition can create extra stress, so it should be redesigned into collaboration.
More intuitive representation
The kite which flew in the sky was a representation of how well the user was breathing in our first design. Yet a number of participants pointed out there was not a very clear linkage between kites and breathing. A more intuitive visual representation than kite is needed to represent the breathing.
A/B testing participants mentioned the game is interesting but it can get boring over time. A more immersive and stimulating factor is needed to attract them to play the game continuously and forget about their stress. Visual elements alone was not enough to provide an immersive experience.
With the iteration direction defined, our team came to agree to redesign the game named Up & Up - a game that translates users' breathing input into air that blows up a balloon. Multiple balloons will be tied together for one purpose - lifting a paper that represents user's main source of stress up to somewhere up high in the sky in a relaxing background (with calming music in background) chosen by users. Each balloon represents a participation from one player. Not only can tell users tell how well are they breathing with the inflation of the balloon, they can also provide extra momentum to support the group to lift up their main sources of stress. With more players collaborating in the multi-user mode, the balloons will fly even higher up in the sky. The height the group of balloons reached will turn into rewards in the form of money - which can be utilized by users to customize their balloons and add more backgrounds to the game to truly immerse themselves.
Prototype (Completed with Principle)
Demonstration of setup & introduction tutorial of Up & Up
Demonstration of multiplayer gameplay of Up & Up
As the designer of the team, I worked on the UI & UX design of the app. I first came up with a proper information architecture. Then I moved on to design majority of the screens. As I worked on the design of the UI, I also came up with a style guide to share with my team so that they can follow a consistent style when designing the rest of the screen.
IA of Up & Up
UI Style Guide
Style Guide of Up & Up
Actual Screen Designs
Screens of the app Up&Up - Setup
Screens of the app Up&Up - Game Play
Finally, we moved on to prototype the app with Principle. The end result can be seen in the video in introduction.
With the high-fidelity prototype completed, our team moved on to conduct usability testing with 6 new participants. We constructed the usability testing with 3 tasks involving thinking-out-loud in the process, including:
Complete registration process by selecting job-seeking as source of stress and completing the tutorial
Find other players who might be interested in playing the game with you
Play the game by following the instruction and use the reward
After completion of the tasks, we asked our participants to rate the protoype on the scale of 1-7 according to the frequency of use, effectiveness of use and how likely will they recommend it to friends. We also asked them to complete the SUS score rating to identify how usable is the proposed solution. The results we obtained were:
Frequency of Use
Effectiveness of Use
All participants completed all 3 tasks with ease. The overall results were quite positive, proving that we headed to the right direction with our iterations. Some of the positive comments we received were:
"The representation of balloon is really intuitive."
"I can feel my heart rate slowing down after I completed the game."
"The UI and music helped me to immerse into a different space"
"I like that my friends are helping me out in the game. I enjoy having their support."
While the results were positive, we also identified some potential areas for improvement for the next iteration. For instance some participants mentioned the gameplay is still fairly simple so they may not be using it frequently in real life once they lost interest. Therefore, we should consider adding more incentives in the design to encourage prolonged engagement. Another thing worth noting is that some users pointed out the breathing pattern is not so natural for them even though it's calming, therefore there is an opportunity to introduce more breathing patterns to help improve users' stress levels in ways they feel more comfortable about.
I have learnt a lot from the project. Here are some important takeaways
1. Test early, Iterate early
Our team decided to create interactive prototypes of our top 3 ideas early and conduct A/B testing with them. This decision was crucial in our design and project development, as the A/B testing results informed us which design works best for users and what do we still need to work on to improve our designs. Eventually, we manage to achieve more satisfying ratings with our fidelity prototype because of the iterations we did. That would not have been possible without our early usability testing.
2. Define metrics for evaluation
We decided to structure our usability testings with ratings. The ratings, which were translated as quantitative results, helped us to compare and contrast the effectiveness of each solution with ease. Moreover, it also helped us to see how much has the iteration improved when compared to the first prototype. These metrics should always be kept in mind when designing usability tests as well as the actual product.
3. Best practices of design collaboration
While I took charge of the UI & UX design, this is the first time I collaborated with other designers on completing the UI design for a school project. Our team decided to test out Abstract, a collaborative platform to share sketch files (think of it as GitHub for Sketch). This turns out to be a pleasant surprise as it improves the time to share and exchange sketch files. However, Abstract alone does not do all the work. We still had to make sure we established proper style guide before we get started so that the design stays consistent across.