MHCa

Giving young men of color access to self-expression and mental health education

iOS Mobile, UX + UI, Information Architecture, Visual Design

Project Overview:

Client

Mental Health California (also referred to as MHCa)is a 501(c)3 non-profit organization that partners with the State of California and other organizations to provide Californians with mental health education and awareness. This is done through state-funded literature, training, and forums.

Context:

Status: Delivered
Role: Product Designer (Individual Contributor)
Tools: Figma
Skills: Research, Wireframing, Prototyping
Timeline: 8 Weeks, 2019

The Solution: an MVP iOS mobile app with therapeutic features

Mood Tracking Calendar:

Consistency is key when it comes to mental health wellness. Integrated a mood-tracking calendar can help users notice positive and negative patterns in their behavior that effect their mental health.

Journaling:

Interactive journaling provides a safe space for users to express their emotions and attach inspiring and self-generated content.

Curated Content:

User interviews revealed that users often seek comfort in their role models and media (such as music, comedy, and news).

Scope

1. User Research
2. Information Architecture
3. Ideation
4. Interaction Design
5. Visual Design
6. Prototyping
7. User Testing

The Problem: +1,000 mental health apps on the market, yet none built by and for young men of color

According to the Anxiety and Depression Association of America, mental health apps can make therapy more accessible; they are proven to be effective, personal, interactive, and research-backed. However, amongst the plethora of mental health apps available today, none provide restorative techniques specific to young men of color.

The Goals

1. Create an MVP: design a MVP iOS mobile app back by quantitative and qualitative research

2. Handoff + Delivery: Design the MVP as a starting point for future designers by providing the initial information architecture, user interface, and design system

process explanation coming soon!

1. Research:

Trust and foreshadowing are crucial for a user to “go with the flow.”

Comprehension Testing + Usability Testing

In order to understand where and why users were dropping off, I conducted a product audit on Nova Credit’s current website and flow with 6 users (who matched Nova Credit’s typical user, 20 - 34, highly educated, working in tech). This initial round of testing showed:

2. Design

Creating a sense of trust and ease.

Lo-Fi

Lo-fi prototyping was done in parallel to research. I led a workshop with the design team to generate a multitude of ideas to address the issue of comprehension. The brainstorm was framed through the following frameworks:

1) by pages (landing, country, etc) we agreed were best for our scope
2) by design patterns (modal, progress bars, etc) 

Based on this brainstorm, 20+ iterations were combined into 5. These prototypes were determined to best address the issue of education and comprehension and, therefore, usability.

1. Homepage

Goal: Can the homepage help users understand what Nova Credit is and how it works?

2. Chatbot

Goal: Can a conversational chatbot provide users with insight when prompted?

3. Questionnaire

Goal: Can a questionnaire create a sense of trust and let users fellow more comfortable inputting their personal and financial information?

4. Modal

Can a pre-departure modal succinctly provide users with the information necessary to complete the third party partner application?

5. Progress Bar

Can a progress bar inform users where they are in the flow and where they will go next?

Mid-Fi

After feasibility feedback from the client, the 5 lo-fi options were brought down and developed into 3 mid-fi clickable prototypes. Each prototype turned had two options (so 6 iterations total) to test what design elements did a better job of helping the user understand what Nova Credit is, how to use Nova Connect, and how to obtain their Credit Passport.

Questionnaire V2.1

Questionnaire V2.2

Modal V2.1

Modal V2.2

Progress Bar V2.1

Progress Bar V2.2

3. Validation

A well-matched user means relevant feedback to design with.

Understanding the Immigrant Experience

In order to accurately test the prototype, I conducted 6 interviews with users who closely match Nova Credit’s user x. They were scattered across the United States, ranged between the ages of 24 to 32 and were highly educated. More importantly. Their immigration status ranged from a few years ago to a few weeks ago, representing the different life stages Nova Credit’s customer may find themselves when looking and applying for financial products.

Users Interviewed and Tested

Hi-Fi Prototype

After testing each feature individualy, the highest performing features of the 3 prototypes were combined into a single hi-fi prototype to be used for validation testing before final handoff.

Hi-Fi Prototype use for Validation Testing

4. Results

Users were willing and able to “check the box”

Impact: Improvements and Increases across the board

The validation testing of the Hi-Fi prototype confirmed improvements and increases across the board in comparison to the existing product audit testing. Users generally reported an increase understanding, from better understanding what Nova Credit does to better understanding how the flow works

Measures of Success: 5 / 6 users checked the “I don’t have credit history in the U.S.” on the Third Party Partner's Credit Card applications and successfully transferred their credit history via Nova Credit

The result that best shows this is that out of the 6 users tested, 5 checked the box on the Third Party Partner’s credit card application that is necessary for them to transfer their credit via Nova Connect. This is in comparison to 0 users from our first round of testing.

The Problem: Low CTR + High Drop-off Rate

Users did not understand how to complete the application process, leading to a low clickthrough rate and a high drop-off rate. This prevents users from accessing financial products and prevents Nova Credit from being paid out by third-party partners.

The Solution: Welcoming + Instructional Features

Questionnaire: 

Help users feel that Nova Credit has their best interest in mind by making the experience and product offerings feel tailored to their situation

Modal:

Succinctly provides users with the information necessary  to complete their application on partnering third parties websites

5. Learnings + Next Steps

Continue to make the design + copy clear and concise.

Confirming with A/B Testing

Nova Credit is currently looking for best ways to implement and ship the Questionnaire and the Modal. They are exploring how to use A/B Testing to refine the design and copy of both.

Persistent Glossary - An opportunity to Educated

Because the majority of Nova Credit’s user are ESL, a design sprint could explore how a “Persistent Glossary” could provide a glossary of technical terms (e.g. U.S. Credit, APR, Cashback, Equifax).

More States

Currently, Nova Credit’s Marketplace does not have different states that truly represent what product offerings are available for their users. For example, certain users from non-live countries may find that they are not eligible for certain products (blank state) or they’re missing information for a truly tailored experience (error state).