Back to our work
WEBSITE REDESIGN

Sheffield Mental Health Guide.

We redesigned and developed the Sheffield Mental Health Guide to make the website more accessible and easier to use, with simple functionality to ensure users could easily find important information about activities and services in Sheffield.

image of redesigned website
Client
Sheffield Flourish
Who they are
A mental health charity that focuses on community, by linking people up with local services as well as running their own.
What they do
They are a large directory for mental health services and activities in Sheffield. They run four websites; Sheffield Flourish, Sheffield Mental Health Guide, MyToolkit and Sheffield Suicide Support.
Location
Sheffield
Requirements
Redesign the Sheffield Mental Health Guide to improve it’s design, ease of use and functionality.

Problem

Sheffield Flourish intended to improve the effectiveness of the Sheffield Mental Health Guide in a number of ways, including; making the purpose of it clear, improving its functionality and increasing it's online presence.

Result

We conducted comprehensive user testing to delve into the requirements of the Sheffield Mental Health Guide's users so that we could tailor the redesign to suit users' needs. We provided a simple solution to Sheffield Flourish's problem by building a comprehensive Search Engine that could be easily understood and filtered. This allows people to quickly search and find mental health activities and services in Sheffield, whilst providing an obvious and clear purpose to the Sheffield Mental Health Guide.

“Thanks for being so brilliant to work with. Quite a few people said that you’ve really brought this website into the future which was really nice feedback and I would definitely agree with that. People said that it really means a lot to them to be able to go on a website and for it to look really colourful, simple and clean.”
Jo Eckersley, Former Deputy Managing Director

research

We facilitated an ‘identifying your users’ workshop with Sheffield Flourish to help identify the types of users that engage with the Sheffield Mental Health Guide website. This helped ensure we recruited the right representative users to test the existing site with as well as keeping these users in mind when it came to designing the new website.

We then recruited 8 users to test the existing site and conducted usability sessions on desktop, mobile and tablet. We also held a session with a backend user to understand the main positives and negatives experienced when managing the site’s content. We presented our findings back to Sheffield Flourish and prioritised the key areas we thought were most important to address.

Low-fidelity prototype, version one, version two and final version on mobile.
Our Low-fidelity Prototype, Version One, Version Two and the Final Version for mobile

high-fidelity concept designs

Using key information from the user testing sessions, we facilitated a sketching workshop involving key stakeholders including those identified as Sheffield Flourish’s ‘Super Users’. This allowed us to gain a better understanding of what both Sheffield Flourish and their users envisioned for their new website. Our designer created low-fidelity prototypes and these were tested in house by our team at Hive.

We created visually rich concept designs. Each of the designs illustrated the visual design, look and feel of the redesigned website. All designs were shared with Sheffield Flourish so that they could provide any feedback or recommendations. Once the design was signed off, we started to build the new website.

the build and testing

To begin with, we cleared up all of the data fields and old post types that were not being used any longer on the old website and proceeded to migrate the relevant data over to our new website.

We discovered that you could use WordPress as a headless CMS which gave us the ability to both develop our own website, whilst using the content maintaining tools that WordPress provides. Using WordPress as a headless CMS allowed us to quickly develop a better, more accessible, higher-quality, dynamic website.

We completed the build of the new website within around 3 months. Once complete, we conducted testing across a range of devices and browsers to ensure it functioned as expected on all mediums. Sheffield Flourish reviewed the website and provided feedback before we went live with the new website.

Official Sheffield Mental Health Guide Launch
46 people turned up to the Official Sheffield Mental Health Guide Launch and the feedback was very positive.

Technology

We used the following tools and technology to redevelop the website:

  • React, Next.js - Frontend
  • WordPress - Backend REST API / Headless CMS
  • TypeScript, PHP - Languages
  • AWS and Vercel - Hosting
  • GitLab CI - I/CD pipeline

the finished product

The redesigned Sheffield Mental Health Guide is more accessible and clean with simple functionality. This ensures that users can effortlessly find and locate mental health activities and services in Sheffield. This makes a huge difference for end users in terms of them being able to find really important information.

To find out more about this project, check out the interview with one of our Software Engineers (Stu) at Hive and the former Managing Director of Flourish (Jo) below.

It was a pleasure to work with Sheffield Flourish on this project and we feel very privileged to have been able to support Sheffield Flourish in achieving their goal.