Kilgoris Project

Project
Website Redesign
Role
Design Lead
Year
2023
I worked on this project for 16 weeks, through volunteer matching organization Develop for Good's summer project cycle

Background

Caren and Jon were visiting a Safari in Kenya, when they stumbled upon a person affiliated with a local Church in the area and expressed interest in providing resources and reshaping the community. They found that the area needed more sources of education for the children as well as living amenities.

Since then, they have built numerous schools in the area serving over a thousand children. The organization's main goal is to help the local community with providing Kenyan children, especially from the Kilgoris area access to food, water, education, and development in the future.

Currently, if you want to add funds to your KOHO account, you cannot do so directly within the app. Instead, KOHO directs you to a page where they instruct you to go to your primary bank app and copy/paste your custom email and security questions to initiate an e-Transfer.

Connecting with the client


During the initials meetings with the client, we learned about the organization’s main purpose in inspiring people to join their cause and spread awareness. Through the client’s website, they wanted to attract users and get them to share on other platforms, and donate.

They pointed up some problems of the current navigation bar and donation buttons, and we got to work brainstorming what other improvements could help the website and its current strengths.

Using a SWOT analysis, and competitive analysis, we sought to identify internal and external factors that can give context for future decision making.

Problem statement❓


How might we simplify the website's navigation and reduce information overload to create a more seamless experience for potential donors?

Part 2

Problem definition & ideation

Working with client, I created a product requirements document to define features, goals, and scope of the project.

Background

Goal for the project

Design a website for potential donors and people interested in the cause to be informed and motivated to donate or raise awareness and grow The Kilgoris Project even further. 

  1. As a user, I want to have a great experience navigating through the website and have the content and motivations efficiently laid out to me.
  1. As a potential donor, I want to be able to see these stories, and be inspired to join the cause.
  1. As a potential donor, if I want to find out where to help the cause, I should be able to find the donate button with ease.
  1. As a user exploring the site, it would be great to get shown the key ideas, background, and how to help when I first click on to the website in an efficient, visually appealing way.

User Journey Map

Defining Flow

In a brainstorm session, we created a user journey map to envision the flow from how the user first learns about the website, navigates through it, and ends up donating.


Feature requirements

From defining goals and creating the journey map, we narrowed down the features to:

  • Visual, and seamless design
  • Redesign impact story section and timeline
  • Keeping the buttons on the top of the website, but prioritize the donate section
  • Making a more immersive experience for the user when they first click and explore the website

Site Map

One of the essential parts of the project was content mapping and minimizing the amount of options on the navigation bar. One of the goals was to make navigation straightforward, and exhibit a flow that tells the user Kilgoris' story.

Old navigation bar:


Here is the final site map:

Part 3

Wireframing, visual design & prototyping

Low-fidelity wireframes

I was in charge of redesigning the landing and our impact page layouts. From research and notes from the client, I modeled a format that chose to highlight the information in a more visually appealing way. I did this through:

  1. Simplifying the navigation bar, removing the login section and making the donation button a different shape that was aligned properly
  2. Highlight statistics and core values to simplify information and highlight impact.
  3. Ensure there are places to put media requested by client
  4. Add links and buttons beyond just the navigation bar, in order to help direct the user to what they want to learn.
Navigation bar I was redesigning:

Usability Testing

With the low fidelity frames finished, we moved on to user testing. The client got us in contact with 5 previous people that were previous donors or users of their previous website.


For the frames that I worked on, this was the feedback I recieved:

  1. There were frames with overwhelming amounts of text , especially the who are we section that we could either space out or simplify to get the point across to the users more effectively
  2. Not much of an emphasis of donation throughout the pages
  3. Consider using more summarized points throughout the design to make more concise and to the point, catering towards the user's attention span

Hi-fidelity Designs

For our last stage of the project, I transitioned our low fidelity frames into high fidelity, by replacing the structures with the actual content. Although it would seem like a smooth transition a lot of things needed to be focused on in this stage because the frames were so high detail. I needed to consider the button designs, the color schemes, and where to put the text boxes near the content to make it the most aesthetic but also have the necessary information for the user.

  1. Illustrate as much impact Kilgoris had that I could on the landing page.
  1. Made decision for colors to pop, and illustrate positivity for users wanting to help join the cause as they navigate through the pages.
  1. An abundance of links fo spark curiousity in the avenues Kilgoris is apart of.
  1. Make the website unique only to Kilgoris with photos, stories, and interviews throughout. Make the impact seen and heard.

The final designs

Reflections


  • Brainstorming Sessions can Create Magic - When we were coming up with low and high fidelity designs
    the team was really insightful in generating new ideas, and building off of each other's experiences
    ‍‍
  • Ask for Help! - When there were roadblocks being faced, my mentors and peers helped clarify workflow processes and gave design advice to apply for future projects :)  

  • Keep Client on the Same Page - This was my first time working with a client outside of a school or university setting. It was really important for me to communicate with them constantly and consistently to ensure we were on the same page every step of the way. This project was remote, and was challenging at times because of the various timezones that our team worked from. There were 5 different timezones I had to keep track of when scheduling, giving priority to the client and working around that.