The Kilgoris Project
Role - UX Design Manager
DISCIPLINE - UI/UX Design, Visual Design and Branding
TOOLS - Figma
TIMELINE - 4 months • Aug 2023
What is The Kilgoris Project?
Goal
My Role
Understanding the User
User journey map of vistors visiting the website
The Kilgoris Project is a nonprofit empowering Maasai children and rural Kenyan communities through education, healthcare, and development initiatives.
In the initial meeting, the client emphasized the need for a website redesign due to its outdated design and information. The goal is to clearly communicate the organization's mission and impact, encouraging user donations.
As Design Manager for the TKP project, I led the design team, collaborated with the Project Manager and client, and ensured project quality. I contributed to the user journey map, competitive analysis, usability testing, and designed every webpage for a cohesive user experience.
We surveyed 40 users and interviewed 10 to understand their website experience and donation motivations. Most users visit to learn about the organization, with impact and stories driving donations. However, 30% wanted to leave immediately due to outdated information, lack of trust, and visual appeal issues.
Given the research and data, the overarching question was:
How might we redesign the Kilgoris Project website to make it more informative and engaging, thus enhancing their sympathy and encouraging confident donations?
Educating Children Page
On the old TKP website's "Educating Children" page, the presentation suffered from clutter, with an amalgamation of text and pictures.
Old TKP Website Educating Children Page
Engaging infographics and statistics
I simplified the display by using infographics and statistics to highlight TKP’s impact on child education, making information clearer, more engaging, and easier to understand.
The design framework ensured consistency across our team's work by standardizing typography, color schemes, spacing, and interactive elements. This streamlined our workflow, allowing focus on creativity and user-centric solutions, resulting in refined high-fidelity designs that effectively communicated TKP’s brand and improved the website experience.
Home Page
The new TKP website features impactful infographics with quantifiable data, enhancing credibility. We've incorporated multimedia with images and videos, added story summaries, and increased call-to-action buttons to improve user engagement and exploration of TKP’s work.
Enhancing User Empathy and Encouraging Donations
The new design shows how different donation amounts impact children's lives and includes a gratitude message from the executive director, fostering empathy and motivation to support TKP.
Old TKP Donation Page
Becoming a Field Partner Page
Transforming Dense Text into Engaging Visual Layouts
The old design primarily offered donation options without invoking empathy.
Old TKP Our Mission Page
Old TKP Our Story Page
The old TKP website had overcrowded text, making it hard to read. Surveys revealed visitors left quickly due to overwhelming content, reducing engagement.
Old TKP Our Impact Page
To improve readability and engagement, we restructured text-heavy content by adding media, clear headers, icons, and blocks. A lengthy interview script was transformed into a dynamic dialogue format, making it more engaging and easier to understand.
Design Progress
Research
User Flow
Competitive Analysis
Keeping the pain points in mind, I mapped the user flow from entry to exit, identifying key opportunities to encourage donations.
We analyzed three nonprofit websites, identifying different needs such as more call-to-action buttons and empathy-driven strategies to boost engagement and donations.
Low-Fidelty Design
Here are low-fidelity wireframes created in Figma to quickly visualize, iterate, and refine design concepts based on feedback.
Design System
We conducted a heuristic evaluation and identified issues with information clarity, impact awareness, and content organization on the old TKP website. The cluttered interface hindered user engagement and satisfaction, emphasizing the need for a UX redesign to improve usability and streamline information.
Heuristic Evaluation
Ideation
Usability Testing
Iteration
We performed usability testing to observe the responses of potential website visitors to our designs. Through our user tests, we learned:
The patterns and shapes behind the text are distracting. The design are inconsistent as well.
Changed
Use boxes as a container and divider for sections and content
Final Product
Balancing Team Dynamics and Individual Needs: Being responsible for a team spread across the world meant recognizing and respecting the individual needs of my teammates. They had varying commitments, from internships to school, and dealing with different time zones. Managing their schedules and assignments while ensuring nobody fell behind was a significant challenge. This experience taught me the importance of flexibility in leadership and the value of tailoring my management style to accommodate the unique situations and needs of each team member.
Strategic Collaboration and Vision Alignment: As a design manager, my role extended beyond overseeing design tasks. I learned that successful design management also involves aligning design efforts with broader product and business goals. I became adept at collaborating with product managers to ensure that our design work was in line with the product roadmap and vision. It reinforced the importance of clear communication, goal setting, and ensuring that every design decision contributes to the product's overall success. This experience enhanced my ability to lead a team that is not only skilled but also strategically aligned and purpose-driven.
Learnings
The About Us page displays too much information, making it look cluttered.
Changed
Leave the description and unimportant information for the detailed page.
Use symbols and headers to indicate the core value
Final Design
The lack of an empathy connection results in users not feeling valued for their contributions, hindering motivation.
Changed
Show users the impact they could make
Attached FAQs serve to provide clarity and information, enhancing trust and transparency.
