oltukai community development

Oltukai Community Development Re-Design

A re-design of the website and donation process of a small nonprofit organization that helps children in Tanzania.

Tools: Figma

Team: Lucy Zhang (myself), Raluca, Debra

My Role: UX research, Concept, Wireframe, Prototype

Timeline: 1 week sprint(Day 1: Research, Day 2 Sketch, Day 3: Wireframe & prototype, Day 4: User testing, Day 5: UI & Color injection)

Overview

Problem

The lack of access to quality education hampers the children’s development and future opportunities, and also perpetuates the poverty and inequality cycle. Tanzania’s education system faces significant challenges. Oltukai community organization is helping tanzania’s childrens education but they are only receiving 6% of their target donation amount.

Solution

Re-design of the website to include a donation process, and a donation button on the header, and have the website more streamlined and user friendly.

Question

How might we appeal to potential donors to increase online donations by encouraging consistent contributions that would make a lasting difference in the Oltukai children’s education and quality of life?

2M

2 million children between 7 and 13 years old are out of school.

5/10

Tanzanian children live in extreme poverty, surviving on less than $1.90 per day.

6%

Oltukai NGO is facing a shortage of online donations, receiving only 6% of its monthly budget to support 28 vulnerable children’s education.

Discover

Understanding the Problem space

Heuristic evaluation on current website

In order to understand why their current website is not getting enough donations, we did a heuristic evaluation on the current website to see if there are any spots for improvement. We then interviewed potential donors about their current reasons as to why they are not donating and what will make them want to donate. We found that the main goal is to increase potential donors’ trust and transparency on where their money is going. Using this information, we made our persona.

What is Heuristic evaluation?

Heuristic evaluation in UX design is a method where usability experts assess a digital product or interface against a set of established usability principles, known as heuristics, to identify and address potential usability issues. Performing a heuristic evaluation on the current website will give us insight as to what usability problems the current website has and areas that need to be improved.

Heuristic violations:

Define

Finding the right problem to solve

Persona

Who am I designing this for? Sandra is a persona I crafted from the chosen theme and insight. Sandra is the embodiment of the pain points, motivations, and behaviors I gathered from the user interviews. She represents my app’s target user.

Develop

Exploring solutions to solve the problem

Sketches

After gathering some UI inspirations from other donation websites, I started doing some exploratory sketches exploring potential ideas for the pages on the updated website. Then I went on to draw the final sketches(solution sketches) of what each screen in my prototype would look like.

Solution Sketches

Wireframes

The next step was making it digital! Using Figma, I converted the sketches into mid-fidelity wireframes. I wanted to make sure that I created mid-fidelity wireframes so that during my usability testing, users would focus on the functionality of the application rather than the look of it.

User testing

We tested the website with 5 potential donors to get real user feedback. We watched how they used the site, looking for any issues and ways to make it better. Users were given a task to complete, and we asked them questions during the test. Task: To explore website pages for organization’s understanding, and complete the donation process.

Design Matrix

After User testing, we put the user critiques and suggestions into a design prioritization matrix to help identify design changes that have the highest amount of impact with the lowest amount of effort (since this is a 4-day sprint).

Testing Outcome

Changes based on answers from user testing:

hi-fidelity prototype

We decided to stick to the organization branding and colour palette, the next step is to apply high-fidelity visual design elements to the prototype. Users can now find the donation button on the header, the donation process is smoother, and there are testimonials and statistics to give potential donors a sense of trust and transparency.

Concluding remarks

As we complete the final prototype for the redesign of the non-profit organization’s website, we’ve successfully navigated through a comprehensive process to ensure that both the user experience and the organization’s goals are at the heart of the design. Through research and a comprehensive heuristic evaluation, we identified and addressed key usability issues, ensuring that the website is intuitive and accessible for all users, from first-time visitors to regular donors. Then with wireframing, prototyping, and usability testing, we’ve crafted a solution that not only enhances the usability and accessibility of the site but also strengthens its ability to engage key stakeholders and donors. Through the use of statistics on where the donation money goes, potential donors will also gain a sense of trust and transparency.

Next steps

For the next steps, we’ll focus on getting final approvals from the stakeholders, handing off the design to the development team, and doing thorough testing to make sure everything works as planned. We’re confident that the redesigned website will improve the organization’s online presence and create a better experience for users, helping the oltukai community development achieve its mission more effectively.