Wireframe Explorations For A Behavioral Health App


Wireframe Explorations For A Behavioral Health App
Combining existing partner content with new features in an engaging behavioral health application.
Our workgroup was asked to explore ideas for a mobile app targeting alcohol use among military service members. Our target audience consisted of service members who had not yet developed serious issues with alcohol use but who were at some risk for abuse. I teamed with a SME (Subject Matter Expert) – in this case a clinical psychologist – in order to identify best clinical practices while designing persuasive interactions that would move beyond merely digitizing the clinical experience.


I began the process by conducting an environmental scan of current apps and web services. I considered not only alcohol related services, but any behavioral or persuasive design relating to drug abuse, smoking, exercise, diet, etc.


While I was conducting the environmental scan, I also began compiling and cataloging a comprehensive inventory of persuasive interaction design patterns. Coupled with the clinical best practices our SME had identified, this gave me a basis to evaluate the features identified in the environmental scan.

Inventory of persuasive interaction patterns


As a result of our research, I identified several promising behavioral change services. I summarized my findings in a report to our work group, presenting key features, SWOT analysis, and a feature analysis that compared these services against viable interaction patterns I had identified in my earlier inventory.

A strategic decision was made by the project development committee to pair with a suitable academic partner. Our SME provided a shortlist of likely partners with a demonstrated record of treatment. Using the same evaluation criteria we used previously, we made a selection and approached them with our proposition – use our design and development services to combine their content with features our own clinical advisors wished to incorporate.
In order to show our prospective partners what we had to offer, I was asked to design new features our SME believed would complement their content.


A core concept we wanted to impart to our users was the connection between moods (internal), expressions (external), and their behavior.


We began by introducing the concept of universal emotions: the theory that there are six emotions that are universally recognized across all cultures – Joy, Fear, Anger, Surprise, Sadness, and Disgust. Like primary colors, these emotions can be combined and their intensity varied to produce a wide range of more nuanced expressions.

Since I had already conceived of an emotion tracking tool for the app’s main screen, I saw this as an opportunity to introduce this tool to the user during the educational portion of the module. I developed the wireframes in a manner that would both explain the concept and the tool’s interface.


One of the challenges of designing behavioral health apps – especially ones that deal with behaviors the user may not be enthusiastic about addressing – is translating what works in a clinical setting into an app the user is motivated to use. Seeking an engaging interaction to anchor the user’s experience, I created a simplified version of the rigging tools digital artists use to manipulate the features of virtual characters. By selecting one of the six primary emotional vectors and adjusting a slider, the user could create a broad variety of expressions. Overtly, this connected the expression with its corresponding emotion and offered the user an easy means of naming and recording their emotional state – not only the type of emotion, but the intensity as well. But I had a less evident objective in mind when I designed the tool.

Based on the clinical experience of our SME, we assumed that our users would have limited experience identifying their emotions. I saw in the emotion tracker an opportunity to engage users and subtly help them start to recognize their own emotions. For anyone who’s tried the software, rigging tools are fun to play with and it’s easy to get caught up changing expressions and investigating the movement of our own facial muscles in the process. My hope was that users would have a similar experience – in playing with the tool and mimicking the on-screen expression they would begin to connect the sensation associated with each muscle group with its corresponding emotion.


In addition to the Universal Emotions module, I also wireframed Emotions in Context and Acceptance education modules and an Acceptance Tree – a decisional balance tool that allows the user to practice a form of mindfulness used in some forms of cognitive behavioral therapy.

After presenting my initial concepts to our group, they were passed on to our prospective partners. They were enthusiastic about the design and the prospect of partnering with us. I was asked to develop mid-fidelity wireframes intended to demonstrate how our new features would integrate with the partner’s content and how the text heavy content would be navigated.


I began the next phase by conducting a content inventory of the partner’s site and documenting the IA. I eliminated content our SME felt did not relate to the app’s function and created a new IA, fitting in our proposed features.

Revised content tree


We intended the app to coach users during stressful moments in their lives. Quick access to the management tools and ready reference to the coping strategies in the educational materials were therefore important parts of the app’s function. Because the remaining content was so text heavy, it was essential that the app structure allow for discoverability and quick access by stressed users. I specified accordion sections for each page to prevent content from being hidden off screen and ensure it was quickly accessible. App navigation was laid out in a side drawer menu. Rather than organize the main navigation menu by function, the menu’s structure mapped the content users would be working through, again using accordion menus. Despite the large amount of content, I felt this broad and shallow structure was the best option for allowing quick access to all of the content while navigating through a minimum number of screens and provide a conceptual outline allowing users to track their progress.

Side drawer navigation wireframes


Once the structure was established, I began creating graphic assets in Adobe Illustrator. These were combined using InDesign and, using its prototyping functions, I generated an interactive PDF that could be shared with stakeholders.

click to explore pdf in a new tab (hotspots in pink)