Giving a charity website the fresh new look it deserves

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

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
New brand values with a conservation and youth focus
Brand identity exercise to help further establish ZYBN’s values

Visual research

Word association sketches for biodiversity
Visual mood board

Colour palette

New colour palette
Colour accessibility checks

Typography

I chose 2 brand typefaces, MuseoModerno and Poppins

The redesign

  • 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

--

--

--

I am a UX designer who believes in crafting seamless experiences, through research and creative problem solving, which keep users coming back for more.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Proposal Development Reflections #2

Leveraging Corporate Partnerships to Color Our Communities | Gensler Atlanta, BGCMA, and PCC

Ryde Today — Designing an App

Medtech prototyping strategies; or how to avoid starting over!

Why cognitive experiments and A/B tests are crucial for businesses?

Want to reach users and grow your app business with ease?

Design thinking in Mobile Apps

Build an app without writing a single line of code: with Google Sheets and Glide

An aerial view of three sports fields.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Katie Chase

Katie Chase

I am a UX designer who believes in crafting seamless experiences, through research and creative problem solving, which keep users coming back for more.

More from Medium

Case Study: Proposing a self-protection feature for the most used chatting mobile app

Crowdfunding for Films & Shorts

Studustry- designing for an Ed-tech startup

Summer Of Bitcoin 2022: Blog (1/3)