Tanzania Conservation

Animal charity website (bootcamp project)
research, design, UI/UX

Disappearing Buffalo

Tanzania Conservation is a charity dedicated to the preservation of the big five game: elephant, lion, leopard, buffalo, and rhino. The images I created are a simple way of communicating the challenge.

Disappearing Buffalo

Tanzania Conservation is a charity dedicated to the preservation of the big five game: elephant, lion, leopard, buffalo, and rhino. The images I created are a simple way of communicating the challenge.

1 / 2

Competitor Analysis

I selected 6 websites, and analysed them for usability, functionality, accessibility, look and feel, personality, message, and communication.

Competitor Analysis

I selected 6 websites, and analysed them for usability, functionality, accessibility, look and feel, personality, message, and communication.

Strengths, weaknesses, opportunities, and threats arranged in a vector.

 

I then performed an in‑depth SWOT analysis.

Ideas on how to improve existing websites' user experience.

Survey

After completing the competitor analysis, I built an online survey. Based on the responses, I identified common pain points, which led me to the next step. The survey was a combination of multiple choice and satisfaction scales, with a chance to make comments at the end.

Ideas on how to improve existing websites' user experience.

Survey

After completing the competitor analysis, I built an online survey. Based on the responses, I identified common pain points, which led me to the next step. The survey was a combination of multiple choice and satisfaction scales, with a chance to make comments at the end.

An image of a young man smiling, next to text explaining what he wants from the website.
1 / 3

Personas

From the survey responses I created 3 user personas. I used them whenever I wanted to step out of myself and reconsider my initial ideas. Referencing the personas helped me to make quick design choices, ensuring that all foreseeable needs would be met.

An image of a young man smiling, next to text explaining what he wants from the website.
1 / 3

Personas

From the survey responses I created 3 user personas. I used them whenever I wanted to step out of myself and reconsider my initial ideas. Referencing the personas helped me to make quick design choices, ensuring that all foreseeable needs would be met.

Text explaining Alan Activist's user journey.
1 / 3

User Journeys

I then created user journeys for each persona, to gain an accurate picture of what each one needed from the website.

Text explaining Alan Activist's user journey.
1 / 3

User Journeys

I then created user journeys for each persona, to gain an accurate picture of what each one needed from the website.

Several sketches of ideas for the website.
1 / 2

Sketches

Based on my research I sketched out ideas for the website.

Several sketches of ideas for the website.
1 / 2

Sketches

Based on my research I sketched out ideas for the website.

A large array of colourful Bantu symbols.
1 / 3

Look and Feel

I wanted the website to have a strong African flavour, and was influenced by the pictorial writing system of the Bantu people from southern Africa (credit: grapheine). The first icons I designed were fun but difficult to understand. User testing confirmed this, so I removed the icons and used a more legible font. The final navigation menu is highly rationalised, but retains some Bantu DNA.

A large array of colourful Bantu symbols.
1 / 3

Look and Feel

I wanted the website to have a strong African flavour, and was influenced by the pictorial writing system of the Bantu people from southern Africa (credit: grapheine). The first icons I designed were fun but difficult to understand. User testing confirmed this, so I removed the icons and used a more legible font. The final navigation menu is highly rationalised, but retains some Bantu DNA.

A rough layout wireframe of the website home page.
1 / 2

Wireframes

I made wireframes to get a good idea of how the website would work, so that any problems could be highlighted before investing time in the final version.

A rough layout wireframe of the website home page.
1 / 2

Wireframes

I made wireframes to get a good idea of how the website would work, so that any problems could be highlighted before investing time in the final version.

Several yellow post-it notes with lines between them.

How Might We

I used the ‘How Might We’ method to generate solutions to pain points identified in my research.

Several yellow post-it notes with lines between them.

How Might We

I used the ‘How Might We’ method to generate solutions to pain points identified in my research.

Black and white text in front of a greyish brown background, next to a colour contrast score.

Accessibility

The most common impairments affecting web use are: cognitive, hearing, neurological, and mobility (Mendes). Cognitive accessibility is improved ‘by simplifying language, providing clear navigation, and reducing distractions’ (56 Degrees). For neurodivergent people, overwhelm, confusion, and distraction should be prevented, and elements should be consistent (WCAG). There should be enough colour contrast for text, and labels and headings should offer clear direction (WCAG).

Black and white text in front of a greyish brown background, next to a colour contrast score.

Accessibility

The most common impairments affecting web use are: cognitive, hearing, neurological, and mobility (Mendes). Cognitive accessibility is improved ‘by simplifying language, providing clear navigation, and reducing distractions’ (56 Degrees). For neurodivergent people, overwhelm, confusion, and distraction should be prevented, and elements should be consistent (WCAG). There should be enough colour contrast for text, and labels and headings should offer clear direction (WCAG).

Various sizes of text in black and white, next to various colours and tints.
1 / 2

Design System

My goal was to create a visual identity that aligned with the values and message I’d identified. I used an earthy background, with bright foreground colours, influenced by the Tanzanian flag and Bantu symbols, for cards, images, and calls to action. Cards and buttons had a hand-made letterpress aesthetic.

Various sizes of text in black and white, next to various colours and tints.
1 / 2

Design System

My goal was to create a visual identity that aligned with the values and message I’d identified. I used an earthy background, with bright foreground colours, influenced by the Tanzanian flag and Bantu symbols, for cards, images, and calls to action. Cards and buttons had a hand-made letterpress aesthetic.

Images of buffalo, leopards, and elephants on the website landing page.

Landing Page

The prototype has a distinctive look and feel combined with clear, simple navigation and calls to action. The hero images slowly fade into the background, suggesting the animals’ vulnerability. Hovering over an image brings it to full colour and opacity, providing positive reinforcement.

Images of buffalo, leopards, and elephants on the website landing page.

Landing Page

The prototype has a distinctive look and feel combined with clear, simple navigation and calls to action. The hero images slowly fade into the background, suggesting the animals’ vulnerability. Hovering over an image brings it to full colour and opacity, providing positive reinforcement.

Large white text saying "help save them", next to a grid of squares containing different amounts of money.

Donate Page

A user can reach the payment screen in 2 clicks. The donation page has pre‑set payment amounts that give examples of what each amount can buy. The suggested amounts stand out as clear calls to action, and the ‘other ways to help’ button is handily located underneath the hero text.

Large white text saying "help save them", next to a grid of squares containing different amounts of money.

Donate Page

A user can reach the payment screen in 2 clicks. The donation page has pre‑set payment amounts that give examples of what each amount can buy. The suggested amounts stand out as clear calls to action, and the ‘other ways to help’ button is handily located underneath the hero text.

Large white text saying "join the gang", above 3 boxes showing different options, and a payment form.

Join Page

The join page offers 3 clearly differentiated membership options, with increasing benefits.

Large white text saying "join the gang", above 3 boxes showing different options, and a payment form.

Join Page

The join page offers 3 clearly differentiated membership options, with increasing benefits.

Final Prototype

I believe I succeeded in creating an attractive, distinctive website that’s easy to use, with clear and consistent options. It would be great to develop this project into a higher level prototype. There are plenty of ideas that could be developed, such as membership options, games, and corporate partnership possibilities. Read the process journal here.

Final Prototype

I believe I succeeded in creating an attractive, distinctive website that’s easy to use, with clear and consistent options. It would be great to develop this project into a higher level prototype. There are plenty of ideas that could be developed, such as membership options, games, and corporate partnership possibilities. Read the process journal here.