top of page
eywy_edited.png

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 

46a76c802176eb17b04e12108de7e7e0f3736dc6-1024x1024.webp
372615-200.png
zoom-png-logo-download-transparent-20.png
slack_logo_icon_189220.png

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

fkfk.JPG

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

urr.JPG
  • Using colors blue, red, gray & white

  • by using blue they tried to bring confident & peace

  • The tone of the brand looks quit serious

djtj.JPG
y wy.JPG
hddgg.JPG
  • 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

njdj.JPG

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

hgkkg.JPG
jfygy.JPG

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
         

gnxn.JPG
jgjjyrku.JPG

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

dtj dt.JPG
mkdjf.JPG

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

jsj.JPG
djdf.JPG

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

hdgd.JPG
shgags.JPG

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

egF.JPG
  1. Using an specific character(the boy with headphones)in all the viewports to create a signature for the brand

  2. creating several Donate buttons all over the page so we can make sure users are able to see them

  3. creating a clear navigation menu to help the users find their needs faster 

  4. designing a fund raise bar to share the number of people who have used these fund and how many people have donated

  5. creating a donation Icon for donors to donate immediately 

AEGA.JPG
  1. Creating flash cards to share the story of each person who needs donation in order to bring empathy and increase the donations

  2. showcasing a raise bar for donors to see the amount of fund that has been raised

  3. 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 

 


 

bottom of page