UI Case Study: The Music Therapy Charity

Analysis of the existing brand

Understanding the character of the organisation

Understanding the organisation through the existing website and creative brief.

Competitive analysis

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

Evaluation of the current website

  • 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

Brand Personality Map.
  • 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

The Design System — the type scale.

Colours

Initial tests — experimenting with colour tints on the hero image.
  • 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

Logo redesign.

Layout

Navigation

Mobile, tablet and desktop versions of the homepage.

Sound wave graphic

The Design System — components.

Prototype

Final thoughts and next steps

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store