Ben
UX designer

Zimbabwe Youth Biodiversity Network

Image alt tag

Project overview:

This was a week-long solo project. The aim was to redesign the UI of the Zimbabwe Youth Diversity Network website across 3 different viewports.

Who are they?

ZYBN (I will refer to them as this throughout this case study) 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 a 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.

ZYBN - a redesign

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.

ZYBN - a redesign

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.

ZYBN - a redesign

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 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.

ZYBN - a redesign

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.

ZYBN - a redesign

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.

ZYBN - a redesign

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.

ZYBN - a redesign

Changing viewport size

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

To the right 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.

ZYBN - a redesign

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.

ZYBN - a redesign

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. To the right 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.

ZYBN - a redesign

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 for typeface and colours

ZYBN - a redesign

Final Designs

What I learned

As someone who has focused a lot on UX and research, concentrating 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.