A UI Case Study on the Zimbabwe Youth Biodiversity Network

A conceptual look at redesigning the homepage of the Zimbabwe Youth Biodiversity Network charity.

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.

I concluded that putting slightly more focus on biodiversity would help the site attract more viewers. For me, it seemed more accessible as a brand. I tested this on 4 users and each of them agreed. Of course, the difficulty still remained not to neglect the ‘youth’ element of the site, but I decided that a hero image and the colour scheme could lean a bit more towards biodiversity.

Looking at the board, it jumped out that the different shades of green are reminiscent of the thick bush of much of Africa, whilst southern Africa in particular has a beautiful reddish tone to the earth — a bit like clay. I decided these could be the central colours to my design.

I also elected to go with a Rokkitt and Roboto typeface combination. Rokkitt for headers, Roboto for the body. Rokkitt is inspired by old Egyptian fonts, so there was a clear link to Africa; ideally, I would have found something more specific to Zimbabwe but Rokkitt was so readable when I started designing that I thought it was appropriate to keep it. Roboto was an easy choice for the body — the sans serif style keeping it light and friendly.

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.

Next, I decided that the hero image should be of something iconic that represents both biodiversity and Zimbabwe — the national bird of Zimbabwe: the African Fish Eagle.

However, my hamburger icon and ‘donate’ and ‘sign up’ buttons didn’t fit my overall design very well. The icon needed to change stylistically and the buttons needed to be further down the page — why would a user click donate before they’ve even seen anything on the site? A couple of people commented that they didn’t like the light green background either.

On the current site, the first words you see in relation to the charity’s mission are that ZYBN ‘works to connect, empower and support youth across Zimbabwe’. I decided to take those three words and implement them into my design.

I changed the donate button to the clay colour to try to highlight it a bit more, but also assimilated it with the colour scheme; I didn’t want it to come across as too pushy.

Their most recent project was ‘Saving the Samango Monkey’ — a conservation project on one of the nation’s most endangered monkey species. However, on the current site, it’s quite difficult to find it. I felt that it would be beneficial to the site to include this information at the top (just below the hero image), so users would be able to see exactly what projects the charity were working on.

As previously mentioned, incorporating a focus on youth as well as wildlife and biodiversity was important, so I used some of the images of staff members and tried to make them stand out by adding a button and some ‘friendly’ text.

Changing viewport size

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

Above is the tablet version: I received positive feedback on moving the buttons slightly further down so that they were ‘hanging’ over the hero. The idea was to make them stand out more. I also had to remove the hamburger and implement a navigation bar. I kept this very simple — more simple than the current site — so users would find the page as intuitive as possible.

I also implemented a ‘swipe’ gallery so users would be able to see more of the youth workers and members of staff at ZYBN. This humanises the site a bit more and engages users with all the people associated with the charity.

Of course, aside from images and buttons, text explaining what ZYBN do is necessary. As I mentioned previously, the current site is a bit text heavy. I kept most of the text, but split it into different sections to make it more readable and less long-winded. Below you can see how I changed the shape of the text to fit the different viewports — app on the left, followed by tablet, then desktop below.

Speaking of text-heaviness, when I was going through my final iterations, one user suggested:

“despite the fact that people will love to hear stories about youth projects, what really attracts people to Africa is its wildlife”

As a result, I decided that more images of big fauna would benefit the site.

Style Guide

Below are the guides for my typefaces and colours.

My overall rule was to allow for a decent amount of white space, but not so much that it felt empty. The clay earth colour was designed to feature as an accent, whilst the greens took on a secondary role. All of the features were aligned by default.

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.

This was my first time creating a style guide and I must admit that they are far more complicated than what I first would have imagined, so this was a steep learning curve for me.

Overall, I really enjoyed the project and would love to design some other screens from the ZYBN site.