Overview
Selfless giving as a form of art
Doniraj computer is a non-governmental organization that collects computers through donations, repairs them and donates them to children or other digitally excluded people who do not have computers and equipment. Thus, they provide everyone with an equal chance and opportunity.
The challenge
We had to work on top of an already existing website built by high school students and enhance it with more features that will boost the site functionality, along with UI improvements while keeping the same style and branding.
My contribution
Visual process concept
Form design
Graphic Design
The team
3 × ux/ui designers
Year
2022
Process
client interview
We began the project by conducting a detailed interview with the client to understand their vision and expectations for the redesigned website. The client emphasized the importance of inclusivity and accessibility for both donors and applicants. They wanted to extend their mission beyond local boundaries by adding multiple language support as well as online forms for donations and applications.
personas, journey, maps
We created detailed user personas based on our research to represent the two primary user groups of Doniraj Computer, one is a donator and another one is an applicant. By understanding the motivations, goals, and frustrations of these users, we were able to better understand the website's strategy, design, and functionality to meet their specific needs.
We mapped out the ideal journey, focusing on the critical paths they would take through the website. By doing this, we ensured that each user could easily achieve their goals—especially for applying for a computer, given the assumption that the user might lack some digital skills.
We developed a comprehensive site map to structure the website effectively. This ensured that all essential pages were included, prioritized, and easily accessible.
market research
We analyzed several NGOs and non-profits in Macedonia and internationally, focusing on those that provide technology or other essential services to underprivileged communities. Our key findings were:
Many NGOs offer simple donation processes with multiple payment options (online and offline).
Successful NGOs prioritize impact storytelling through real-life case studies and success stories.
International competitors often include multi-language support and accessible design to reach a global audience.
Our moodboard for Doniraj Computer emphasized warmth, empathy, and digital inclusion. We used elements like friendly, playful colors and illustrations representing diverse individuals
visual style
The design is clean, minimalistic, and inclusive, aiming to make both donors and applicants feel welcome. We incorporated warm tones, with an emphasis on friendly typography and simple iconography. The style strikes a balance between a professional look and a warm, charitable feel, ensuring ease of navigation.
from low to high fidelity wireframes
We sketched low-fidelity wireframes to map out the basic layout of the website, ensuring that all essential information, CTAs, and forms were properly placed. This helped us focus on structure before diving into aesthetics.
After refining the layout and receiving feedback from the client, we created high-fidelity wireframes to focus on design elements such as typography, color schemes, and imagery.
home page
The home page is the primary entry point for users. It introduces Doniraj Computer, highlights its mission, and guides users to important actions like donating or applying for a computer. The design includes clear navigation, a compelling hero section, key statistics, and a CTA for the two main actions: donate or apply.
The existing homepage lacked clear messaging, didn’t effectively direct users toward key actions, and had a cluttered layout. Foreign visitors were excluded due to the absence of multilingual support.
We redesigned the homepage with a clean, easy-to-navigate layout that features key CTAs prominently. The multilingual feature was added to include donors from other countries. We also included statistics and success stories to build credibility and motivation for users to engage.
digital inclusion
The Digital Inclusion page provides resources and training materials for both basic and advanced digital skills tailored for individuals who are digitally excluded.
The existing website did not offer adequate resources or information on digital skills training, which is essential for individuals who lack access to technology.
We developed a comprehensive Digital Inclusion page that features a variety of resources, including tutorials, workshops, and links to online courses.
donation process
This section visually outlines the steps of donating a computer, from submission to delivery, making the process transparent and easy to follow.
The donation process was unclear, causing hesitation among potential donors who were unsure how their contributions would be used or how to participate in the process.
The design uses illustrations to show each phase—from donating, to repair, to redistribution—instilling confidence in the organization’s operations.
donate/apply forms
Prior to this redesign, donations were made through social media or a simple contact form without any options for details regarding the donation, leading to disorganization and inefficiencies.
This structured approach behind these forms enhances data collection, improves the organization’s ability to manage donations, and ensures that all requests are processed efficiently.
Outcome
By focusing on community engagement and delivering the warmth of the mission that the clients bring to this wonderful initiative, we created an inviting platform that not only promotes the organization’s aim of providing computers to those in need but also facilitates a seamless donation and application process.