Breather App Wireframe Prototype For Anxiety, February 2018

Breather is an app that helps people with panic attacks and anxiety, mainly through a collection of exercises aimed at calming the mind and body. The app is designed to be simple and straightforward, so that in a moment of panic it can be used easily.

This project was part of an upper-level undergraduate prototyping course in Human Centered Design & Engineering at the University of Washington in Winter 2018. For more information on the prototyping class (or to see other projects from the course), click here.

The final interactive component is below. Feel free to click through the different elements of the app-- for example, try selecting "breathing" and then "simple guided."

 
 
 
 

Navigational Map, a list of all wireframes, and annotations can be found in the slideshow below:

 
 

Breather draws some aspects from the A1 paper prototype of the same name from my 451 class, which was originally a smartphone-smartwatch pair and only had one breathing exercise function and one scheduling function. However, the current Breather app does away with the smartwatch aspect and instead borrows a few functions from A1, incorporating them into the final product.

The new Breather concept is a collection of exercises, split into three main categories: breathing exercises, grounding exercises, and cognitive diversions. The aim of Breather is to provide anxiety relief in a simple and distraction-free setting—getting rid of extra features to make it easier to use, and also to reduce the risk of overwhelming the user. Other meditation apps, such as Headspace, provide a wide variety of features but are also very busy, and may be overwhelming to a user, particularly in a panic.

I myself have dealt with anxiety and panic attacks before, and from experience, it may be difficult to sift through different resources to find what you need in the moment. Many of the exercises aggregated in this app were suggested to me while I was working through my anxiety, such as the four-six-eight breathing exercise, and the shape exercise (an example of which can be found below.)

 
 
 
 

Additionally, this app is also meant to be a flexible tool, and exercises could theoretically be added with ease as time goes on.

For the purposes of this project, I constructed two prototypes: a paper prototype and an interactive wireframe prototype. After evaluating those, I made changes to the interactive wireframe prototype and made a final set of improved annotated wireframes of a higher fidelity.

 

Prototyping Goals

I am a firm believer in the philosophy that many times, simpler is better. However, there is a problem with over-simplifying something, and that is that sometimes functionality is lost in favor of that simplicity.

The purpose in constructing my prototypes is to evaluate for desirability and usability of the product. Originally, the paper prototype was to be used to evaluate desirability and the wireframes for usability.

Below I have documented the design process for creating the app.

 

 

Phase 1: Paper Prototype

The image below contains the main components of the paper prototype for the Breather app.  Since I assumed that the Breathing, Grounding and Cognitive Diversion interactions would be fairly similar in nature, the paper prototype only focuses on the Breathing interaction.

 
 
 
 

Implementation

The paper prototype was cut from standard weight paper. While the app was more or less entirely planned out, only certain aspects of it were turned to a paper prototype to test specific pathways. The paper prototype was valuable in understanding if the simplicity and my design for the interaction is valuable and easy to understand.

 
 
These are the preliminary layout sketches and brainstormed ideas I used in creating my app

These are the preliminary layout sketches and brainstormed ideas I used in creating my app

This is the original sketch of the navigational map. Note how functions such as scheduling a session and setting a timer are missing. In addition, the Cognitive Diversions section was planned to look similar to the Breathing and Grounding sections. This was later removed for the paper prototype, but reintroduced after the evaluations in Phase 2

This is the original sketch of the navigational map. Note how functions such as scheduling a session and setting a timer are missing. In addition, the Cognitive Diversions section was planned to look similar to the Breathing and Grounding sections. This was later removed for the paper prototype, but reintroduced after the evaluations in Phase 2

 
 

Evaluation

The paper prototype was evaluated with two people between the ages of 20 to 22. Generally, participants were asked to pick a specific breathing exercise, pause the exercise, set a timer for a timed exercise and schedule a session for later.

The prototype itself was a successful tool for evaluation, and allowed me to glean the answers to the question, “Is this too simple?” Overall, people liked the simplicity and found the app easy to follow, and were able to complete the tasks with minimal prompting.

However, there were times when removing distracting elements did not work as well. Most importantly, one of the participants mentioned that pausing an exercise was not intuitive. I had left out any sort of prompt instructing the user on how to pause an exercise and pull up the menu, as I had wanted to get rid of any elements that might be distracting. In the end, I added the prompt to the app as a temporary popup.

 

 

Phase 2: Interactive Wireframes

The first interactive wireframe prototype that was used for testing can be found below. As with the final prototype, you can click different elements on the embedded prototype.

 
 
 
 

These wireframes can also be viewed as images in this gallery:

 
 
 
 

Implementation

The interactive wireframes were created using Adobe XD and improve upon my paper prototype. The focus of the interactive wireframes was the general layout and navigability, with the addition of attention to aesthetic. The interactive wireframe prototype is not fully functional, however, as XD doesn’t allow state changes (such as a popup menu appearing or disappearing, or an on/off toggle) or moving elements. However, XD was very useful for measuring whether or not something was “too simple.” While the paper prototype only covered a few aspects of the app, the interactive wireframe was more or less complete, though some exercise pages were more like example templates (such as the cognitive diversion prompt cards.) In addition, placeholder boxes were used in place of icons.

