UX AUDIT | WEBSITE REDESIGN
A redesigned website featuring an enhanced, user-friendly donation checkout process for Stichting Tjeko.
Project overview
My client
.png)
My role
UX Researcher
Web designer
The team
Project owner
Web developer
the Tools
Figma
Adobe Illustrator
Adobe Photoshop
Miro Collaboration tool
the timeline
Jan - April 2024: Research, evaluation, design
April - Current: Iterations & support
About Tjeko
Tjeko is a non-profit organisation dedicated to bringing joy and play to children in underprivileged communities in Africa. They create safe, structured play programs that foster creativity, social interaction, and personal growth. Through their initiatives, Tjeko aims to empower children and communities, inspiring hope and positive change.
Project scope
Redesign Tjeko's volunteer-built website to support the organization’s growth and user needs, enhancing the donation and adoption processes while introducing a user-friendly platform with a dashboard for managing donations and subscriptions.
Methodology
-
Competitive benchmarking
-
Customer journey map
-
User flow diagram
-
Affinity map
-
Home page
-
Check-out process
-
Dashboard
-
Design documentation
Project closure and final deliverables
The project, covering research, evaluation, and design, successfully modernised the website and introduced new features. Deliverables included high-fidelity Figma designs, a detailed Miro board of user flows, functional prototypes, and design documentation. The design earned stakeholder approval, and the platform is now in development with ongoing iterations.
01. Research
This phase
Usability test
Competitive benchmarking
Usability test
In usability tests, participants were instructed to act as volunteers and complete three tasks:
-
Create an account
-
Find more information about the adoption and donation programs
-
Donate funds
.png)
The main pain points that were discovered in the usability test were:
-
Lack of a clear path to adoption and donation options
-
Insufficient adoption and donation information
-
Unclear navigation structure
-
Unclear call-to-actions
-
Outdated design
To elevate user engagement and satisfaction, I focused on enhancing navigation, providing detailed content, and improving CTAs.
Competitive benchmarking
In this competitive benchmarking exercise, I created a SWOT chart to assess the strengths, weaknesses, opportunities, and threats of Tjeko’s platform. The platform was compared against similar organisations like Stichting African Parks Foundation and African Bush Camps Foundation. The objective was to identify best practices and areas for improvement, ensuring alignment with industry standards and comparable platforms.
02. Analyse & Evaluate
This phase
Customer journey map
Affinity map
Customer journey map
Based on insights gathered from usability test interviews, I created a customer journey. This map highlighted key pain points that had the greatest emotional impact on users, providing a clear understanding of areas requiring improvement.
%20(1).png)
Affinity map
The next step involved critically analyzing the menu structure and its alignment with the platform's available information. Using a hands-on approach with sticky notes, I labeled and grouped various topics to establish a clear foundation. This process informed the creation of a main menu and footer menu, designed to facilitate seamless navigation across the platform.
03. Design
This phase
Homepage
Check-out process
Dashboard
Contact Forms
Home page
The homepage lacked a clear value proposition, call-to-action (CTA), and any indication that financial contributions to the project were possible. Implementing a new hero section was a critical step to engage visitors effectively and clearly communicate the project's purpose and goals.
Check-out process
The previous checkout process involved visitors completing a Google Form to provide their personal details. The administrative team subsequently utilised this information to follow up with interested parties. This process lacked the convenience of an integrated online payment option and involved an unfamiliar workflow, which undermined trust among users.
Focusing on mapping out the detailed user journeys, I started designing the new check-out process. The goal was to ensure seamless navigation through the most common workflows while defining integration pathways for the latest features within the existing platform. Throughout the process, I coordinated regularly with the developers to validate the feasibility and ensure the successful implementation of all functionalities.
The new user flows were translated into wireframes, leading to the creation of screens for the improved payment process, which was later refined into high-fidelity mock-ups. The new streamlined process now provides users with a familiar and intuitive experience while integrating a secure online payment system. This ensures accuracy and aids in the reduction of administrative workload during adoptions and donations.
User flows and screens for the new dashboard
As part of the new website design and enhanced functionality introduced by the updated adoption and donation pages, a user dashboard was developed to empower users with better control and accessibility to their donation history and subscriptions. The dashboard allows users to:
-
Edit and update personal information.
-
Manage and modify subscription preferences.
-
View a detailed history of their past activities and contributions.
Below is a walkthrough of the high-fidelity prototype, showcasing the streamlined interface and intuitive design, aimed at delivering a seamless user experience.
Contact forms
A thoughtfully designed contact form can significantly enhance conversion rates, build user trust, and minimize errors and friction. By prioritizing design principles such as hierarchy, alignment, and the law of proximity, I developed a collection of visually appealing yet highly functional contact forms. These versatile forms are tailored for seamless integration across various sections of the website, ensuring both usability and aesthetic coherence.
04. Handover
The handover documentation included the following materials:
Design documentation
-
High-fidelity mockups of all pages created in Figma
Design system & style guide
-
Typography: Font families, sizes, line heights, and spacing
-
Color Palette: Primary, secondary, and accent colours with hex codes
-
UI Components: Buttons, forms, cards, icons, and states (hover, active, disabled)
-
Spacing & Grid System: Margins, padding, and column structure for consistent layout
Interactive & functional specifications
-
Prototype or Wireframes: Clickable prototypes showing navigation and user flows
-
Component Behavior: Animations, transitions, hover effects, and micro-interactions
-
Form Validations: Input field requirements (e.g., character limits, error messages)
Assets & exported files
-
Icons & Images in SVG and PNG format
-
Logos & Brand Elements
Handoff notes
-
Handoff in Figma: Inspectable design specs with measurements
-
Developer Annotations: Notes on spacing, fonts, and functionality to avoid ambiguity
05. Expected outcomes
Improved user experience
-
Improved navigation and user flows will make it easier for visitors to engage with Tjeko’s mission.
-
A more intuitive and structured layout can reduce friction and encourage deeper exploration.
Stronger Brand Identity & Visual Appeal
-
A refined color palette, typography, and design system will create a more cohesive and professional look.
-
Consistency in UI elements will strengthen brand recognition and credibility.
Increased Engagement & Conversions
-
A well-optimized donation and adoption flow could lead to higher conversion rates.
-
Clearer calls-to-action (CTAs) and user-friendly forms may drive more sign-ups and participation.
Improved Accessibility & Responsiveness
-
The redesign likely incorporates accessibility best practices, ensuring a better experience for all users, including those with disabilities.
-
Mobile-first optimizations will enhance usability across different devices.
Operational Efficiency
-
A structured design system simplifies future updates, reducing development and maintenance efforts.
-
A more intuitive CMS structure (if updated) will make content management easier for the team.
Strengthened Trust & Credibility
-
A modern, polished design builds trust among donors, volunteers, and stakeholders.
-
Transparency in information presentation may improve public perception and support.