Product Design
The Kilgoris Project
Role - UX Design Manager
DISCIPLINE - UI/UX Design, Visual Design and Branding
TOOLS - Figma
TIMELINE - 4 months • May - Aug 2023
What is The Kilgoris Project?
Goal
My Role
Understanding the User
User journey map of vistors visiting the website
The Kilgoris Project (TKP) is a nonprofit organization focused on uplifting Maasai children and rural communities in Kenya. Through education, healthcare, and community development initiatives, they aim to create lasting positive change and empower the Maasai people for a brighter future.
In our initial client meeting, our client expressed a compelling reason for the website redesign: their website has remained untouched for a span of five years, leading to obsolescence across various aspects, including information and design. The primary objective of this website overhaul is to offer users a lucid comprehension of the organization's mission and the significant impact it has accomplished. By doing so, the client aims to entice and encourage users to engage in donations.
I had the privilege of serving as the Design Manager in the TKP project. My role encompassed several key responsibilities, including overseeing and managing the design team, collaborating closely with both the Project Manager and the client, delegating tasks, and ensuring the quality and consistency of our projects. I actively contributed to various aspects of the project, from crafting the user journey map and conducting competitive analyses to usability testing. Additionally, I maintained continuous communication with the client and was involved in the design of every webpage, striving to deliver a cohesive and engaging user experience.
Understanding the visitor’s journey is crucial to designing an intuitive user experience for website visitors. We created surveys for 40 users and conducted interviews with 10 users to understand how they interact with the website and their experience using it, as well as what factors can influence their decision to donate. According to the users, the primary reason for visiting the website is to learn more about the organization. The main motivating factors for donating are the organization's impact and its stories. 30% of the users indicated that they wanted to leave the website as soon as they entered it. They found it to be untrustworthy, with the outdated information and a lack of visual appeal to capture their attention. Unfamiliarity with the organization's work and projects can deter potential donors.
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 created a display that is easier for users to read and understand. I've condensed the textual content into infographics and statistics, emphasizing the key impact that TKP has made in the realm of educating children. This enables users to grasp complex information quickly, improving comprehension while making the content more visually appealing and accessible.
This design framework served as a cohesive structure, promoting consistency across our team's design endeavors. Through meticulous definition of typography, color schemes, spacing, and interactive elements, we ensured each design iteration adhered to a standardized aesthetic and functional criteria. Beyond addressing initial inconsistencies, the design system optimized our workflow, allowing team members to prioritize creativity and user-centric solutions over resolving design disparities. Consequently, the adoption of the design system yielded refined high-fidelity designs that effectively communicated the brand identity and elevated the overall user experience of TKP's new website.
Home Page
In the new TKP website, instead of mere pictures, it now features infographics that vividly depict the organization's impact across various areas. These infographics offer users a clear understanding of TKP's focus areas while bolstering its credibility through quantifiable data. We've also transitioned to a multimedia format, combining images and videos for a more engaging presentation. To make accessing impact stories easier, we've included brief summaries alongside them, allowing users to gauge their interest before diving in. Furthermore, we've added more call-to-action buttons to provide users with multiple pathways to explore and learn about TKP's work.
Enhancing User Empathy and Encouraging Donations
The new design introduced a significant change in the approach. This section now educates users about how varying donation amounts can create distinct impacts on the lives of children, fostering a deeper understanding of the difference they can make. To enhance the emotional connection, we've included a speech from the executive director expressing gratitude. The new design aims to engage users by providing a series of actions that impress upon them the profound impact of their contributions, ultimately eliciting a stronger sense of empathy and motivation to support TKP's mission.
Old TKP Donation Page
Becoming a Field Partner Page
The old design primarily offered donation options without invoking empathy.
Old TKP Our Mission Page
Old TKP Our Story Page
Transforming Dense Text into Engaging Visual Layouts
The previous version of the TKP website suffered from a significant issue—unorganized, lengthy paragraphs of text that crowded the pages. Our survey results shed light on the root of the problem: visitors spent very little time on the website, and their primary reason for wanting to leave was the overwhelming amount of text. This text overload significantly impacted the website's readability, making it challenging for users to absorb the content and diminishing their desire to continue reading.
Old TKP Our Impact Page
In response to the issue mentioned, our solution was to focus on designing and restructuring the layout of the text-heavy content. We adopted several strategies to enhance readability and engagement. These included breaking down lengthy text passages with the judicious use of media elements, segmenting content with clear headers, and incorporating icons and blocks for improved visual organization. As an illustrative example, we encountered a formidable challenge in the form of a lengthy interview script that the client wished to include on the website. In response, we transformed this monolithic script into a dynamic dialogue format. This not only made the content more engaging but also allowed users to gain a clearer understanding of the perspectives of both the interviewee and the interviewer, thereby enriching the overall user experience.
Design Progress
Research
User Flow
Competitive Analysis
With all the pain points in mind, I sketched out the user flow of visitors from entering the website to leaving the website and mapped out all the possible chances or reasons that can attract them to donate.
We conducted three competitive analysis studies with similar nonprofit organization websites. Initially, we compared the three key goals shared by the organizations: making donations, understanding the impact, and learning more about the organization. Next, we listed and evaluated the positive features present in each organization's website to identify strengths and weaknesses. This process allowed us to avoid common usability issues and gain insights from competitors' websites, helping us to examine specific elements and features.
Low-Fidelty Design
Below are part of the low fidelity designs that were all created on Figma. We created these low fidelity wireframes to quickly visualize and iterate on various design concepts without being bogged down by the details. It also helped our team work at a rapid pace, enabling designers to explore multiple design directions and make quick changes based on feedback.
Design System
We conducted a heuristic evaluation following Jakob Nielsen’s 10 usability heuristics to identify usability issues and provide recommendations for improving the old TKP website interface.
Heuristic Evaluation
Ideation
Usability Testing
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
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.
