The Music Therapy Charity - Advanced UI Project

The Brief

At the start of this advanced UI project we were given the opportunity to choose from a list of different design briefs. I undertook the role of UX designer for The Music Therapy Charity. 

Our challenge was to re-skin a page of our choice from the website we selected, the focus being solely on the UI and not on things such as content or even functionalities, while we were still able to make some changes based on our UX knowledge if we chose to do so.

The project involved a comprehensive review and redesign of the charity’s website homepage across three viewports: mobile, tablet and desktop. 

Who are they?

I have my own personal experience with music therapy, having taught choir workshops in the past to people who would otherwise not have access to it, some for young adults funded by the Salvation Army Housing Association, with the intention of delivering to them a cathartic and rewarding experience that would benefit them mentally. So I came to the project with my own understanding of the benefits and value of the work this charity provides, but also knowing the wide range of individuals that stand to benefit from being given access to it, not just one particular demographic.

Despite this experience I was keen to read as much as I could via the original website, to gain insight on what this Charity does specifically, reading their goals and intentions in their own words.

The charity had been around for more than 50 years, a fact that I found to be both suitably impressive and surprising, there was no evidence of this heritage on the home page of their website, highlighting this will speak to their huge experience in the field and build trust with visitors to the site.

Alongside their heritage, they had provided 60 bursaries for music therapy students from 2020 to 2021, as well as funded 47 projects in the last 8 years, these facts could be used to inspire and reassure people that they are donating to a worthy charity who are active and put their money to good use.

UI Audit

• Images of people playing instruments

• Medical aesthetic with various shades and hues of blue

• Information floating around

• Purple hyperlinks make it feel dated

• MA Bursaries, Music Therapy Explained and Grant Programmes sections formatted the same

• Multiple fonts used over the top of images

Creative Brief

What are we making? - We will be redesigning a page of The Music Therapy Charity website for 3 viewports - Small, Medium and Large.

Target audience? - I quickly ascertained three motivations users had for visiting the website; the people seeking music therapy, those looking to train as music therapists, and lastly people who could potentially donate money to the charity. The site had to appeal to all three, I felt this could be done by highlighting the value of this work, giving those users seeking help for themselves or on behalf of someone else the confidence and optimism needed to pursue it, while also enthusing musicians who are interested in becoming music therapists that it is worth the commitment, ultimately making it clear to anyone looking to donate money the importance of the MA bursaries on offer via this charity to help fund their education.

Why are we making it?- We want to redesign this website to firstly be adaptable to a phone view which it currently isn’t, to be visually more appealing and convey a friendly, professional and trustworthy feeling in order to increase the amount of funding this charity receives, which in turn will allow them to support more people looking to become music therapists.

Brand tone? - The current brand tone is fairly medical/clinical with the use of blue in various shades and hues. There is a focus on positivity, conveyed by the use of a smile in their logo. They want to give a feeling of legitimacy to their clinically proven treatments, but also translate the benefits which is an increase of positive feeling, showing how music therapy can be transformative and fun.

Main competitors? - Youth Music, British Association of Music Therapy and Nordoff Robbins. Although stated as competitors, Nordoff Robbins has a professional relationship with The Music Therapy Charity, it is stated as such merely because of the comparison, users who will have seen the professional look and feel of Nordoff Robbins are likely to encounter their website, and see its outdated look in contrast.

Differentiation? - This charity gives funding to individuals looking to train in music therapy, according to their latest report, they’ve helped 60 students qualify 2020 - 2021, 12 of those students trained at Nordoff Robbins, one of the websites stated as a ‘competitor’.

Brand Personality Map - Keywords

Creating a list of keywords in a brand personality map at the start of a UI project offers several benefits:

By defining specific keywords that reflect the desired brand personality, you gain a clear understanding of the brand's identity and values. This clarity helps maintain focus throughout the UI project, ensuring consistency in design decisions.

