The music therapy charity

The music therapy charity

Overview

Brief

During my course at General Assembly I was tasked to redesign the homepage of a charity’s website for two viewports (small and large).we were meant to improve the UI aspect of the website mainly and keep the structure of the current website mostly the same.

I decided to work on the music charity website as I have seen the impact of music on people's lives while working as a volunteer in charities, the music charity is an organization which provides funds for research and music therapy services across the UK for people with disabilities.

Tools

Figma /Pen & paper /Slack /Zoom

Duration

1 weeks

Problem

The music charity's current website is super crowded and text heavy and doesn't have a clear navigation bar also they haven't emphasize enough on donation options

Solution

Creating a new home page for the music charity website using a new brand voice while accompanying an style guide to improve the user experience and reach the business goals

Analysing the current website

Immediate findings

Text heavy : there is way to much text on the home page which makes it hard for users to interact with the website
color Palette: using different shades of blue with white texts might not be the best option for a charity website
unclear navigation bar: the navigation menu is confusing and almost impossible to find what you need quickly
not enough call to action buttons: the main purpose of a charity website is to raise fund so there should be enough action buttons all over the website to make sure we reach the goal

Competitive analysis

In order to get familiar with the design trends in charity website I decided to conduct a research on other competitors I mainly focused on two other websites to find out how they are expressing their brand

Using colors blue, red, gray & white
by using blue they tried to bring confident & peace
The tone of the brand looks quit serious

The whole Brand & the website is quite playful ,they used sharp colors mainly purple & orange
the use of colors brings inspiration to people using the website which is the goals of the charity
The tone of the content is mostly serious but using these colors and pictures brings out heartfelt & friendly theme to the website

Establishing the brand voice

Going through the audit of their brand and other competitors it was clear to me what the brand voice should sound like. they are an organization with certain values towards helping people with disabilities increase the quality of their lives therefore I decided to draw up some personality maps to help the brand reach their goals by having a better brand voice

As a charity the main goal is to create a heartfelt and trustworthy for donors and users to have confidence on the brand so I decided to recreate the brand with making it Trustworthy, heartfelt also inspirational and playful in the same time so that we can increase the number of users engaging with the website

Mood board

After analyzing all the data gathered from my research on competitors and establishing a new brand voice for the music charity website I started gathering a mood board to start my UI process, for this purpose I gathered images and colors that resembled disabilities and charity goals in general so that I could come up with a color palette that showcased the purpose of their brand in the best way

1.The color of purple resembles Disability so choosing different shades of purple for a charity that raises fund for people with disability was the best option

2.Lavender represent calmness so it would fit my goal to create a safe place for both donors and disabled people who use the website

3.using different musical instrument pictures and portrait picture that represent mental health in a way so that I could follow the brands personality

Typography

In terms of choosing the best typeface for the website I decided to move choose roboto to give a professional, trustworthy look to my website I also added Playfair display so that I can add a playfulness and musical vibe to the brand

Style Guide

having my mood board in hand, I then created an style guide so as to maintain consistency throughout the redesign of the website

Wireframes

After creating a style guide I started working on my grey scale wireframes. my main focus was specially on creating more call to action buttons in order to increase the amount of fund raised by the charity also to display all the information in their website in a more accessible way for users

Hi-Fi Prototype

After a few rounds of iteration and experimenting on how to apply my color palette and my UI design in total I improved my wireframes and created my hi-fi prototype

Using an specific character(the boy with headphones)in all the viewports to create a signature for the brand
creating several Donate buttons all over the page so we can make sure users are able to see them
creating a clear navigation menu to help the users find their needs faster
designing a fund raise bar to share the number of people who have used these fund and how many people have donated
creating a donation Icon for donors to donate immediately

Creating flash cards to share the story of each person who needs donation in order to bring empathy and increase the donations
showcasing a raise bar for donors to see the amount of fund that has been raised
creating a simple navigation menu with focus on donation to reach the charity goals

Next steps

we only had a short amount of time for this project so in case I had more time

1.create a full Hi-Fi prototype for the charity in order to create a happy path for each step users may take
2. work on how to make my design more responsive to every viewport

Key learnings

1.doing this project helped me a lot to understand the relation between visual design and sharing empathy with users and how impactful the colors and typography can be on user's experience

2.learning about Charity trends and methods they use to get the highest rate of donations

3.I looked more into UI trends and learned more about Figma