A self-help iPhone app for GAD (Generalized Anxiety Disorder)

Relapse is a major concern for GAD patients. Treatment options that address one or two contributing causes – biology, upbringing, conditioning, stressors, self-talk and belief, ability to express feelings, etc. – usually only alleviate GAD symptoms temporarily. According to Bourne (2005), a complete program of recovery from an anxiety disorder must reduce physiological reactivity, eliminate avoidance behavior, and change subjective interpretations or self-talk which perpetuate a state of apprehension and worry. Meta-analyses have already shown computer-based self-help treatments to be effective in these areas (Williams 2001).

GAD patients tend to view the world as a threatening place, a misperception that can intensify quickly and lead to a downward spiral of anxious responses (Newman and Borkovec 1995). Cognitive-behavioral therapy (CBT), one of the most popular treatment options available for GAD, is based on this observation. Self-monitoring is foundational to CBT; patients are taught to pay attention to their anxiety level throughout daily activities to catch patterns of worrisome thinking early on and cope with them immediately using a variety of techniques. These can be personalized from patient to patient, but often include practices like meditation, guided imagery, muscle relaxation, deep breathing, etc.

Positive psychology is a semi-structured treatment for depression and anxiety that tries to shift patients’ focus towards positive emotions and personal strengths. Techniques can include daily exercises that emphasize positive experiences or structured journals to record such episodes of wellbeing. Positive psychology was designed as a complement to more comprehensive methods like CBT, not a freestanding alternative in its own right. That being said, studies show that positive psychology (also called Well-Being Therapy) paired with CBT can be more effective at preventing relapse in GAD patients than CBT alone (Fava et al. 2005).

Broadly speaking, color psychology is the study of color as it affects mood, emotions, and behavior. Though research in this area is sometimes criticized for its inconsistency, some studies make undisputed implications for software design. The reason red is almost always used in error messages or alert dialogs, for example, is because the color has been found to excite more emotion than neutral colors like blue and green (Jacobs and Seuss 1975). An orange headline may draw more attention than a gray one, for example, while a light blue background may feel more calming than a white one. Colors in this application were chosen based on relevant research in an attempt to ease users rather than exacerbate their anxious symptoms.

Before layout, color palettes, interactions, or any specific detail of the application’s visual design were considered, a few goals were solidified to keep in mind over the duration of the design process.

1. Ease of use

   This goal is trivial but helpful to keep in mind considering the target audience for the application. The design of this application should never be obtuse, or present an unnecessary burden to the user’s experience. If the user is already in an unpleasant or agitated mental state – a likely possibility given the nature of the disorder – this application should not exacerbate it.

2. Essential aspects of anxiety recovery

   Though the feature set of this application was kept to a bare minimum, users needed to be provided as complete a self-help anxiety recovery program as possible. Ideally, the application could confidently stand on its own as a starting point for relapse-free anxiety treatment, and easily allow for the possibility of extending it through more specific applications, such as Headspace or Calm for a more comprehensive meditation practice.

3. Unobtrusive yet involved

   This was the most important balancing act in designing the application. Consistency is important when attempting to overcome anxious symptoms; it’s easy to “forget” to practice relaxation techniques when everything feels like it’s going smoothly, though repetition is a key aspect of long-term anxiety recovery. On the other hand, users shouldn’t start perceiving the application as an annoyance more than an aid, so being mindful of this distinction as much as possible seemed paramount.

As an additional aid in the design process, four personas were created as representations of the application’s target audience, guided by research of GAD symptoms and recurring personality traits. Anxiety often develops gradually between childhood and middle age (Generalized Anxiety Disorder 2014), so three of the four example users are in their early 20s or 30s. Female GAD patients outnumber males, but for simplicity’s sake both genders are equally represented. The other characteristics – hobbies, life situations, ethnicity – are either arbitrary or specified for diversity purposes:

• 

  Guii Pontes

  • 23 years old
  • Marketing graduate
  • Hobbyist golfer

  Guii started struggling with anxiety after a recent breakup. He's starting to see a new person and although they're enjoying their time together, he struggles with negative self-talk and worrying that she’ll stop talking to him. He's started to lose sleep and now seeks a tool to help him relax so he can focus in his relationships and at work.

• 

  Chloe Park

  • 21 years old
  • Design student
  • Avid reader

  Chloe has dealt with anxiety in one form or another for a few years now, though she rarely talks about it with any of her close friends or family members because she’s ashamed to admit how she feels. Recently, however, she’s finding it harder to not get agitated at little details and other’s behaviors, which are detracting from her relationships with people she truly cares about. She’s determined to take action into her own hands.

• 

  Aaron Boyd

  • 46 years old
  • Architect
  • Music lover

  Aaron’s recent loss of a best friend in a tragic car accident has started making him anxious when his wife or teenage daughter get behind the wheel. He understands this fear is somewhat irrational, and would like to minimize his episodes of catastrophizing whilst remaining aware of the dangers of driving and doing his best to keep his family safe.

