Breather App for People with Anxiety

The 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.

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.

These are the preliminary layout sketches and brainstormed ideas I used in creating my app, along with 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.

Evaluating the Paper Prototype

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.

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.

Evaluating the Interactive Wireframe

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.

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.

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, I was satisfied with this project. It had a lot of personal meaning to me, as I had (and actually still have) an anxiety disorder. Perhaps I'll come back to this some day in the future.