Since the app pushes a minimalistic design and does not contain many complex graphical elements, it relies heavily on typography instead, forcing me to be particularly conscious of my font choice. The font I chose was Montserrat Light, with occasional uses of Montserrat Regular and Montserrat ExtraLight. Montserrat is a simple, sans-serif font with geometric influences that is modern and friendly. I went with Montserrat Light as the main font, as the thinner lines enforced the calm, airy feel that I thought went well with the “Breather” aesthetic.

 
 
This is an example of a wireframe from Phase 2. Note that the hamburger menu, while present, does not function, and that placeholder boxes exist in place of icons

This is an example of a wireframe from Phase 2. Note that the hamburger menu, while present, does not function, and that placeholder boxes exist in place of icons

These are different fonts that I considered while creating a look for the wireframes. These fonts all have lighter weights, are sans-serif, and are reminiscent of geometric fonts

These are different fonts that I considered while creating a look for the wireframes. These fonts all have lighter weights, are sans-serif, and are reminiscent of geometric fonts

 
 

Evaluation

The app was evaluated with three people between the ages of 20 to 22, who were asked to complete tasks similar to those in Phase 1 (navigate to a breathing exercise, set a timer, and schedule a session), but were also asked to complete a few additional tasks, such as navigating to a grounding exercise, looking for a cognitive diversion they liked, and finding the about page. These tasks together covered the full breadth of the app. However, as the app was not fully functional, tasks were altered so that they were more about navigation, rather than completion. For example, participants were asked to locate the "Schedule a Session" page and were asked how they would go about scheduling a session, but they could not actually schedule the session within the prototype. Still, the prototype evaluation was successful, and allowed me to understand which parts of the app needed improvement.

The biggest thing that became apparent from the test of the interactive wireframes was an occasional lack of consistency. In particular, this was true for the lowercasing/uppercasing of titles and the organization of the cognitive diversions. In the case of deciding between lowercase and uppercase, I had originally chosen to use mainly lower case for titles as a stylistic choice; however, I used uppercase in some places (such as exercise titles) and sentence case in others (such as title pages and some prompts). While this inconsistency is not necessarily a big problem, it still was an indicator to me that I had placed form above function in attempting to stylize the app. This was later fixed to be more consistent across the app.

In addition to this, the cognitive diversions section of the app was much different in organization than the other sections. While none of my users mentioned this, it was apparent that they perceived a difference and were confused as to why the cognitive diversions did not have an introductory page with a list, as the breathing and grounding pages did. This was fixed so that the cognitive diversions section mirrored the others—the introductory list page was added, the arrows and menus were removed from the prompt cards, and a pause menu was added.

Beyond the consistency, one thing I did notice about the app was that the word “back” in the pause menu was not intuitive for users—many were confused about where it would lead, and tapped it thinking they would return either to their exercise or the home page. In this case, I had used the word “back” because it was short and fit with the minimalist nature of the app. However, in this case I had once again simplified something too much. In the end, I replaced the word “back” with the name of the specific page the link lead to.

In the end, however, the app was well received overall. The simple, minimalist style was generally liked by participants and generally did not decrease the usability of the app.

 

 

Final Wireframes

Full documentation of the final wireframes, as well as the final interactive prototype can be found at the top of the page.

The final wireframes were also made using Adobe XD, and more or less mirrored the wireframes in Phase 2, with minor improvements based on user feedback. Symbols were added to replace the placeholder boxes. I also added “favorites” and “shuffle” functions to the cognitive diversions section. The app is complete in black and white.

 

 

Analysis

I was very satisfied with the way the prototypes turned out, particularly the final iteration of the wireframes. However, if I were to expand upon this project, there are some things I would change or add. As this was a short project, I did not have enough time to gather comprehensive background research relating to the app. If this were a more robust project, I would have liked to have more information on anxiety, how it affects people, as well as the opinions of mental health professionals. Much of this app is based solely on my own experiences. (Example: I had been taught a 4-6-8 breathing pattern, though much of the internet seems to agree that it should be 4-7-8.) However, the app would have much more of a profound impact if more of the design decisions were informed by research.

Expanding upon that, I would also have liked to use different testing methods to evaluate my designs—in particular, it would have been beneficial to evaluate the designs using a population with anxiety, or at least to mimic a stressful situation for participants (such giving the participants timed tests). I did not do these things for reasons of ethics and limited resources, even though those with anxiety are my target users. Additionally, because the app prototypes were not fully functional, and therefore did not have much in the way of error correction functions, it would be unfair to asks participants to complete tasks while being timed.

Beyond that, if I were to continue the project, I would like to further explore the possibility of using color; while I like the minimalist black and white, I think that adding color could be a good way to increase user engagement and enhance the visual aspect further. I would have to be careful, though, to choose color palettes that are soothing, and would not be anxiety-inducing. For the prototype, I would also like something more fully functional that includes state change functionality and animations, to be able to fully evaluate the prototype.

Overall, though, this was a fun project!