Revising An Existing Design for Reclaim! Mental Health

On a team, I audited non-profit Reclaim’s current website and consulted on how to implement user-friendly website layout and navigation, accessibility basics and utilize SEO.

The Problem:

Increasing access to mental healthcare for queer and trans youth lies at the heart of the client’s mission as they intend to expand their services but their website is confusing, counter-intuitive and inaccessible.

How I Solved It:

I audited their current website experience, learned how to utilize their content management system despite its limitations and along with a team, presented findings as well as accessibility and SEO basics.

My Roles on The Team:

• UX Designer

• UX Researcher

• UX Consultant

Tools:

  • Miro

  • Firespring CMS

  • Adobe

Methods:

• Heuristic Analysis

Deliverables:

• Heuristic Analysis/ Website Audit

• List of Accessibility Resources and Testing

1. Discover The Problem

The Project Brief

The Scoping Call

The project began as part of “Connected For Change: Tech Day”, an all day tech consultation facilitated by Hands-On-Twin Cities, a non-profit connecting other non-profits with pro-bono professional consultants for tech advice and training.

On a team of three UX designers, I met with the client non-profit Reclaim to establish a project overview and scope to discover what we could accomplish in one month of preparation and one day of live training and consultation.

We aligned our approach so we could outline the steps we needed in order to accomplish our tasks in the time allowed.

Reclaim’s primary and secondary users:

Notes from our first meeting

The Take-Away

What is the problem?

• Users have a hard time finding important things with an overwhelming amount of information on the main navigation menu.

What are the constraints?

• Reclaim team is small with limited tech knowledge and resources.

Why is this important?

• Users need simple, reliable and safe access to mental health care and resources.

What does success look like?

• Increased engagement via analytics, accessibility basics, SEO, UX basics.

2. Ideate & Prototype The Solution

Before Tech Day approached, I performed a heuristic evaluation on Reclaim’s website highlighting issues with usability as well as basic accessibility.

The heuristic evaluation I performed. View the PDF here.

Key Findings

The most problematic usability problems I found were:

  1. Two navigation menus. One was hidden behind a hamburger menu that revealed a large menu with too much information. It was overwhelming and confusing for the viewer.

  2. The titles for the subpages were also not descriptive enough for what content was available.

How to fix the usability problems:

  1. Combine the two menus into one that is immediately visible.
    Combine pages with similar or related information into one page.

    Under “Who We Are”, Staff” and “Board” could be combined into page. “Mission Statement” and “Strategic Plan Overview” could be combined. Under “What We Do”, combine “Therapy” and “One-on-One Coaching” into one page.

  2. Rename titles of sub pages.

    “What We Do” could be more descriptive like “Therapy & Resources”. “Who We Are” could be “About Reclaim”.

The most problematic accessibility problems I found were:

  1. Difficult to read text

  2. Low contrast text

How to fix the accessibility problems

  1. Choose a different font, one that’s easier to read.

  2. Choose a different color, higher contrasting colors.

3. Client Presentation

Tech Day

After conducting research and gathering all the necessary information based on our project scope, we laid out an agenda and spent the day with the client fixing the problems we brainstormed as well as giving them some basic training in accessibility and website design basics.

Challenges

The biggest challenge was scoping the project down to what problems we could fix in a very limited amount of time.

The second challenge was giving user experience accessibility and web design training to the client so they could implement our suggested changes and know why.

Next Steps

After implementing the changes we suggested, we encouraged looking at various content management systems specifically designed for non-profits that were more user friendly than the content management system they currently used, Firespring. As UX designers, we found the web design platform itself to be limited and awkward in design and usability.

We also left the client with a robust list of various resources that would them to implement and maintain their website going forward.