I used (Sketch) to flesh out the wireframes into workable high-fidelity mockups:
-
2.4
Learn tab
-
2.5
Relax tab
-
2.6
Reflect tab
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:
-
2.7
Onboarding welcome page
-
2.8
Onboarding GAD page
-
2.9
Onboarding tutorial page
-
2.10
Onboarding reminder page
-
2.11
Onboarding complete page
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.
-
2.12
User taps reading
-
2.13
Reading opens
-
2.14
User scrolls
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):
2.15
Reminders.app
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.
-
2.16
User taps reminder icon
-
2.17
Time picker opens
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.
-
2.18
User chooses mood
-
2.19
User chooses duration
-
2.20
Appropriate relaxation exercise(s) opens
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:
-
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.
2.21
Calming Scene Meditation 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.
-
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.
-
2.22
Deep breathing exercise
-
2.23
User taps begin button
-
2.24
Exercise begins
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.
-
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.
2.25
Coping statements exercise
Due to its importance in these scenarios, it's always the first exercise whenever the user chooses the most anxious mood in the picker.
-
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.
-
2.26
Guided meditation exercise
-
2.27
User taps play button
-
2.28
Exercise begins
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:
-
2.29
User taps reminder icon
-
2.30
Time picker opens
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.
-
2.31
User taps reflect button
-
2.32
New reflection screen appears
-
2.33
User taps Done button on keyboard
-
2.34
Reflection is added to timeline
The timeline is a customized table view, following Apple’s aforementioned recommendation, and can be scrolled freely to view previous reflections.