The keywords in the brand personality map serve as a reminder to keep the target users in mind during the design process. By incorporating the brand's personality traits, emotions, and tone into the UI, designers can create an experience that resonates with the intended audience, enhancing user engagement and satisfaction.

Overall, creating a list of keywords in a brand personality map at the beginning of a UI project helps establish a strong foundation for the design process, promoting consistency, user-centeredness, effective communication, and emotional resonance with the target audience.

• Inspirational

• Professional

• Friendly

• Modern

• Vibrant

• Healthy

• Trustworthy

Moodboard

I was able to use my keywords as a guide to select visual elements, typography, colour palettes, and imagery that aligned with the intended brand personality.

Imagery - I felt it would be important to use large inspiring images that depicted the benefits of music therapy, displaying the wide audience it benefits. Photos with dramatic lighting and contrast can add a heightened sense of emotion, and appear more authentic to users due to its ability to evoke emotions and create visual impact. Engaging not just those seeking much needed help through music therapy but the more artistically inclined musicians interested in training.

Colour Palette - Blue is often associated with qualities like trust and calmness, it’s been associated culturally with professionalism, corporate settings and the medical field. With this in mind I decided to keep blue as one of this charity’s brand colours, veering away from the softer, more insipid feeling of the original. Against these more choices I enjoyed the pop of primary colours displayed in many of the examples on my moodboard, I associated the primary colours with education which felt relevant to the educational support offered on the site.

Logo - I liked the positivity and creativity displayed within their existing logo, I wanted to explore my own take on this original idea. Whilst searching through images I was reminded of Bauhaus, I’ve always been inspired by their use of simple shapes and clean lines, the radius of their curved lines, there is a sense of visual harmony when looking at the pieces, I could imagine each shape being a text field, or mask of an image for my website. Very early on in the process I placed my desired header font next to a bauhaus piece to inspect the relationship between the two, I found it brought out the character I had originally perceived in the font. My initial feelings about both were similar: very simplistic, modernist, clean lines.

I wanted to start by following my biggest source of inspiration, even prior to creating lo fi wireframes of the website or finalising a colour palette, as I felt that similar to my brand personality map, this logo would serve as a guide for this project. Following the bauhaus inspiration I recreated the logo on figma, mimicking the iconic shapes for the tail of the musical note, giving it a modernist feel.

Comparative Analysis

The Nordoff Robbins website was recently relaunched with new UI; as previously stated 12 students that received financial support from our website studied there, so there was good reason to compare and contrast with them

• The website features large images showing people of all ages and ability enjoying themselves

• There is a vibrant aesthetic that incorporates neon colours

• The UX writing is emotive, speaking directly to the user

• The use of inspiring language, remarking on the impact of this work, informing users of their success rate throughout their 60 year history - referencing their long history builds trust, something worth baring in mind since The Music Therapy Charity has been around for over 50 themselves, something that would be very valuable for users to know

• A focus on joy to inspire

• Blocks of information making each section easy to digest, electrifying colours create a modern and exciting feel

• Answering fears by acknowledging a lot of the people seeking music therapy are vulnerable, stating that this is being recognised and accounted for by professionals

Getting Started On Wireframes

I took a mobile-first approach with this project, knowing it would be easier to scale up whatever elements I created for a small viewport rather than downsizing a large viewport and potentially feeling I had too many elements to fit in.

I had to start by identifying all the content that needed to be included, alongside any new elements I wanted to add, which was mostly information found elsewhere on the site about the charity’s heritage and the support it’s given over the years.

In my first pass at the mobile wireframe I did not hold back from being creative and so without considering the content of the page I created something more akin to an artwork rather than a screen.

In the mobile view I decided to only use the icon to save on space, laying the name of the website over the hero image, for the same reason I opted for a ‘burger menu’.

I separated the information about Grant Programmes and MA Bursaries into two sections which I wanted to highlight on the home page, feeling that these two services were among the most important this website had to offer. I used some of the shapes of my first design, to create something I felt worked nicely and felt balanced before the application of colour or images.

