Case Study: Charity Website Design
The MAD Trust is a UK based charity with a vision of a World free from HIV and AIDS. They have been fundraising for over 25 years through the theatre industry, to raise funds for HIV and AIDS projects that build awareness and provide care, support and educate in the UK and Sub-Saharan Africa.
The main function of the site will be to engage and inform current & potential new supporters about what the charity does and how, as well as encouraging them to donate or get involved.
The previous website shown below, was very out dated with a confused design that looks like sections had been bolted on over time without considering the overall design. It shows a fixed width layout with 2 navigation areas at the top and in a side column not leaving much breathing space for the page content. This site also had very little imagery, instead the site was very heavily text based, lacking on visual interest to engage the viewer’s attention.
The new MAD Trust branding flipped the speech bubble shape on it’s head adding the commonly associated tagline ‘Theatre’ in ‘Xtreem Medium’ typeface. It is in the brand guidelines that this can be replaced with a call to action or relevant word such as ‘I’m with’ or ‘Support’.
The colour scheme is very minimal with greys and black, alongside MAD red which is the colour associated with World AIDS Day ribbons.
P: Black C
P: 187 C
P: 430 C
P: 428 C
P: 663 C
The project kicked off with a client briefing, discussing their site content outline and goals for the project. From there I undertook charity website research and organised the incomplete supplied content into a more manageable flow and constructed sitemaps followed by initial wireframes.
After a couple of rounds of amends new sections were added and the wireframes led the way for the design to take shape. The site navigation and site header were reimagined once the design stage commenced.
There were a few hurdles along the way in receiving content to create a more accurate look and feel to the pages and design the layout depending on the realistic types and amounts of content featured. However in the interim I started building the front-end homepage layouts to show the client how these would function across the various breakpoints.
The branding lock up changes to a stacked layout on smaller screens to conserve vertical screen real-estate, sitting to the left of the navigation bar on tablet screens and directly above on mobile devices.
Furthermore the branding scales smaller on page scroll on the homepage and remains at this smaller size across inset pages. This can be see in the homepage in progress demo.
The open navigation and search functionality can be seen in the tablet and mobile images below.
The ‘Donate’ call to action remains in the prime position, fixed to the navigation bar throughout the various platform layouts. To enhance this button further and gain the viewer’s attention, the bottom left corner has a border-radius to echo that of the branding and a complimentary colour is used to stand out from the red navigation bar.
A secondary donate button is featured throughout the site in the opposite corner… just in case the viewer missed it the first time!
The buttons animate on hover as the demo shows below.
I felt it was important that the content led the layout of the page template, keeping the information as clearly laid out and concise as possible for a better reading experience. Imagery is key to the layout, using large images on all landing pages overlaid with page title and summary text. Sub pages feature a breadcrumb to help aid the viewer navigate within each section.
Design Build Notes:
Image links to inset landing pages feature black gradients on the bottom to give the white text better readability. On hover the gradient is removed, this is shown on the working hompage demo.
Images that link to article pages feature a 4px red border on hover.
There is one exception to this rule, which is on the homepage where the news article links feature gradients with white text overlaid.
Red buttons on hover should have opacity of 75%.
Donate and Book Now buttons have one rounded corner which transitions to two rounded corners on the diagonal. This can be seen on the homepage build.
I'm looking forward to seeing these designs come to life when the site is live and hope the donatations for the charity come flooding in.