

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