Apr 19, 2021
Mind in Bexley | UI UX Redesign
Improving the user experience and interface design of a local non-profit’s website.
My Role
I wanted to help a local organisation which is doing something important and may not have the resources to pay for a website redesign.
Used tools:
Figma: Sketches, wireframe, prototypes and graphic design
Photoshop: Photo editing
The project was completed in a mini-sprint.
The Problem
The UK population has experienced a deterioration in their mental health. The COVID-19: mental health and wellbeing surveillance report showed an increase in psychological distress, anxiety and depressive symptoms since the first lockdown in March 2020.
Goal
Based on this data, I decided to offer to Mind in Bexley a website redesign. Analysing their homepage I identified four things that could be improved:
• Making branding and visual elements consistent across the homepage
• Replacing low-resolution images
• Increasing the accessibility of the visual elements, text and buttons
• Improving the information hierarchy, CTAs and negative space
The overall goal was to redesign the website’s homepage to help users have a better navigation experience and find information easier.
Users
I identified three main purposes for visitors coming to Mind in Bexley’s website:
• Getting help now: For people looking for immediate help and needing to find information as quickly as possible.
• Self-referring: For people who would like to register for NHS free talking therapies.
• Making a donation: This action is currently positioned in one of the items of the dropdown menu and in one the carousel images. Neither option was appealing or was showing the importance of making a donation.
Ideation
I split the homepage in three parts and made notes of what was problematic in each part, what could be improved and why. The first part I started to analise was the header and hero section.
One of the main problems I found in this section was the carousel. According to NNGroup’s advice auto-play carousels annoy users and reduce the usability of a website.
In Mind in Bexley’s homepage, each image is displayed for 5 seconds and the user doesn’t have the visual clues of how many images are going to be showed (location points) nor the ability to pause the auto-play. This doesn’t allow low-literacy users enough time to finish reading the content of each image. On top of that, the background has low contrast against the UI elements which reduces the visibility of the texts and buttons.
The Web Content Acessibility Guidelines (WCAG) states a minimum of 4.5:1 contrast ratio for an interface to be acessible to all users with vision impairment.
Design
I opted for a static image in the redesign of the hero section, and also:
• Removed ‘Help Resources’ from the menu as it directs the user to the same information found on ‘Get Help Now’.
• Chose ‘access to free therapy’ as the value proposition of the hero section and improved the call to action.
• Increased the contrast ratio of the ‘Get Help Now’ button from 4.46:1 to 8.54:1. The button reached the rating AAA according to WCAG guidelines.
I continued my analysis by identifying what could be improved on the body of the website. In this section I wanted to improve the accessibility of the UI elements and the information hierarchy.
High-Fidelity Prototypes
Along the body section I continued to use the branding colours and elements making them more consistent across the page.
I cut down the number of blue cards and used the space to make the information about donations and volunteering easier to find on the page instead of hiding them in the dropdown menu.
I replaced the text in the ‘Who We Are’ section with the one used in the ‘About’ page. I edited the text slightly to be shorter and focused on the organisation’s history and mission.
I replaced the photo of the thumbnail with one found on the website. Thumbnails with low-resolution (such as the one used currently) might make users give up on watching a video. NN/g recommends that video thumbnails should be used as an asset to convince the viewer to watch it.
I also improved the copy of the ‘Community Pantry’ and included a photo to make this part of the section more visually appealing to attract donations and more visible to those who need to know about it.
At last, the footer. This section was the most straightforward to ideate since I had only two simple goals here: improve the contrast of the text against the background and use the brand’s colours on the social media icons.
