Website Redesign for NGO
PRODUCT DESIGN · RESEARCH
PROJECT BRIEF
INTRODUCTION
ORT South Africa is an educational and training NGO dedicated to making individuals employable and creating job opportunities. They do empowering work, yet their digital platform does not capture this. My connection to this NGO inspired me to undertake a passion project: redesigning their website. This redesign demonstrates my vision for transforming their digital presence to more accuratley reflect their impactful work and to attract additional donors and volunteers, ensuring the sustained success of ORT SA's important work.
MY ROLE
Research, analysis, product design
TOOLS
Figma, Adobe sketch
PROJECT TYPE
Responsive web for desktop and mobile
WHAT PROBLEM AM I TRYING TO SOLVE
The misalignment between ORT South Africa's impactful community work and its online representation.
STEP 1: LAYING THE FOUNDATION
UNDERSTANDING THE IMPORTANCE OF WEBSITES FOR NGOs
I analysed the role of websites for NGOs, particularly focusing on how a well-designed website could help ORT SA improve their business and goals.
💰 Fundraising
Provide information about how funds are used, which can build trust and encourage more contributions.
✅ Credibility & Trust
A website often serves as a first impression showcasing the organization's legitimacy and transparency. It plays a role in confirming its authenticity and commitment to its cause.
📢 Communication & Advocacy
A website allows NGOs to effectively convey their mission and goals, showcase achievements, and educate the public about their cause.
🤝 Networking
A Website can act as an information hub and facilitate easy communication which invites collaborative opportunities.
STEP 2: RESEARCH PHASE
To attract donors and volunteers and position ORT as a trusted NGO, I set out to understand how to make ORT South Africa's website stand out from competitors while addressing user needs.
🕵️♀️ Competitor Analysis
To understand the big picture, I looked at what other NGOs were doing, identifying what they were good at and what they could improve.
📊 User Survey
To understand user behaviors – specifically, the motivations and patterns behind user interactions with NGO websites.
🕵️♀️ COMPETITOR ANALYSIS INSIGHTS
Visual storytelling is key
The most compelling NGO websites don't just tell; they show.
Showcase tangible impact
Supporters want to see the impact of their donations.
Foster a sense of community
They make supporters feel like they are actively part of a group that is making a difference together.
📊 USER SURVEY INSIGHTS
80%
Of surveyed users use the website as a key research tool for deciding on donations and volunteering
78%
Of surveyed users emphasis simplicity in website navigation is key for engagement & involvement
What information are users looking for in the website?
95%
Of surveyed users find fulfillment in their involvement with an NGO through visible impact
The beneficiaries the NGO supports
NGO’s mission & Vision
Tangible results showcasing the combined impact of the NGO and its supporters.
KEY TAKE AWAYS FROM MY RESEARCH
Impact Visibility: Users appreciate seeing clear evidence of their contributions' impact.
Mission & Vision Alignment: This is important for users who want to ensure that their efforts and contributions are in line with causes they genuinely care about.
User fulfillment from impact: Users are motivated by witnessing the real-world outcomes of their support.
Being part of a larger, collective effort: A website can serve as a powerful tool to enhance the sense of community, fostering a shared purpose and connection among users.
STEP 3: DEFINITION PHASE
I created user personas from research data to represent the NGO's website diverse visitors. This was to tailor the redesign specifically to their varied needs and preferences.
USER PERSONA 1: VOLUNTEER/SPONSOR
USER PERSONA 2: DONOR
USER PERSONA 2: PHILANTHROPIST
SITEMAP
After pinpointing our user personas' needs and behaviors, I developed a sitemap to make crucial information easily accessible and navigable. This strategy, shaped by feedback on users' limited time, guarantees swift and intuitive website navigation.
USER FLOW
I want to ensure that users constantly find a clear next step or link to follow. Each website section should guide users deeper into the site and maintain their engagement and curiosity.
STEP 4: MID-FIDELITY WIREFRAMES
STEP 5: HI-FIDELITY WIREFRAMES
BEFORE LANDING PAGE
AFTER LANDING PAGE
The landing page redesign simplifies navigation and highlights the NGO's impact and beneficiaries. It also includes a clear explanation of why supporting ORT is crucial.
BEFORE DONATE PAGE
AFTER DONATE PAGE
User surveys revealed that people often leave websites that are time-consuming or complicated. In response, the redesign aims to create a simpler experience, especially during critical interactions like donations. This includes reducing unnecessary clicks and streamlining the donation process, contrasting with the more complex current design.
BEFORE CONTACT PAGE
AFTER CONTACT PAGE
GET INVOLVED PAGE
We've included a "Get Involved" section on the landing page and also created a specific page for it. This ensures clarity for users to see how they can get involved in ORT SA.
WHAT WE DO PAGE
In the redesign, I've ensured that each page leads users to another section, creating a continuous journey through the website. This approach prevents users from feeling stuck at the end of a page without a clear direction. By suggesting next steps, we guide users to learn more, often introducing them to information they might not have initially sought out.
MOBILE HI-FI WIREFRAMES
LAST STEP: REFLECTION
IF I HAD ADDITIONAL TIME I WOULD…
Create user tests with validating metrics
To ensure the website aligns with and positively impacts the NGO's business goals. The process would be key for enhancing UX and would also offer measurable insights into the websites performance (visually and strategically).
Refining the UI
To ensure that the website effectively engages the audience and encourages them to spend more time on it.
