Mar 15, 2021
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
I was challenged to re-skin the homepage for the Zimbabwe Youth Biodiversity Network (ZYBN) across 3 viewports. They are a charity who work to connect and empower youth across Zimbabwe to act together to combat the biodiversity crisis.
Outcome
Through research and brand explorations, I defined new brand values, a colour palette and typography. I then designed high fidelity wireframes and produced a style guide.
Brand explorations
Current brand and site audit
To begin my research, I carried out an audit of the homepage looking at the existing branding and visual design.
My key findings were:
Branding
- Apart from the logo, there is a lack of branding across the site
- 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
- The overall visual design is flat with little brand personality shown apart from images 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
- There is poor content hierarchy making it difficult to distinguish important information. For example, the Donate button gets lost in the navigation
- 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
- There is an inconsistent use of social icons which could be confusing for the user
- The overall design is not adapted across different viewports with image and text sizes not optimised for screen sizes
Redefining the brand
Values
To redefine the brand values for ZYBN, I reviewed the content on their site to see which keywords and missions stood out most. I noticed that the charity has 2 key focus areas:
- Conservation: promoting and working to preserve biodiversity
- 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.
To establish and understand their new identity further, I defined who they are as a brand and who they are not.
Visual research
To get some inspiration for the visual identity, I did a word association for biodiversity and sketched some ideas. I did this to become more familiar with the term and explore what it meant to me.
Then, with my brand values and sketches in mind, I created this 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
To define the new colour palette, I took inspiration from my visual mood board and the existing brand colours.
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.
Typography
I chose two typefaces for the brand. The first is MuseoModerno. This is to be used for the headings and subheadings. I chose this typeface because of its curved lines which I believe reflect a youthful and natural feel reinforcing the youth-led brand values.
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.
The redesign
I developed my high fidelity wireframes across three viewpoints. Check out my designs here or below.
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
For the final part of this project, I created a style guide to document the new colour palette, typography, type scale, spacing scale and the usage rules of the different buttons. Check it out here or see below.
Key Learnings
This project was really fun to complete as there was great scope to improve the visual design. I found it more challenging than I expected to develop a colour palette that I was happy with and spent some time iterating on it. I learnt that done is definitely better than perfect and ultimately I was happy with my final design.
🙏 Thank you for reading!
👏 Clap if you enjoyed this article
💼 Visit my portfolio to see my work: katiechase.co.uk
