Music Therapy Charity
A great cause that nobody knows about
Visual design concept project as part of General Assembly’s UX Design Immersive course. This was a 4-day design sprint.
The brief
Re-skin and rebrand two pages from a charity website. I chose to do Music Therapy Charity (“MTC”) because of my love of music and the importance I place on mental wellbeing as the key to happiness. You can access the website here.
Discovery phase
Understand the charity’s mission, its target audience and what other charities’ websites look like and how they talk about themselves.
Research and understanding into MTC
MTC is a grant-giving organisation that funds research into the impact of music therapy in the UK. I defined three key user groups:
- students and academics looking for grant funding
- people seeking information on music therapy or therapists
- prospective donors
The organisation is entirely reliant on donations. As such, part of its mission statement is to:
“Develop the charity’s profile and fundraising potential through our attractive, dynamic website”
— Music Therapy Charity, Mission Statement #5
My accounting background prompted me to dig deeper and find data to determine how well the charity was attracting the donations it relied upon.
The organisation had raised only £9,500 in donations last year. To me, it seemed impossible that a charity with such an impactful and relatable mission could not garner more support. However, after journeying through the website this was not at all surprising.
Current look and feel of the website makes for bad UX
- Non-responsive in different viewports
- Has no clear calls to action
- Does not sufficiently establish an emotional connection
- Is text heavy
- Has key information hidden away in menus
- Looks very dated
The dated design hinders the user’s experience through the website. Further, the website does not tell users what the charity does and its impact nor does it provoke an emotional visceral response to encourage them to stay on the website and donate. In 2020, users have certain standards and expectations that must be considered in design.
The homepage’s visual hierarchy in its current form did not immediately draw the viewer’s eye to sponsorship or donations. In choosing the second page to redesign, I selected the ‘Donate’ page to give MTC a shot at realising the mission statement quoted above.
Rebrand — who am I?
To answer this question, I used a number of visual design methods to explore the brand’s values, its personality and traits.
The keywords and traits I felt were most reflective of the brand’s value were:
- Sparks joy but is not silly
- Makes an impact but does not use force
- Demonstrates knowledge but is not condescending
- Provides inspiration but does not preach
- Shows empathy but is not foolish
Taking this one step further, I created a ‘tone of voice’ to speak for the brand’s values and to govern the linguistic patterns and visual elements to use.
“We are a not-for-profit dedicated to inspiring and bringing joy to millions of people through music therapy. We show empathy in everything we do and pursue knowledge to make the greatest impact .”
— tone of voice
I set about searching for design inspiration that invoked these brand values through brightness of colour contrasted with strong text.
I also made a mental note of some of the more musical images for logo design later.
Stop the presses! The colour is all wrong…
At this point I realised the bright shades I had gone for in my first mood board were not appropriate. A common use of music therapy is to help those with autism improve social interaction and communication. Colour plays a huge role when it comes to autism — bright colours, like yellow, are too stimulating while more muted soft colours are very comforting (source: Renk Etkisi https://bit.ly/398eMA0).
I pivoted to more neutral tones.
I decided on a combination of old and new — blue to retain the current brand’s palette and pink to recognise the favourite colour of those with autism.
Logo exploration
The redesign of the logo embodied the musical spirit of the existing logo with a more playful feel to create a joyful visceral response from the viewer.
Content is king — how to more succinctly communicate MTC’s mission
In terms of content, my focus was to tell MTC’s story and trigger an emotional response from the user to donate. I brought onto the homepage information that had been hidden away in the About Us and the Music Therapy sections.
On the Donate page, I shifted the focus to corporate donations as a means of raising more money. I mean, wouldn’t the charity be a dream partnership for the likes of Spotify?
Design phase
This was an iterative process that started first with basic sketches on paper. Given the tight timeframe, I moved straight onto a high fidelity colour version to quickly capture and iterate on feedback.
Competitor inspiration — steal great ideas
Before diving into any designs, I took a look at other brands for inspiration with whom I believe MTC would associate. I honed in on three:
- Fred Hollows Foundation — for its emphasis on knowledge and empathy
- WWF — for its joy and impact
- Project Futures — a small organisation that inspires through storytelling to raise significant funds that belies its size
From each of these organisations, I highlighted the key elements and design styles to inspire my own designs.
Start with pen and paper — initial sketches
Initial sketches incorporated these design elements and focussed on a clean and simple layout that better brought to life MTC’s personality, purpose and impact.
Settling on colour and typeface
The first iteration was all about getting an idea for how the different design elements came together, especially the balance of colour and typeface hierarchy. I quickly realised that a serif typeface made the website look austere and traditional and took away from the joy and empathy I wanted to convey. I instead opted for sans serif typeface, Quicksand.
A quick round of feedback also suggested the following changes:
- Take out the green I had trialled alongside the pink and blue
- Use blue, the primary colour, for call-to-action buttons
- Centre-align boxed segments
With this early feedback, I settled on my style guide.
Style guide
Make it signg — another round of testing
The second round of feedback was positive. But there were certain design elements that needed tweaking to really make the website sing:
- Add more pink accents throughout
- Increase spacing between elements
- Add illustrations to break up text
- Flip the secondary buttons from white button and pink text to pink button and white text
Show me the money! — the high fidelity designs
Below are the desktop viewports of homepage and donate page in their current state before the rebrand and re-skin.
Below is the new and improved mobile viewport of the homepage.
Below is the new desktop viewport of the homepage.
Below are the new mobile and desktop viewports of the donate page.
Next steps
In the next iteration of the reskin, I would look to flesh out the other pages, prioritising About Us and other ways of donating (individual donations and donating in memory). It will also be important to test accessibility and to create a clickable prototype to test interaction and navigation.
Challenges and key learnings
I really enjoyed working on this project. I learned a lot about the power of proximity through white space and alignment to improve visual hierarchy through design. It was so satisfying to see how shifting an image just a few pixels closer to text transformed the interpretation of visual elements.
