Melo Cymru Preview

Melo Cymru

Website restructure

Project management
Web design
User research
Backend and front-end design lead
Martin Hopkins icon
Client and project rights belong toMartin Hopkins

Overview

Wales' hub for mental wellbeing self-help resources & support
The mental health industry is moving quite rapidly, updates are constantly published and practices reviewed. With Melo growing in popularity and the pandemic wreaking chaos in the world, we quickly realised the initial intention behind the website needed to be more flexible to match societal needs.
The team behind Melo was continuously receiving requests from users to add resources for their specific problems e.g. insomnia, OCD, pain management. Oftentimes those requests were asking for a resource that was already on the website - people just struggled to find it!
A collection of design system assets for Melo Cymru

Goals

Make relevant information on the website easier to find.
Empower the user to select which type of resource will work best for them, staying true to the self-help nature of Melo.

Increase user retention and shareability.

Improve the resource upload process and site scalability.
Ensure a clear and structured file allocation which would be reflected on the front-end user journey.

Use the website to inform the marketing strategy.
Allow the internal Melo team to track and analyse how users are navigating through the website and what users engage with the most, which would then inform the wider marketing strategy.

Adhere to mandatory bilingual and accessibility standards throughout the entire site.

A collection of design system assets for Melo Cymru

Process

The initial Melo website was designed by Martin Hopkins, however I was not involved in it at the time. This allowed me to look at the website with fresh critical eyes and identify relevant pain points.
The first and main problem I identified was how difficult it was to find the resource you need for your specific case. On the old site, content was grouped by type e.g. App, Books, Leaflets, Videos, Courses, Helplines, Volunteering opportunities etc. If you are referred to Melo for depression you would have to comb through all of these to only find two resources in Books and Apps. I proposed separating those into a relevant section based on the topic of the resource. As a result patients can access self-help based on the reason they came to Melo in the first place.
Two sheets of printed web pages with penciled notes
Explanation of grouping contet by type vs by topic
Old structure based on content type ↓
Melo Cymru old website layout
New topic-based structure ↓
Melo Cymru old website layout
Secondly, Melo has the ambition to become a national product. However in order to achieve this they needed to add a huge amount of resources to their bank. As we were already separating Depression, Anxiety and other bigger topics, it made sense to start including other conditions. This would allow the site to host a large number of resources, but because they would be held in their own page it would keep the user journey straightforward.
User Journey Flowchart
Dev Spec Pages
A page on self-harm

Content tagging

I developed a system which currently allows us to tag resources to a topic. This means resources only appear inside their designated topic page. This allows the team to quickly make changes when needed. Adding resources in the backend uses custom fields which were designed to accommodate clients' needs. As an example below, I've shown what the backend upload system looks like if you want to upload a new helpline into the Melo library.
Dev Spec Pages
Melo backend
Resources developer spec
Resources page
Resources developer spec
Resources page

Search & filters

While we were working hard on the user journey our clients at the Health Board managed to collate over 500 resources, courses and helplines to upload onto Melo once the site was ready (over 1000 if you include the ones in Welsh). Everyone on the project underestimated how complex and vast the hub will become. As designers, we were quickly getting overwhelmed which led me to propose and integrate a search and filtering function on all pages.
Melo main search
Search UI elements
Melo pages with search functionality

Outcome

28%

Increase in monthly users on average

11%

Melo freed up 11% of their yearly budget that used to be spent on web updates. This enabled them to allocate more resources to social media advertising, leading to increased user base.

1122

Bilingual resources uploaded to date (March 2023)

65k

Total users count to date

User testimonial

I love the new look of the website. It is very easy to navigate, each page is laid out and clear and doesn’t overwhelm you with information. It is great how the pages/topics link with one another and I really like the search facility by subject, topic or everything. It’s great that the types of resources are so varied […]. These changes just make it even better!

— Beta test feedback from a Gwent Connect 5 trainer

A phone showing a page on melo.cymru
A latop showing a search in melo.cymru

Six months of hard work finally paid off!

2023