Music Therapy Charity
Responsive Website
Overview
This project for the General Assembly UXDI course was only my second foray into the world of visual design, something I find challenging but so exciting! Visual design is the farthest from my previous experience so I felt like I was out of my depth. Despite this trepidation I couldn’t wait to tackle it.
The project was to rebrand and redesign a website for a Charity we could choose from a list. I connected with The Music Therapy Charity as I love music and felt they have an amazing mission.
Goal
The goals I set myself would mimic what I imagined a charity would want to achieve by coming to me, those being:
- Establish a good brand image
- Reach the people they aid
- Showcase their work and success stories
- Encourage donations and support
- Build a community of likeminded people
The deliverables are two pages of my choice (I chose the ones I considered paramount to the goals I have; the Home and Donation pages). These should be designed over three viewports; desktop, tablet, and mobile.
Design Process
In the short 5 day sprint I used my previous learnings to shape my design process which looked like the following:
- Empathise — Competitor research, Client review
- Define —User personas, Branding, Tone of voice,
- Ideate — Design inspiration, Logo redesign, Feature prioritisation, Sketches
- Build — Wireframes, Style guide, Prototype
- Test — Feedback
Empathise
Competitor research
I looked at a few charities to gain an insight into what they did really well and where I could learn from them.
Here are a few of my key takeaways from these websites:
- Large and emotive images used throughout
- Donate button is prominent
- Social buttons at the top
- Simple Nav bar
- Search option always given to users
- Very colourful pages
- Fullscreen hero
Client review
It was also important for me to look at the website itself and see where I would be able to make changes to meet the goals I had set.
Define
User personas
When designing it is important to know who you are designing for and what their needs and goals may be. Often there are many users that need to be taken into account and this project is a good example. Without diving in too deep with the short timeframe I listed the possible users that I would need to accommodate:
- Researchers looking for funding
- Sponsors and donors
- Potential patients looking for information
Branding
This project was a laundry list of firsts for me and rebranding is one of them. Currently the brand feels plain, flat, and unexciting. I wanted to change this, I believe the work they do is exciting, fun, and interesting while obviously being serious work. I needed to communicate this to the users.
I started by writing down some brand keywords that I wanted the brand to resonate:
- Connect
- Educate
- Support
- Reach
- Celebrate
- Dynamic
These keywords shaped how I made design decisions in the rest of the project.
Tone of voice
I now needed to describe how the brand speaks to the users. The client is heavily involved in research so I wanted the brand to be professional/academic in communication, goal orientated, as well as supportive.
The Music Therapy Charity supports high quality research into music therapy and music therapy services. We do this by connecting with our community, supporting researchers and practitioners with funding, and reaching new audiences to educate on the benefits of music therapy.
Ideate
This phase of my design thinking is to diverge and to make sure I have enough options and pathways to explore. The focus of this project was on the visual design of the website instead of the user flow and architecture so this phase of my process is to concentrate on the look and feel.
Design inspiration
I started by looking at websites like Dribbble using my keywords to find design inspiration, mapping them onto an artboard, and then pulling out ideas to build upon. Below is a look at one of my moodboards:
The aspects I wanted to bring into my design were:
- Simple colour palette with;
- Highly contrasted secondary colours for CTA’s
- Use the original light blue as it feels calm and relaxed whilst still professional
- Incorporate gradient to simulate movement/flow
- Mix serif and sans serif typefaces
- Rounded edges
- Accessible colours, typeface, and font sizes
Logo redesign
The logo was an area I really wanted to put a lot of energy into, something out of my wheelhouse that could push me.
The current logo feels out of place to me. It feels slightly more on the playful and young side and doesn’t capture the authority I feel the brand should display whilst still communicating that it is supportive.
I used my keywords to start drawing shapes and styles that I thought could then use to capture the brand visually.
I sent my final drawing (highlighted in green above) to a graphic designer who made my final logo for me. I feel it incapsulates the support and care of the charity, the interconnectivity of the community, the medium of therapy as well as keeping it on the professional side of fun:
Sketches
I used my whiteboard to sketch out the layout I thought would incorporate the important features in a logical and intuitive format.
To ensure the best experience for the user I designed from the smallest screen initially in a mobile first approach. The tablet will be much the same as the desktop on the right with padding and sizing considerations.
Build
Wireframes
Due to the limited time of the project I took my first sketches straight to wireframes in Sketch. I started adding elements from my moodboard like type, font size, colours, padding, buttons, and images. I spent hours and hours making small changes as I went.
Every few hours I uploaded my wireframes to Miro so that the course instructors could feedback on my designs. Below you can see a screenshot of the review board where the instructors left notes.
My process took many iterations to get to the designs you can see at each stage, driving home the complexity and scale of the visual design job.
Style guide
A design system is a set of guidelines, components, and design considerations that should be used to develop and build products with. Whilst designing the wireframes, the elements and styles changed many times until I was happy so I couldn’t set the system until the end. The following is the final design system for The Music Therapy Charity that I have made. This would lead the departments of design, marketing, development, etc. in a company.
Prototype
The following links show the prototypes of the different viewports that I have designed. As this project only required two pages for the concept there is limited functionality of the prototypes.
Below is a side-by-side view of the webpages so that you can see where I started and the end result. The key design change is the responsiveness as the smaller viewports displayed the desktop layout scaled down. Perhaps this was why they needed to incorporate a font size selection in the website.
Test
Feedback
In this project there was no usability testing with users as time was limited. However I constantly reviewed the designs with fellow classmates, instructors, and a graphic designer ensuring an iterative approach to my design process.
Learnings, Limitations, and What’s next
Learnings
This project brought the issue of padding and hierarchy to the forefront for me as a lot of my feedback was around spacing. I feel like I am progressing nicely but have much to learn still. Spacers are now constant components in my design process to ensure consistent padding.
In the first project without users to interview it also highlighted how important that is with projects. User research adds several steps but I believe that in the long run it saves time and results in better products.
I found other ways to test my work by setting up a review board on Miro that students could upload their work to and give and get feedback at a more frequent pace than waiting for the instructor to get to you. The instructor team then used this model to complete the project.
Lastly, I learnt that visual design is FUN!
Limitations
Due to the structure of this module there was:
- Limited time for each phase and priority was given to visual design
- No interviews/user testing
- Finding the right images to convey tone was difficult
What’s next
At this stage I will not be taking this design further however if I was, it would be:
- Design a footer
- Develop more screens and features
- Add more content
- Prototyping and usability testing