• 

  Lucy Chen

  • 32 years old
  • Analyst
  • Amateur gamer

  Lucy has never identified as an anxious person, but recently started feeling discontent in everyday life and attributes this to her incessant worrying about being judged by those around her. She’s tried self-help applications before but either dismissed them as irrelevant or forgot about them entirely. Regardless, she’d like to become more aware of these thought patterns to prevent them from impacting her behavior in social situations and at work.

This step helped establish a clear direction for the application’s design. By putting a face (albeit imaginary) to these users, it became easier to establish a visual hierarchy for the application, prioritize certain features over others, and limit the number of overall screens to a bare minimum. These personas were referred to repeatedly throughout the rest of the design process.

With personas, goals, and core features in place, I sketched wireframes with some initial ideas for the application’s layout and main screens:

These wireframes served well for the remainder of the design stage. The choices and thinking visible here will be explained in detail below.

I used (Sketch) to flesh out the wireframes into workable high-fidelity mockups:

The application is divided into three primary actions: “Learn”, “Relax”, and “Reflect”, each representing one of the core features described above. A tab layout was used in accordance to the iOS HIG, which prefers a tab bar to support a flat information architecture (2014, p 49). The tab icons were taken from the NounProject, and used with permission.

Onboarding

When a user launches the application for the first time after downloading they’re greeted with the following onboarding tutorial:

Onboarding tutorials like this are a kind of gray area in iOS app design. At best, they provide a clearer starting point for new users than, say, an empty screen; at worst, they force the user to read fluffy marketing text and/or sign up for a service before they can begin using the application. Apple seems divided on the issue as well, advising designers to “think carefully before providing an onboarding experience” (iOS Human Interface Guidelines 2014, p 36). I heeded their advice and decided a brief instruction screen would offer a better springboard for guided recovery than the default screen (the Relax tab).

The tutorial was designed with Apple’s guidelines in mind. Specifically, the HIG instructs:

• “Give users only the information they need to get started” (p 38)

  The screens included in the final application were deemed most important for first launch. A brief description of GAD (Figure 2.8) was included after the welcome slide to provide a clear understanding of the disorder and who might be affected. Next, an explanation of the application’s three main tabs and how to use them was displayed (Figure 2.9). The daily reflection reminder preference wasn’t shown here, set to a reasonable default of 8p.m. instead, while the relaxation reminder – which ideally would be set to the user’s normal waking time – felt more individualized so it was shown in the second to last slide (Figure 2.10). The last slide contained some final words of encouragement, and a button to dismiss the tutorial (Figure 2.11).

• “Use animation and interactivity to engage users and help them learn by doing” (2014, p 38)

  Admittedly, the onboarding tutorial falls short from a user engagement perspective. Given more time, some slides could certainly benefit from additional interactivity, especially the one shown in Figure 2.9 which a user might reasonably skip due to its intimidating length. In any case, the tutorial itself is interactive, using the recommended page control (p 49) to allow users to swipe back and forth between slides.

• “Make it easy to dismiss or skip the onboarding experience” (p 39)

  Apple encourages developers to remember whether a user has viewed the onboarding tutorial to ensure it’s only displayed once. This was implemented during the development phase of the application.

Once the user reaches the final slide of the tutorial and taps the “Get Started” button, the tutorial is dismissed and they can begin exploring the application.

Learn tab

This tab (Figure 2.4) represents the first core feature from the section above: reading materials. There are two UI elements on this screen: a button to re-launch the instructions slide from the onboarding tutorial (Figure 2.9) and a table view listing of the available readings. The readings are excerpts from Bourne and the National Institute of Mental Health. When a user taps one of the available readings (Figure 2.12), an expanded reading view opens (Figure 2.13). As the user scrolls to begin reading, the navigation bar and status bar disappear to support a full-screen presentation (Figure 2.14). These elements reappear when the user scrolls back up, allowing him/her to return to use the standard navigation buttons to return to the Learn tab.

The background color of this tab is light blue, chosen for its calming properties (Jacobs and Seuss 1975) and suitability for dark foreground text.

Relax tab

This tab represents the second core feature from the section above. Because of its importance, this tab is selected by default when the user launches the application (except in certain situations). The background color of this tab is a vibrant blue, chosen for its relaxing properties (Jacobs and Seuss 1975) and to distinguish between the lighter blue of the Learn tab.

There are two UI elements on this screen: a notification icon at the top and a mood picker in the middle. The icon was placed at the top because the tab bar occupies the bottom (an iOS convention) and because this seemed to align with Apple’s placement of similar controls, as seen with the “Scheduled” icon in Apple’s Reminders application (Figure 2.15):

When tapped (Figure 2.16), the reminder icon opens the view in Figure 2.17, which lets the user toggle the daily relaxation reminder and change its time. Changes to these settings are saved automatically, so this view can be dismissed by tapping anywhere else on the screen.

