Giving a charity website the fresh new look it deserves

UI and branding redesign for the homepage of a biodiversity charity website.

Overview

  • Sprint duration: 1 week
  • Brief type: Concept
  • Team: Solo
  • Deliverables: High-fidelity prototype and style guide
  • Tools used: Figma

Brief

Outcome

Brand explorations

Current brand and site audit

Existing homepage across three viewports

My key findings were:

Branding

  • Apart from the logo, there is a lack of branding across the site
ZYBN logo shows biodiversity values
  • There is inconsistent use of colour across the site with no clearly defined palette
  • The use of typefaces is erratic with many text colours being inaccessible
Grey colour fails accessibility checks
  • The overall visual design is flat with little brand personality shown apart from images of volunteers
Image slideshow of volunteers
  • The youth aspect of the brand is visible but the biodiversity aspect is not represented well through colour or imagery

Visual design

  • The logo is too large across all viewports pushing important content below the fold
Logo size on large and small viewports
  • There is poor content hierarchy making it difficult to distinguish important information. For example, the Donate button gets lost in the navigation
Donate CTA not distinguishable from other navigation elements
  • The design is very copy heavy resulting in an uninviting page
  • There are no CTAs and only 1 inline link limiting the user journey and exploration opportunities to the homepage
The only inline link on the homepage
  • There is an inconsistent use of social icons which could be confusing for the user
Inconsistent social icons on homepage
  • The overall design is not adapted across different viewports with image and text sizes not optimised for screen sizes

Redefining the brand

Values

  1. Conservation: promoting and working to preserve biodiversity
  2. Youth: supporting and educating young people in Zimbabwe to promote the cause of biodiversity

I wanted to ensure that both these areas were represented in the new values.

New brand values with a conservation and youth focus

To establish and understand their new identity further, I defined who they are as a brand and who they are not.

Brand identity exercise to help further establish ZYBN’s values

Visual research

Word association sketches for biodiversity

Then, with my brand values and sketches in mind, I created this visual mood board.

Visual mood board

I wanted to focus on the natural world, wildlife and show an abundance of greenery. This conjures up positive images of luscious biodiversity and a world rich in variety, which are key aims for the charity. I included an image of the volunteers as they are at the centre of the organisation and represent the youth led mission.

Colour palette

New colour palette

I chose Sea Green for the primary colour because it is a pleasing mix of green and blue which represents nature and biodiversity well. I chose Khaki Green to give a more earthy, grounded feel. These colours represent the brand value of environmental.

I chose the Gold accent colour as it is bold and eye-catching yet still warm and youthful. This colour represents the brand values of empowerment, awareness and community.

Finally, I chose Antique White and Slate Grey as base colours to create a warm and trustworthy feel which I believe is integral for a charity.

Colour accessibility checks

Typography

Then I chose Poppins for the body copy for its fresh and simple appearance which I believe will effectively convey the Charity’s important messages.

I chose 2 brand typefaces, MuseoModerno and Poppins

The redesign

My key aims for the design are:

  • To ensure the overall visual design reflects the biodiversity and youth led brand values > I delivered this through the natural yet bright colour palette and the use of wildlife and volunteers’ photographs
  • To ensure design is optimised across different viewports > I did this by creating 3 separate designs for each viewport and devising a type and spacing scale to ensure consistency
  • To ensure the Charity’s content is displayed in an engaging and digestible way > I achieved this by shortening and sectioning the information; creating a visual hierarchy through backgrounds and colours and using icons to convey their missions visually
  • To encourage users to donate > I did this by surfacing the Donate CTA in the navigation, footer and central content block and used the Gold accent colour to make it stand out

Style Guide

Key Learnings

🙏 Thank you for reading!

👏 Clap if you enjoyed this article

💼 Visit my portfolio to see my work: katiechase.co.uk