I also prioritised the video explaining what music therapy was, feeling it would be beneficial to all three user types I identified, I had created a logo that inspired my designs and felt it could be effective to use it as an overlay for the video, not only does it build brand identity, it reiterates the positive emotions I would like users to associate with music therapy itself.

The sale of musical e-cards is a visual concept and yet it was advertised entirely by text, I instead opted to highlight it with an image and succinctly explain the value of using this feature; it’s a way of supporting the charity and getting something in return.

Three Viewports

I then set out on the task of adapting this design for larger viewports. With responsive design, the website layout and elements will adjust to fit different screen sizes, I would have to consider how the content could be optimised for larger screens while maintaining a consistent user experience. 

I chose the breakpoints for my design, setting the layout grid of each and began the iterative process of enlarging the design.

Sections that were once contained by the limitations of the mobile screen became separate elements on screen, which caused me to consider the radius of containers, the logo that I used as an overlay could now take up more space outside of the box.

It was at this part of the process that I began to experiment in order to establish the colour palette and images I wanted to use. The typography already having been chosen I had incorporated that even within my lo fi wireframes. 

I was drawn to an inky blue I saw on my mood board, it reminded me of my music ‘exercise book’ at school, so the association to music was there, in addition to this, I opted for a neutral beige colour instead of a white for the background, this mimicked for me the pages and solidified the feel of an exercise book even more so, tying in for me the educational aspect of this charity.

With two colours chosen, both aligning with the professional feel I wanted for the UI, I then had the opportunity to experiment with vibrant colours that would introduce a friendly and modern touch.

I chose the vibrant colours through multiple iterations. I then created an almost black and almost white based on my inky blue and beige primary colours, as well as a darker blue for smaller text, and a grey for official forms.

With the addition of images, the containers I created for mobile view began to feel messy, I created a tinted overly to help increase visibility but the images were unidentifiable, images were a vital way of connecting and communicating with users, if the design couldn’t hold up using them I would have to iterate.

Being that this task was largely a matter of taste not only functionality, I took into account the feedback that I felt was the most helpful. In the process however began to veer further away from my original inspiration, opting instead for highlighted text on top of muted images in an attempt to increase breathing space and visibility. However the images were still obscured and the writing felt hard to read.

I took some time to re-examine my original bauhaus wireframe, there was a playfulness that inspired me which my current design was lacking. So I began reimagining the containers using masks for the images, initially keeping the white tint in order to soften them, thinking that the design needed to be distilled, I also softened the yellow and added a stroke.

Final Thoughts

This process was exploratory, I was able to utilise my skills in figma to create exciting ideas, whilst adhering to the solid foundation I created at the start, my brand personality map. Through this process I reaffirmed my love for the creative aspects of UX, considering the message that my design decisions were sending to the users throughout. I feel I’ve strengthened my design understanding alongside sharpening my skills in design execution.

After presenting my designs to a general assembly instructor and a class of peers I received comprehensive feedback:

• I loved your experimentation with colour, it feels very modern and creative

• I like the unique shapes that have been used and how they overlap, it keeps the design engaging and interesting

• I love what you did with the section headers. So dynamic and really draws the eye to the image

• You really communicated the inspiration of the exercise book within your design and presentation, it bring back memories

• I love the vibrancy of the blue and yellow, the new shapes you brought in work so well

• Very clean design. Such a beautiful mixture of shape and colour. Loved every second of it!

• Love the bold curved shapes, they feel so fluid amongst the block colours, a very clever contrast

Key Findings

• Go for it!: as the advanced UI project progressed I became apprehensive to stay with my original inspiration. I encountered a few issues along the way by trying to incorporate the elements but ultimately, it was through constant iteration and reflection that I was able to create a design that reflected my intentions, and I am very proud of.

• Inspiration is everywhere: you can find ideas for designs in the most unconventional of places, this project has affirmed for me the important of keeping your eyes and mind open to inspiration, be it shapes, colour combinations or imagery.