UI Case Study: The Music Therapy Charity

Agata Pilarska
7 min readFeb 15, 2022

--

Solo project | 1-week | Revamp of an existing website | Concept

I was tasked with helping a non-profit organisation, The Music Therapy Charity (TMTC), rebrand and reskin their website.

My aim was to replace an existing single static page that looks the same on all devices with a responsive homepage of multiple versions (mobile, tablet and desktop). The challenge was visually communicating the charity’s mission and values and building a strong and modern brand.

Analysis of the existing brand

Understanding the character of the organisation

I analysed TMTC’s website’s content to understand the charity’s character. Initially, I assumed that the organisation is promoting and building awareness of music therapy and the nature of the subject is light, fun and optimistic. However, after closer examination of the About page, I discovered that this particular charity is focused more on research.

TMTC listed their principal activities as distributing grants, airing research findings, supporting fellow researchers, “celebrating excellence,” and attracting donors. Building awareness is an activity the charity is also interested in, though it was listed last. Moreover, TMTC plans to create a new website to “develop the charity’s profile and fundraising potential”. Because of all of that, in my creative brief, I identified the new website’s target audience as potential benefactors and new corporate partners.

Understanding the organisation through the existing website and creative brief.

Competitive analysis

In parallel, I looked into how the existing brand differs from what’s already on the market and how the new website can help it differentiate itself from the competition. I placed the competitors along the axis — trying to distribute them from organisations building awareness to organisations dealing strictly with research.

Nordoff Robbins is the largest UK music therapy charity and the main direct competition for TMTC. Still, many small and local music therapy charities and charities work with music as a medium. I felt that the field is saturated, and both Nordoff Robbins and the British Association For Music Therapy are building awareness of music therapy relatively well. I concluded that TMTC should focus on what they are doing (research-related activities), but they should appear more professional as a brand.

Competitive analysis. Competitors along the axis — from organisations building awareness to organisations dealing strictly with research.

Evaluation of the current website

Before any design work, I examined the existing version of the website. The problems I observed are:

  • A single static page of the website results in poor experience on mobile devices.
  • Lack of content hierarchy and consistency of visual elements gives an impression of unprofessionalism.
  • Poor typography experience — a mix of many font types (Arial, Verdana, Hattori Hanzo), sizes, cases, weights, and colours make it challenging to experience the content clearly and efficiently.
  • Common font styles (Arial, Verdana) give the brand no definition.
  • The colour creates no visual hierarchy (page built on five shades of one blue colour, no accent colour, the background colour is pure white).
  • The navigation bar has too many items (could be limited to four items, so it is easier for users to process).
  • The accessibility feature allows changing the font sizes is outdated and is not working correctly.
Current homepage.

New brand personality and mood-boards

I started with choosing adjectives that best describe the charity to develop a brand personality that would help me keep the design decisions focused and separate them from my personal preferences. I decided that the keywords that best describe TMTC are: Professional, Academic, Formal, Elegant, Elite, Visionary, Authentic and Trustworthy.

Brand Personality Map.

I used mood boards to explore this new brand identity and gain additional inspiration in the next step. Creating the mood boards, I discovered that essential elements of the new website should be:

  • Geometric patterns, annotations and paragraphs of text that are associated with science and professionalism;
  • Photos of people and researchers that could help increase trust and credibility;
  • Colours related to science and medical research — shades of blue and vivid green colours, possibly contrasted with light greys.
Moodboard 1 —annotations and paragraphs of text, photos of researchers, geometric patterns.
Moodboard 2 — colours related to science and medical research.

Development

Typography

As the existing website is an example of poor use of typography, I decided to make the typography my priority. I tested different font pairs that could make the brand, but at the same time, will make the copy stand out (content first approach). I decided to pair two Goole fonts — a more complex Montserrat font (and assign it to headings) and very clean and readable Inter (and set it to subheadings and body text). Additionally, I created two body text types: one for medium/large viewports and one for small screens only, so the readability is preserved when altering between devices.

The Design System — the type scale.

Colours

For the redesign not to feel too dramatic for the existing users and for the design to be embedded in reality, I decided to use the high-resolution images used on the original website. I started experimenting with colour tints to make the photos cohesive, introduce the blue colour, and not overwhelm users. Initially, I was conscious of this graphic operation, but I shared my design with colleagues and received only positive feedback; therefore, I decided to continue with this approach.

Initial tests — experimenting with colour tints on the hero image.

Following the 60–30–10 design rule that states that 60% of the space should be a dominant colour, 30% should be the secondary colour, and the last 10% should be an accent, I reduced the initial colour pallet to three colours and one gradient:

  • Project Blue (a dominant colour that I used as a base for the gradient that I used to tint the large areas of the images used on the homepage);
  • Indigo Blue (the secondary colour that I introduced to the footer);
  • Accent Green (I reserved the accent colour for Call-To-Action buttons Donate and Subscribe).
The Design System — the colour system.

Logo

I created a simplified version of the existing logo to align with the brand personality. It would be essential to have a logo that could be scalable and readable also on small screens. I proposed using only the logomark (pictorial mark) on the small screens. Still, I should test it in my next steps, as the brand doesn’t have high recognition, and the logomark could be insufficient for users to recognise the charity.

Logo redesign.

Layout

To make the website fully responsive, I built my mid-fidelity wireframes around the idea of a hero image that would rescale and regroup, shifting from desktop to mobile. The additional content would be presented in a three-column layout on a desktop and tablets, and shown in a single-column format on handheld devices.

Navigation

As people can quickly grasp only four pieces of information, I condensed the top navigation for the desktop version. Additionally, when shifting to tablet and mobile devices, the top bar would shrink to include only a logo, a hamburger icon, and a link to donate. For the desktop version of the website, to use the screen estate and help users understand the content, I introduced additional navigation to the footer, mimicking the website structure.

Mobile, tablet and desktop versions of the homepage.

Sound wave graphic

In the final design, to reinforce the brand and underline that it deals with sound and scientific research, I decided to generate a vector graphic that imitates a sound wave. To do that, I modelled a 3dimensional wavy surface that I could intersect with planes. The effect of this intersection was exported as a 2D vector graphic that I added to both the hero image and newsletter section.

The Design System — components.

Prototype

Final thoughts and next steps

As I was developing this project over four days, I could do a lot to advance it further. I would keep redesigning the remaining pages and gather feedback from potential users to help me improve the redesign. Up to this point, I created a simple style guide that included a colour palette and type system to document my decisions. To help make the UI expressive and easy to use, I would develop small interactions and motion elements and add them to the documentation to hand over the project efficiently if needed.

Overall, focusing solely on the visual aspects of a digital product was an exciting experience — it helped me practice making informed graphic decisions, and I learned a lot about the power of good UI.

--

--