Updating The Music Therapy Charity’s visual design

Conceptual reskin project for a Charity Website

Brief

While at the General Assembly UX Design Immersive, I got the opportunity to work on a reskin project for The Music Therapy Charity (MTC) website. In the time span of 1 week, we worked alone but shared our progress to exchange feedback. The deliverables giving where:

• Rebranding the charity.
• Redesign of the website.
• Responsive design with a mobile-first approach.

Before we jump ahead on the design process, the MTC is a UK based charity that supports the research into the impact of music therapy and music therapy services.

What I had to implement and create

• Competitive Research.
• Brand Personality, Values and Affinities.
• Mind Map.
• Mood Boards, Visual Identity and Style Guide.
• Wireframes and Usability Testing.

The software I used

• Sketch, for UX and UI design.
• Miro and Zoom, to exchange feedback and present work.
• Canva, to present my work.

The design framework

For this project, I used the Double Diamond structure, which is a framework that segments the design process into 4 stages: discover, define, develop and deliver, which will be addressed with similar words.

Research and Synthesis

To begin this project, I had a look at MTC’s website to see what was working and what wasn’t. I specifically looked at their Home Page and Donate Page, and focused on working on those two.

Home Page and Donate Page of the MTC

After looking at this, I found that:

• The design looks outdated, not enough spacing between elements.
• The information is not well organized.
• The images are not compelling.
• The button to donate doesn't let you do that immediately.

We can refer to some of these as pain points that users could have on this website.

Understanding what’s working for the user and what isn't

To enhanced the user experience and overall design of MTC, I analysed the following competitor’s websites:

Direct competitors to MTC.

After comparing them, the main takeaways were:

• 2/4 websites do not have a responsive design.
• 2/4 of them offer features that increase accessibility.
• 4/4 use people-centred and compelling images.
• 3/4 of them have a button to donate on the home page.

I realized the importance of implementing new features that could enhance the user experience, as more people could use the website and benefit from it, resulting in a direct benefit also, for the MTC.

New MTC Values and Personality

To start rebranding the MTC, I had to change the image people might perceive of it, and to better appeal its users, I implemented these new Values:

• Altruism.
• Empathy.
• Impact.
• Health.

Keeping those keywords in mind, I then established MTC’s Personality:

• Cares about people’s wellbeing.
• Is accessible to a broad demographic.
• Is informative but not boring.

Brands that the MTC would like to be related to

Having defined the brand and its personality, I wanted to know which brands could align with MTC and specifically which characteristic of them I wanted to pursue and develop, to solidify its integrity further:

MTC’s Brand Affinities.

The Tone of Voice and Descriptor

To finalise the rebranding, I had to establish how MTC would approach other brands and people. The Tone of Voice I chose for MTC was:

• Sympathetic but not cheerful.
• Professional but also caring.

Ultimately I crafted a Descriptor, a message for people and other entities to understand what MTC is about, what it stands for and how it works.

Word Association

Coming back to the redesign process, one technique that I applied was Mind Map, to find inspiration in words, to see if any new idea would spark.

A Mind Map is a visual diagram that represents information, with hierarchy, to find correlations.

I found words such as helping, selflessness and heal, that I would, later on, implement in mood boards, as I felt they could represent MTC aesthetic.

Ideate and Deliver

The aesthetic I was going for

Moving forward, I created a Mood Board to visually represent the aesthetic I was going for in terms of images, colour palette and typography, that I would use. Important to noticed that I reused these images in the actual website, as they are very compelling and I felt, would make the user engage.

A Moodboard is a collage of different elements forming composition, to convey a general idea and emotion.

The emotions I tried to convey and reflect were:

• Compelling.
• Happy
• Hopeful
• Optimistic,
• Peaceful.

Recreating the Home and Donate Pages

I then moved to create wireframes to start applying all the previews ideas to redesign MTC.

A Wireframe is a visual representation of variant fidelity, of how the website is going to look like.

Here I’m showing low-fidelity wireframes of the Home Page and the Donate Page, across different devices. And from here I shared them with my team, to see what could be improved, what made sense to them, etc. I considered their feedback and iterated them accordingly.

Due to time constraints, I wasn’t able to create a mid-fidelity wireframe. So I skipped those and went to the high-fidelity ones, adding all the details you would see in an actual website.

MTC’s Style Guide

I then created the MTC’s Style Guide, including some of the visual design and User Interface (UI) elements, used in the high-fidelity wireframes:

A Style Guide is a manual detailing the particular style of a brand, product, etc.

After numerous colour palettes, that didn’t work because users didn’t feel the emotions I tried to convey, I ended up choosing this one: reflects happiness and gives an optimistic vibe.

In terms of typography, I choose Gotu, a serif typeface. I wanted the text in general, to denote a more mature look, reflecting its MTC’s targeted audience. And for the logo and icons, a simple, digestible design.

The final look

After exchanging feedback with my peers, and iterating where necessary, here are the high-fidelity wireframes, what the users would see in the actual MTC’s website.

High-fidelity Wireframes of Home Page and Donate Page.

Conclusion

Because of the time-lapse being so short, I could not pay too much attention to the navigation elements, adding more features (such as events, calendars, personal testimonies, etc.), and experimenting with names and logos. But looking back now, I can say that I met the brief by:

• Completely rebranding the MTC’s identity.
• Redesigning their website, from a responsive design approach.

What’s next?

If I’m able to continue working on this awesome project, there are a few things I’d like to work on:

• Research, explore more competitors and ask more questions.
• Experiment alternative versions of the logo and name.
• Continue to design the website, to make a prototype and test it out.

Did people actually like what I came up with?

• They did! Specifically, because I manage to convey positive emotions with the imagery and colour palette. Everything felt organic.
• Although the team at General Assembly pointed out, on multiple occasions, that my first mood boards and colour palettes didn't work because they weren't inclusive and didn't convey the right emotions, respectively.

The valuable knowledge I acquired working on this project

While working on this project, I learned a lot about style guide and how can they be beneficial for a multidisciplinary team. I also learned a lot about music therapy, as I read numerous articles and listened to multiple TED talks to really understand the topic.

I found it fascinating but also a bit sad since not a lot of people know about it and its benefits. So please share it to help more people thank you!