A UI Case Study on the Zimbabwe Youth Biodiversity Network

The Project

This was a week long sprint within the General Assembly User Experience immersive course that I was enrolled in at the time. The task was to conceptually redesign the homepage of a charity called the Zimbabwe Youth Biodiversity Project. For the purposes of this article I’m going to refer to them as ZYBN. I redesigned the homepage for 3 different screen sizes — Desktop, tablet and mobile. This was a solo project. It is also important to iterate that despite my work generally being UX-focused, this was a UI project, so I applied fewer UX principles whilst working on it.

Who are they?

ZYBN are a charity who educate youth across Zimbabwe about conservation and biodiversity. Their aim is to help both the natural world and the youth of their nation simultaneously.

Initial thoughts

My first steps were to analyse the homepage — across the three viewports — to gain an understanding of what the site was trying to convey. My immediate thoughts were that the site was too text heavy with little to no visual hierarchy, the images on the page were not particularly inviting, and the red colour scheme was a little alarming for a charity of their nature!

Creating a brand

To start rectifying these issues, I needed to recreate a brand. The difficulty in this was balancing an identity between youth and biodiversity — whilst the charity focused on both, I felt that users needed to gain a sense of their premier objective. I brainstormed some words and created a mood board to give myself a clearer idea of what the branding could look like.

Analysing other sites

After a lot of examining other sites in similar areas — charities, wildlife, youth projects etc. I came across the site Anike Foundation. I felt that many other sites struggled to showcase their most important information (bad UX) but also had uninspiring colour schemes. Anike managed to keep things simple and to the point, and seemingly shared the same idea as I had when it came to colours.

Iterating

The first thing that I wanted to do once I was happy with my research was change the logo. The current logo, whilst colourful, is not particularly clear. Below you can see my development in Figma to my final design. Eventually I chose the shape of the border of Zimbabwe; I felt this could symbolise the whole nation — youth and biodiversity included. With it being the logo to navigate to the homepage, it would be like clicking on the nation itself. I also gave it the ‘clay earth’ colour which made it stand out more on a bright background. Finally, I altered the name to the acronym, which made it more memorable and readable.

Changing viewport size

Once the app designs were complete, the next challenge was taking them up to tablet, then desktop.

Style Guide

Below are the guides for my typefaces and colours.

Screens in Figma:

What I learned

As a UX Designer by trade, focusing solely on UI came with its pros and cons. It’s a much quicker process in iterating your designs, as you don’t have to go through the same amount of user research, but there is then more pressure for your work to be smooth and accurate. I actually do enjoy the research phase of UX a lot, so I did feel like I missed it, but equally I’ve always enjoyed art and creativity, so it was fun to have free rein in a sense.

--

--

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
Ben Appleyard

Ben Appleyard

UX Designer and student at General Assembly