MAD Trust case study - cover image

Case Study: Charity Website Design

Client: MAD Trust
Role: UI/UX design & site planning
Brief: Design a responsive website that can be used as an effective fundraising communication tool for the charity.

The Website

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.

Homepage - desktop design
Homepage - tablet design
Homepage - mobile design
Responsive homepage layout designs for desktop, portrait tablet and mobile devices

Previous Site

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.

MAD Trust - previous website
Previous MAD Trust website - donate page

New Branding

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.

MAD Trust branding
MAD Trust responsive branding lock up - (resize the browser window)
Black C:0% M:0% Y:0% K:100%
P: Black C
#1E1E1E
Red C:8% M:100% Y:79% K:28%
P: 187 C
#AC1A2F
Dark Grey C:33% M:18% Y:13% K:40%
P: 430 C
#555555
Light Grey C:10% M:4% Y:4% K:14%
P: 428 C
#C5CFD4
White C:0% M:0% Y:0% K:0%
P: 663 C
#FFFFFF

Headline

Avenir Black ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
abcdefghijklmnopqrstuvwxyz

Body copy

Avenir Book ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
abcdefghijklmnopqrstuvwxyz

The Journey

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.

Site Header

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.

MAD Trust Homepage portrait tablet view
MAD Trust Homepage portrait tablet view - 'Our Events' activated on touch
MAD Trust Homepage portrait tablet view - 'Our Events' expanded
Navigation demo - layout for tablet devices
MAD Trust Homepage mobile view - on page load
MAD Trust Homepage mobile view - branding resizes on page scroll
MAD Trust Homepage mobile view - navigation open
MAD Trust Homepage mobile view - 'Our Events' expanded
MAD Trust Homepage mobile view - search icon activated on touch
MAD Trust Homepage mobile view - search bar expanded and active
Navigation demo - layout for mobile devices: on page load, branding resizes on page scroll, navigation open, 'Our Events' expanded, search icon activated on touch, search bar expanded and active

Donate Buttons

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.

Page Design

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.

Wireframe - What We Do
Page design - What We Do
What We Do - wireframe and final design
Wireframe - UK Projects
Page design - UK Projects
UK Projects - wireframe and final design
Wireframe - UK Project Page
Page design - UK Project Page
UK Project Page - wireframe and final design

Page Templates

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.

Page design - Events Page
Page design - Event Page
Page design - another Event Page
Page design - another Event Page with gallery
Events section desktop layouts
Page design - Who We Are Page
Page design - Get Involved Page
Page design - Ways to Give Page
Page design - Volunteer Page
Who We Are Page and Get Involved section desktop layouts
Page design - Homepage
Page design - News Page
Page design - Ways to Give Page
Page design - Contact Page
Homepage, News section and Contact page desktop layouts

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.

MAD Trust homepage design insitu