Website Redesign: Crisis Text Line
Challenge
Words are lethal. Passionate about advocating for human social development and eliminating stigma around mental health services, I challenged myself to redesign Crisis Text Line’s platform. I wanted to simplify and humanize the user experience more in 3 days, or 24 business hours (May 2020). I gave myself a time constraint to test my limits and practice designing under pressure. I also wanted to support their journey of globalizing a care system that emphasizes human-to-human interaction instead of opting for bots.
Background
Crisis Text Line is a digital mental health intervention or sociotechnical system that provides a free, 24/7 support line for those in crisis and in pain. They train volunteers so that you can text trained Crisis Counselors from anywhere in the US. Their priority is to deescalate your situation and create a plan for your safety and wellbeing.
"We believe that the information exchanged in our messages, the pace of those messages, the time of day, and the word choices, can help unlock the secrets to better mental health."
Learn more about their mission here.
Day 1: Research
Methods
I wanted to jump in the human’s seat right off the bat and take on the mindset of someone going through emotional pain and mental confusion. I gathered existing data on the site by reading user reviews, identifying direct and indirect competitors, and going through research articles to determine where the gap lies between mental health services and design.
Crisis Text Line also breaks down crisis trends of the United States as a whole and in each specific state. They have accumulated one of the largest health data sets from August 2013 to December 2019 and I used the national summary to design for the broader population. Here are some data pieces I’d like to share:
Texter Feedback From California, Georgia and Maryland
• “Thank you for listening and hearing my voice. I love the help and resources. It is good to know that there is help and that I am not alone. Thank you.”
• “Thank you so much, you really made me feel like I matter.”
• “Thanks sooo much for hearing me out.. You just saved my life”
• “Thanks for the tools to help manage my anxiety.”
• “Where do I start? Thank you SO much for helping me get through the night.The way you were so careful to me, It truly made me feel loved. I don’t think I will be thinking about those pills for along time.”
• “Just being able to talk/vent to someone was great. But what was the best was the Crisis Counselor giving me actual strategies to help me calm down. At one point I actually laughed out loud and that was the best. It truly made me feel better.”
• Approximately 12% of texters are 13 or younger and 75% of texters are under 25 years old
• 19% of the volume represent 10% of lowest income zip codes
• Almost 80% of texters are female
• Top issues include suicide, depression, anxiety and self-harm
From the demographics, I aim to design an interface that resonates well with a younger generation. I want to make it easy for people to navigate the site and get help by making the content and layout minimalistic, but still impactful and effective.
Source: National Summary
Market Research
A research article cross references, “There are not enough mental health professionals to meet the needs of the population” (Source: Accelerating Digital Mental Health Research). To combat this issue, I believe it is not only necessary to design in a way that draws volunteers in, but it is also necessary to focus on welcoming quality virtual counselors and people whose second nature is prioritizing the welfare of others. The article goes on to further state, “Optimization of the design of human support services may have a greater impact on clinical outcomes than does the design of the technologies.” This funnels my concentration down. I can design content that points out how easy it is to reach out to services and to paint the image of human support services to be your go-to anonymous friend there for you at all times.
Brainstorming: How Might We’s
• How might we optimize the design of human support services?
• How might we deescalate, calm people down and prime them for a relaxing experience before they decide to reach out to us?
• How might we increase the number of quality volunteers?
User Personas
I created user personas based on the data from the national summary of crisis trends. I zoomed in on the differing mental health disorders to obtain user goals that can act as the larger umbrella. I also focused on the three age groups (ages 13 and under, 14-17 and 18-24) that make up the majority of texters to identify where the common pain points and frustrations lie.
Furthermore, I would like to highlight: “It is important to understand the ways in which symptoms of mental health problems, such as feeling sad, anxious or irritable, and the consequences of seeking help for them, are understood by children and adolescents” (Source: Symptoms of Mental Health Problems). By understanding this, I was inspired to pave way for crafting a design journey that encourages people to feel they are safe. Capitalizing on this feeling may improve the experience before, during and after asking for help.
Storyboard
I created a storyline to imagine how the journey would look like for the user. I focused on how they would feel throughout the process of finding out about the platform, what they thought of it while they were browsing, how they would feel reaching out and using the services, and what they would think about it after talking with a counselor.
Competitor Problems
Prior to sketching wireframes, I like to identify existing issues present in other digital mental health interventions by redlining or annotating them. This eliminates the chances of designing ideas that may be concerns.
Color usage and call to actions
Similar to how National Suicide Prevention Lifeline uses greens and blues as their color theme, TalkSpace also takes a twist on the palette. From first impressions, I lose focus upon reading the slogan. I expect ‘Get Started’ will automatically lead me to a chat room, but I need to sign up before I can gain access. The colors seem to fill up much of the site and I feel like I don’t get a chance to breathe because even empty space is filled with color or pattern. Although the color contrast appears tolerable, the juxtaposition of the colors make it hard to distinguish items (the importance of Web Content Accessibility Guidelines (WCAG) to design).
The flow of the UX writing on the left hand side makes me think I can gain instant access. The extra steps and absence of information prevent me from getting immediate help.
Personalized and ‘on your own time’
Ginger utilizes neutral colors, yellows, greens and pale blues—all easy on the eyes. I found out that the service is only available in the U.S. when I got to the bottom of the page and read the text in the footer and had to search to find out Ginger.io is not free (can be accessed if your school, employer, or organization offers it). The animating numbers first caught my attention. Ginger highlights how long it takes for someone to get mental health support once you commit to the app. The site is heavily information based. Activities you get access to are personalized and you can do them at your own pace at your own time.
Flow and explanations
Ginger offers a trendy design and simple flow unlike other competitors. The site is relaxing to browse through and spacing makes it crisp and legible. The video that briefly explains their coaching methods is also helpful.
My Approach
I approach designing Crisis Text Line wearing the hat of someone who is frantic, emotionally hurting and just about to give up. My assumption is that they choose Crisis Text Line as their last try on life to see if they will feel positive after using it. Getting rid of excess and redundant content can lessen the anxiety and confusion on where to click, where to go and what information is useful. As mentioned before, the goal is to improve and prioritize the design of human support interactions and then the overall design itself.
Day 2: Design
I grasped a better understanding of how I want the general design to look like after I have compared competitors and identified what can make digital mental health interventions better. l dived into sketching, created multiple options and weeded out any ‘bad’ sketches that don’t have the smoothest journeys.
Wireframes
Using the storyboard, I redesigned specific pages that Aly would potentially land on while browsing. I went straight for high-fidelity wireframes so I could focus more on content writing and use the power of words to make people feel at ease. It is also useful because I can drop in images without having to worry about major readjustments to my overall layout and structure later on.
I also attempted to make the donation page’s user flow direct and content-satisfying for donors. What donors seem to want from non-profit organization websites:
• Organization’s mission, goals, objectives, and work (What are you trying to achieve?)
• How it uses donations and contributions (How will you spend my money?)
Visual Inspiration
I gathered screenshots of websites that also support mental wellness and health for visual reference.
Color Palette & Typography
Originally, I thought the color red would increase blood pressure and not be a fitting choice if main issues include suicide and anxiety or stress. I contemplated using blues or violets to help with deescalation and the calming of emotions. However, upon researching more, I discovered that these comforting colors can instill more feelings of sadness instead of the alertness red brings.
The red makes the brand stand out from its competitors who choose to embrace more serene colors. Red is a passionate, stimulating and motivating color. I also stayed with the red theme because although it instills urgency, Crisis Text Line wants to help drive you to be on your toes so that you get to what you want.
Logo Ideas
I knew I wanted to incorporate a heart because of the love and care that goes into this mission and the love sent from volunteers to texters and vice versa. Eventually, I went with a logo that represents a text conversation. The volunteer indicates they are a part of Crisis Text Line, hence the tail on the left to represent the volunteer talking. The heart bubble comes from the texter appreciating the volunteer’s help and listening ear. Here are some variations.
Design Variations
The challenge I ran into while designing was constantly thinking of other ideas I wanted to try and experiment with. I originally wanted to create several A/B tests to see how I can get to common ground. If I tried everything I wanted to try, I would have ran out of time so I cut myself off before I got too invested. Here’s a design variation on a summary set of data.
Day 3: Prototype
I finalized the design on the last day and to save time, I made the prototype after things were finished. Usually, I prototype with wireframes, but it’s a challenge to not spend an ample chunk of time making wireframes interactive because I want things to look “completed” and “polished”. For this project, I sacrificed perfectionism and poured my passion out at the very end when I added hover actions, interactive screens, and auto-animations in Adobe XD.
Current Website
Here’s what some of the pages look like on the current website.
Final Design
Auto-animated Prototype
Next Steps
Usability Testing
I will be testing the prototype with people via Maze.Design so that I can gain insight on my current design and iterate to satisfaction.
Information Architecture
I would have to take the time to go back and perform card sorting. This allows me to condense the chunk of links present on the current site and organize the user flow. I can group similar pages and informational pieces together to lessen the searching strain. I would also like to spend time swimming through this detail so the visual and information outputs have a more narrow path and pool for possible ideas. It would decrease my thoughts that diverge into multiple roads and endless possibilities.
Responsive View
Next, I will work on creating the responsive view for mobile screens.
Final Thoughts
I usually like to take my time to perfect things. To go against my flow and comfort, I needed to challenge myself to a given time frame and set time limits for each task I did (user persona, storyboard, sketching, etc.) in order to stay on track. I simplified and halted my train of thought to prevent overthinking and overcomplicating any design ideas. Overall, it was an enjoyable experience to design for a cause I am passionate about and to learn more about the topic along the way.
