MindLine

Product Design, Website

Project Overview

With the onset of the 2020 Covid-19 pandemic, our team wanted to address the problem of rising mental health problems. We observed that the bar of entry to combat mental illness is too high. The issue for many users is that they have to decide between the cost of investment and the efficacy of the treatment. We hoped to create a platform which provides an outlet for stress, with a low barrier of entry ( simple access, user friendly) , so that these users may not have to face the dilemma of not even knowing where to begin. How might we create such an effective platform with a low time/cost investment and comprehensive information on mental health and possible solution options?

The Problem

The 2020 Covid-19 Pandemic and quarantine was met with an increased struggle with mental illnesses. According to the National Health Interview Survey (NHIS, conducted by the CDC), there has been a 30 percent increase in reported anxiety and/or depressive disorder since 2019. With such a sharp increase in those dealing with mental disorders, these users could benefit from product which helps abate such unanswered mental health problems. But how could we address such problems?

Product Design

UX Researcher, Designer, Front-End

October 2021

Tools:
Figma
Invision
Google Suite
HTML
CSS

Research

We first looked into mental health statistics, especially with the start of the pandemic. We had a general gist that there would be a need or deterioration in mental health, and we wanted to address that need/question. According to the National Health Interview Survey (NHIS), there has been a 30% increase in the number of adults with symptoms of mental disorders. And so, to gain better insight, my team and I conducted a Google survey on mental health and 1 : 1 user interviews. We then compiled the results into an affinity diagram.
     To highlight some of the notes:
      “I don’t think I know any mental health resources aside from suicide prevention hotline.”
      From the survey:
       > Found mental health resources through online & friends
       > 70% of survey participants preferred website format

Competitor Analysis

We then conducted a competitor analysis of the current offerings on mental health. We found that many of the current competitors require a high bar of entry, making it more difficult for users to sign up. Currently most of these competitors also merely attempt to connect their users with licensed therapists, whilst not providing their own solutions. And every single one of the competitors we analyzed required compensation, further contributing to the entry bar.

User Persona

With our research collected, we arrived at Jean, our user persona. He is a 30 year-old working in tech, looking to better understand and weigh out his options of mental health resources.
Highlights:
     > Doesn’t know where the first step even starts
     > Looking for a resource to help begin the first step
     > Doesn’t want to fully commit to therapy without fully considering his options
     > Wary of spending all this time and resources

The Solution

My team and I wanted to address the growing bar of entry in tackling mental health issues and awareness. And with our prior research we arrived at MindLine, a website product which allows for many types of users fulfill their needs. MindLine is the helpline for your mind and users can fulfill needs such as:
‍
    > Learn more about general mental health wellness and preventative exercises
    > Watch and digest easier and better comprehensible forms of media to help (Yoga, meditation, articles)
    > Journaling tool to keep track of mood, emotions and see holistically on how they are (and offer suggestions on activities based on input)

Website Design

We first created moodboards on Invision to understand what sort of atmosphere we wanted our website to construct. We focused on the color blue to convey a feeling of relaxation and calmness. With a couple of the visual aspects out of the way, we then focused on the organization of the website and its informational architecture (IA). The sitemap above shows a simple, yet straightforward outline of the structure of our product.

Low-Fidelity Wireframes

Each member of the team created sketches of our initial ideas of our website. We then created digital "sketches" and translated them into Low-Fi wireframes. During the process, we came together and pitched ideas on changes in the UX copy and formatting. As we created the wireframes, we made sure to create margin guidelines and follow a twelve column grid. Our main priority during this section of the process was to balance between feasibility and function. Although the team had many ideas, we would also have to be able to code the actual website in the end. Considering that factor was another obstacle in itself.

Usability Testing

With our completed Low-Fi wireframes, we conducted user tests. We drafted a user testing plan through Google Suite, an interview script (to be as consistent/unbiased as possible) and went away on the testing spree. One of the main features of our products we wanted to focus on was the Journaling tool. But we also wanted to make sure users had an ease in onboarding and learning resources. Therefore, we set up three tasks for our research participants:

1. Onboard using Google sign ups.
2. Navigate to the articles sections.
3. Navigate to the journaling tool and enter a journal entry.

Lo-Fi Prototype

Three pages of MindLine (Homepage, Yoga, Articles). Built using HTML 5, CSS, Javascript, Bootstrap and Github.

Final Website

We arrive at the final iteration of MindLine. The Front-End prototype was fully created utilizing HTML5, CSS, Javascript, and Bootstrap. Due to time and resource constraints, the team and I were able to create webpages of the main homepage, the yoga page, and the articles page. In an ideal situation, we would have liked to prototype and build out the user flow for the journaling tool, but were not able too. In the future, building out the onboarding, the journal as well as a mobile app would be our next steps.

Final Prototype

Final Takeaways

1. Easy to get short-sighted and stumbled by design process.‍

We wanted to address a large scale problem which was exacerbated by the pandemic. The team and I were stumped at how to approach the problem and figure out a solution. We found that we were too ambitious and many times and especially given time and resource constraints, found that to be a big challenge

2. Front-End Development exposure is a whole new experience.

By being exposed to front-end coding, and having to code out a prototype ourselves, we found the challenge to be fun and yet limiting. We were constrained by our knowledge of coding, and yet liberated with a better understanding in sending over deliverables to the engineering team. We were forced to scope out the limitations and possibilities in HTML, CSS, Javascript, and Bootstrap. With this new challenge, we utilized the strengths of each but were imposed a curb on our expectations and ambitions.

3. Even the most simple solutions go a long way.

Like mentioned earlier, we were incredibly ambitious in tackling the issue of mental health. Our team wanted to really make meaningful change, but we came to the conclusion that even simple solutions, which can help and assist even the most niche user will have worked. It was definitely very hard to narrow down the scope of our project and solution, and we underwent a time-consuming challenge as a result.