The mood picker is the primary focus of this screen, as it allows the user to begin the relaxation process. The picker consists of three buttons, labeled with appropriate Emoji characters to represent the various moods a user might identify with. Once the user selects one (Figure 2.18), a similar view appears underneath for him/her to determine the duration of their relaxation session. When the duration is selected (Figure 2.19), an appropriate relaxation exercise – or sequence of exercises, depending on the duration chosen – appears (Figure 2.20) and the user can begin relaxing.

There are four relaxation exercises included in this application. Depending on the user’s choice of mood and duration, a relaxation session can consist of 1-3 exercises. Each exercise has instructions at the top and a progress button at the bottom; if the current exercise is the only or final exercise in the sequence, this button is labelled “Done” and tapping it will return to the Relax tab. Otherwise, this button is labelled “Next” and tapping it advances to the next exercise. The relaxation exercises are determined in accordance with the guidelines from Bourne (2005), discussed in detail below:

1. Calming scene exercise

   This exercise is prioritized for less anxious moods, and as such was designed to convey a more playful, lighthearted attitude. It displays a full-screen looping video of a calming landscape which pans automatically if the user tilts their device left or right. The user can also swipe left or right to change to any of the 5 included landscapes, and the application will remember which one they viewed last to display the next time they use the exercise.

   • 
   • 
   • 

   The instruction text will fade out automatically after a brief interval, but the user can tap anywhere on the screen to make it reappear if desired.

2. Deep breathing exercise

   This exercise is prioritized for more anxious states, driven by a single button that guides the user through a deep abdomen breathing procedure. When the user first taps the "Begin" button, the button's label changes to instructions while the button itself grows or shrinks as an additional visual aid.

   1. 

   2. 

   3. 

   The user can pause the exercise by tapping on the button again. The instruction text functions the same as in the Calming Scene exercise, disappearing automatically and reappearing on tap.

3. Coping statements exercise

   This is the simplest yet most beneficial exercise for anxious mental states. It displays a list of coping statements, taken mostly from Bourne (2005, p 417-418), that the user is encouraged to mentally repeat to create a feeling of acceptance, understanding that the instinct to resist an anxious episode only makes it more unpleasant. The user can scroll this list freely and focus on any statement that he/she finds most relevant.

   • 
   • 

   Due to its importance in these scenarios, it's always the first exercise whenever the user chooses the most anxious mood in the picker.

4. Guided meditation exercise

   This exercise is prioritized for the least anxious moods, as it likely requires the most focus and may not yield as immediate results as the other exercises. Like the breathing exercise, it consists of a single button to play a guided 10-minute meditation recording.

   1. 

   2. 

   3. 

   If the recording is already playing, the button can be used to pause playback, and vice-versa. The instruction text in this exercise behaves exactly the same as in the deep breathing exercise.

Reflect tab

This tab represents the final core feature: positive psychology to create a long-term shift towards relapse prevention and positivity. This tab uses a vibrant green background color, chosen for its calming properties (Jacobs and Seuss 1975) and to differentiate between the Relax tab.

There are three main UI elements on this screen: a notification icon at the top, a compose button in the middle, and a timeline view below. The former works identically to the icon in the Relax tab, allowing the user to configure the daily reflection reminder:

The compose button is the primary focus on this screen. When tapped (Figure 2.31), it opens the New Reflection screen (Figure 2.32) and lets the user log a positive event at any point during the day. New events are added to the top of the timeline (Figure 2.34), which groups the last month’s reflections in reverse chronological order by day. The button itself uses the standard iOS compose icon found in Apple’s own Mail application.

The timeline is a customized table view, following Apple’s aforementioned recommendation, and can be scrolled freely to view previous reflections.

Despite the overall positive experiences, there were a few minor stumbling blocks nearly every user seemed to run into during their tests, knowingly or unknowingly.

1. "Set Reminder" button in onboarding

   Only two of the eight users tapped the "Set Reminder" button from the daily relaxation reminder slide shown in Figure 2.10. The intended flow of this screen was:

   1. User chooses relaxation reminder time using the time picker
   2. User taps "Set Reminder" button to create the reminder

   From observing the users' behavior, however, the second step seemed redundant; as the relaxation reminder is created anyway, any time the user picks on this screen should be used without the additional confirmation step. The "Set Reminder" button was therefore removed, and the functionality of the date picker was tweaked to configure the reminder automatically.

   1. 

   2. 

2. Larger text button hit areas

   Many users "missed" some of the text-only buttons – "Get Started" in Figure 2.11, "Next"/"Done" in any of the relaxation exercises, etc. – so the tappable area of these buttons was increased by 15pt on each side. This change is invisible to the users, but should result in fewer mis-taps.

3. Taps inside reminder views

   In trying to enable or disable a reminder using the toggle switch (Figure 2.30), some users inadvertently closed the view entirely. This occurred because any taps in this view outside of the switch or date picker were improperly configured to dismiss the view. This has been corrected; only taps outside the reminder view can dismiss it now.