.jpg)
RETHINK MENTAL ILLNESS
web design
Intro
Rethink’s main aim is to improve the quality of lives of people affected by mental illness through groups, services, on-call expert advice, and vast online resources which include practical, medical, and legal information. They run fundraising events and campaigns in the government for better support for those with mental illness and their careers. Their other goal is to raise awareness about mental health and destigmatize people affected by mental illness.
The problem
Rethink had a large amount of content but it was not well organised and clearly marked - it proved to be difficult to find relevant information. There were three different navigations, including a sidebar that took a lot of real estate but didn’t improve the usability of the website. Another issue was that website wasn’t responsive which made it extremely hard to browse for mobile users. The look and feel were dated, quite corporate, and lacked the “human” touch to it - there were almost no images. Like many of my clients Rethink had great offerings, content, and knowledge but struggled to translate it into a great digital experience.
My role
UX
I was involved in the project from the discovery phase which included requirements gathering and persona creation, visual concepts, design to delivery and handover. Although I was not a UX lead I did participate in workshops, and interviews and had my input in all UX deliverables and the final UX strategy.
Visual design
I was responsible for creating visual concepts for the project that would communicate Rethink’s mission and values. Then I had to translate those concepts into responsive modular design that can be turned into CMS templates.
Delivery and handover
I was working closely with front-end developers to make sure only the highest quality product was released to the client. I was advising them on interactions and transitions. I’ve also created a design manual for Rethink explaining the design system, listing all the modules and providing clear instructions on how to use them.
UX approach
To understand the business objectives and user's needs we conducted:
• Workshops - one with committee members and volunteers and another with Rethink’s key stakeholders. Activities and exercises included:
- User profiling
- Competitor analysis
- Current site analysis
- MOSCOW activity
- Sail-boat exercise
- Information architecture & taxonomy
• Competitor analysis
• Personas
• Survey
Based on the findings we discovered several recurring problems:
Navigation
Too many menus which is overwhelming, confusing, and messy to get around
Brand
The visual design didn’t communicate Rethink’s values and mission
Group and services:
Users often confuse those two because there is no clear description or differentiation
Members area:
It isn’t fulfilling and the joining process is not intuitive and has no confirmation
Testimonials
It’s not clear how Rethink makes a difference and there’s a lack of testimonials.
Search
It should be relevant, accurate, and organic. At the time it was just a long list
IA
No logical structure to follow which affects finding information and support
Donate
The user journey is misleading and not engaging
Main goals for the website:
• To create a fully responsive website and consistent experience on various devices
• To communicate Rethink’s mission and values through visual design
• To create an organic, consistent and simplified user experience throughout the website to allow users to find relevant information in a way that complies to their mental model mapping
• To create an organised and structured content strategy that allows users to find relevant information and advice as well as offer the opportunity to explore other areas of interest
• To allow users to consume Rethink’s content in a variety of ways that take into account different media formats (text, videos)
User testing and iterations:
Step 1
Print designs feedback from Rethink staff, people affected by mental illness and carers
Step 2
2 rounds of prototype testing with people affected by mental illness and their carers
Step 3
Working in agile methodology - after each round of testing, incorporating feedback into the design
Visual approach
Inject the "human" element:
Photographic images: People couldn’t identify with plain content, they needed something more to keep them engaged and feel like they are a part of a bigger community.
Diversity: both in race and age was a big part of our brief when looking for the right images.
People’s Story modules (recovery stories by people with lived experience of mental illness): The user’s feedback was they feel inspired by this type of content - it makes them feel they are not alone. I selected those attentively as I didn’t want to paint an overly positive picture of mental illness recovery, we had to - in the words of one of our test participants -manage expectations and be realistic, the message was -living with severe mental illness is not easy but there is hope for a better life.
Brand and design system:
Colour: I kept the colour scheme bright, strong and joyful (as the main theme is HOPE) and contrasted it with a lot of photographic imagery and white space which makes the design look bold and clean at the same time.
Image crop: Most of the images are cropped into roundels as a reference to the Rethink logo but also to prevent the website from looking too corporate.
Buttons and icons: They have soft, rounded corners which gives the design a delicate and more friendly look. Lack of sharp edges and corners creates a soothing effect on the users.
"DAM’s approach to reimagining the user experience was immediately in line with exactly what we had intended. They clearly cared about our audience from the very beginning, and we are absolutely overwhelmed with the response to the new site so far"
James Harris
Associate Director for Communications at Rethink Mental Illness
Content structure & design
Information architecture and taxonomy
Sitemap and navigation is the backbone of the website, therefore we took our time to refine it. We worked closely with different Rethink teams on taxonomy to achieve clear and logical navigation. Baring in mind that people affected by mental illness often struggle with low motivation - if they can’t what they are looking for fast enough they will drop off. This is why labeling had to be very explanatory - “Learn more about the conditions” instead of just “Conditions”.
Clear labelling and colour coding
The ongoing issue Rethink had was people confusing support groups and services which caused frustration both on the user side and those who run the facilities. The first one can attend freely but the second requires referrals, and although this was explained in the text people still mistaken for these two facilities. Therefore to make the distinction more prominent visually we applied colour coding and unique icons for both services and support groups.
Secondary nav and breadcrumbs
Another important point was to make the users informed where they are on the website and make it easy for them to browse through a vast amount of content. We used clear and prominent breadcrumbs throughout and on the pages rich in text we introduced a secondary nav that anchors to different sections of the page (condition page).
Learnings
I can’t stress enough how important it was to test the design continuously through different stages of the project and how valuable was the feedback we gathered from these sessions. We conducted testing not only with people affected by mental illness but also with their careers, professionals in the field, and people who were interested in volunteering and fundraising. Regardless of all the challenges and great weight of responsibility, it was one of the most enjoyable projects I’ve worked on and a great learning curve. The Rethink team was amazing and very involved throughout, they provided us with a lot of insights and expertise. As a DAM team, we gain a lot of knowledge in the field and refined our process accordingly. The project was a close collaboration of all staff members, from UX, and design to developers and we couldn’t be more proud of it.
