Redesign of Cognitive Behavioral Therapy-based tool

The platform is an integrated set of clinically supported Cognitive Behavioral Therapy-based tools that support residents of a certain state in assessing, understanding, and working on their behavioral health and wellness through Wellness Assessments, Self-Help Therapy, Wellness Tools and a Progress Tracker.

The app seeks to provide immediate access to mental and behavioral health professionals and resources to all state residents so they don't have to search for a number or try to find resources online. They also get anytime access to mental health assessments and tools that remove the stigma associated with seeking care and puts resources in their hands faster.

The client had a cognitive behavioral therapy tool which they wanted to redesign for a US state government for all state residents. That would mean redesigning the app UI based on the updated requirements, and updating the design system & component library.

Since the new client was the US government, the app would also have to mandatorily meet Section 508 accessibility laws.

Additionally, WCAG 2.1 accessibility guidelines would need to be created to guide the product & development teams throughout the project.

Goals
1. Create & apply style guidelines & create design system (UI redesign)
- Develop and implement a comprehensive design system for the app, ensuring consistency across all screens and modules
- Integrate selected screens and modules from the original app into the redesigned app while maintaining a seamless user experience
‍
2. Ensure the app meets the mandatory WCAG 2.1 & Section 508 requirements
- Ensure that the mobile app adheres to WCAG 2.1 standards, meeting the stringent accessibility requirements set by the W3C
- Enhance the user experience by making the app accessible to users with diverse needs, including those with disabilities.

‍

To kick things off, we started with a series of discovery workshops with the client. This was aimed to drill down on client expectations as well as define the scope of the project.

Once we had an understanding of the client requirements, I moved on to the user research phase. This research uncovered key insights that directly helped us with decision-making going forward and finalise the UX of the platform.



State Resident Demographics
The client is the government of one of the mountain states in the Southwestern United States. It is the fifth-largest by area of the fifty states, but has very low population density with just over 2.1 million residents.

|---------------------|------------|
|       Ethnicity     | Percentage |
|---------------------|------------|
| Hispanic/Latino     |    50.1%   |
| White               |    35.9%   |
| Native American     |    11.2%   |
| African American    |     2.7%   |
|---------------------|------------|
|         Age         |            |
|---------------------|------------|
| 0-14 years          |   24.51%   |
| 15-64 years         |   67.17%   |
| 65+ years           |    8.32%   |
|---------------------|------------|
‍
‍

User Groups
- The primary user is a member of the public who is experiencing a behavioral health need themselves
- The secondary user is a member of the public seeking support or services for someone else



Key User Tasks / Scenarios
- Directly connect to a counselor or peer support worker
- Access up-to-date resources for substance use, mental and behavioral health services, and other community support
- Receive current information on the state’s response to COVID-19
- Access a complete mental health solution (mental health assessments and tools) that can be used as self-help or in conjunction with therapy.
- Resources section would need to be expanded and implement wildcard search, filter & facets, category searches & ability to refine the search.



I realised our target users might be stressed, unwell, cognitively or physically impaired when they're trying to access our services. They might not be in the right frame of mind to process complex information & take a decision from a multitude of different options.
‍
With this system, we want them to feel a sense of being supported & led through their challenge in a supportive, professional manner, as well as feel like they can rely on the tools & resources available to successfully navigate the behavioral health challenge either for themselves or a loved one.
‍

‍
Mobile App Heuristic Evaluation
‍Conducted a Heuristic Evaluation and analyzed the User Experience of the old mobile application.

In that process I did a detailed evaluation ofall the screens and recorded all the findings along with the possible improvements and suggestions.
‍
In this process we used rules of thumb to measure the usability of user interfaces in independent walkthroughs and reported issues. I used established heuristics (e.g., Nielsen-Molich’s) and uncovered insights that helped the design team enhance product usability quite early in development.
‍
‍
The 10 Heuristics
‍•Visibility of system status •Match between system and the real world •User control and freedom •Consistency and standards •Error prevention •Recognition rather than recall •Flexibility and efficiency of use •Aesthetic and minimalist design •Help and documentation
‍
I found the original mobile application had room to improve its usability and user experience by adding consistency, context, and continuity. Since the app's primary goal is to track a user's emotions and mental health, it should be extremely easy to use.



Mobile App Accessibility Checklist
‍This mobile application accessibility checklist details six inclusive design best practices for the redesigned app. I’ve aimed to distill the critical elements that our designers & developers will focus on to ensure accessibility and usability.

Platform
- Project is a replica app of the original mobile app only for end users
- UI will be the same for both Android & iOS
‍
Design
- Implement updated Style Guidelines to create design system for NMConnect
- Some screens / modules of Welltrack need to be integrated into NMConnect
- Adapt the existing WellTrack product to NMConnect requirements & style guidelines
‍
Integration & Implementation
- Any static screens, UI, colour updates for NMConnect-WellTrack will be only for this application.
- Any updates to the WellTrack application flow or UX will be reflected in the main WellTrack application.
‍
Features
- Link to directly connect to a counselor or peer support worker
- Access resources for substance use, mental and behavioral health services and COVID-19 information
- MoodCheck, user's daily mood tracker - Modules on stress, anxiety and depression
- Wellness Assessments, where users can measure their stress, anxiety and depression

Key solution elements
- Hotline
- Resources
- MoodCheck
- Accessibility Annotations & Documentation

Based on the insights gathered so far, we iterated a few initial wireframes for the homescreen. Once we had the go-ahead from the client, we crafted multiple UI designs for the homescreen, and presented them to the client.



Refinement
‍After a few rounds of back-and-forth with the client, including inputs from the client's team, we refined the final UI designs.
‍
As the UI designers started crafting the design system and components for the homescreen, I crafted low-fidelity prototypes for the rest of the app.

As we got the greenlight for each feature flow, it was passed on to the UI designers and presented to the client for review.

This document is intended to help document the accessibility features and facilate conversations with developers.

‍
By focusing on accessibility earlier in the UX process, we are hoping to avoid creating an inaccessible product from the start and build awareness of accessibility with all stakeholders.