Gilbertjnlee

YAYASAN SAYAP HARAPAN INDONESIA

YAYASAN SAYAP HARAPAN INDONESIA WEBSITE

YAYASAN SAYAP HARAPAN INDONESIA

A strategic digital transformation aimed at humanizing the non-profit experience, integrating institutional credibility with a frictionless donation architecture to empower a new generation

EXECUTIVE SUMMARY

Yayasan Sayap Harapan Indonesia is a non-profit organization focused on social welfare, humanitarian initiatives, and community empowerment. At the start of this project, the foundation did not yet have a centralized digital platform to clearly communicate its mission, programs, and values.

THE OVERALL PROCESS

This project required balancing emotional storytelling with clear information delivery, ensuring visitors could both feel the mission and understand how to get involved.

Aligning

Understanding the foundation’s vision, mission, and core values

Aligning

Understanding the foundation’s vision, mission, and core values

Aligning

Understanding the foundation’s vision, mission, and core values

Research

In-depth stakeholder interviews
Reviewing similar NGO & foundation web

Research

In-depth stakeholder interviews
Reviewing similar NGO & foundation web

Research

In-depth stakeholder interviews
Reviewing similar NGO & foundation web

UXFlow

Website outline & information architecture
User journey mapping

UXFlow

Website outline & information architecture
User journey mapping

UXFlow

Website outline & information architecture
User journey mapping

Design

Visual exploration & tone definition
Prototyping

Design

Visual exploration & tone definition
Prototyping

Design

Visual exploration & tone definition
Prototyping

Build

Translating designs into a responsive website

Build

Translating designs into a responsive website

Build

Translating designs into a responsive website

ALIGNMENT

THE SCOPE

Built Yayasan Sayap Harapan Indonesia’s website for mobile and desktop from the ground up. The scope focused on presenting humanitarian programs, impact stories, and donation pathways in a clear, emotionally resonant, and accessible way

THE CHALLENGES

Building the website from scratch presented several strategic and design challenges:

Translating an abstract mission into a digital experience
The foundation’s values and impact are deeply human, but not always easy to express clearly through a website.
Building trust without prior digital presence
As a new platform, the website needed to establish credibility and transparency from the first visit.
Balancing emotion and responsibility
The design had to evoke empathy without being overly emotional or exploitative toward beneficiaries.
Structuring diverse programs into a clear narrative
Social initiatives vary in scope and audience, requiring a cohesive information structure.

Building the website from scratch presented several strategic and design challenges:

Translating an abstract mission into a digital experience
The foundation’s values and impact are deeply human, but not always easy to express clearly through a website.
Building trust without prior digital presence
As a new platform, the website needed to establish credibility and transparency from the first visit.
Balancing emotion and responsibility
The design had to evoke empathy without being overly emotional or exploitative toward beneficiaries.
Structuring diverse programs into a clear narrative
Social initiatives vary in scope and audience, requiring a cohesive information structure.

Building the website from scratch presented several strategic and design challenges:

Translating an abstract mission into a digital experience
The foundation’s values and impact are deeply human, but not always easy to express clearly through a website.
Building trust without prior digital presence
As a new platform, the website needed to establish credibility and transparency from the first visit.
Balancing emotion and responsibility
The design had to evoke empathy without being overly emotional or exploitative toward beneficiaries.
Structuring diverse programs into a clear narrative
Social initiatives vary in scope and audience, requiring a cohesive information structure.

THE CONSTRAINTS

Several constraints shaped how the solution was designed and built:

Limited initial content and documentation
Visual assets, impact data, and written content were still evolving during the project.
Need for future flexibility
The website had to support new programs, reports, and campaigns without major redesigns.
Resource efficiency
Design and development decisions prioritized sustainability and ease of maintenance.
Timeline considerations
The project required an efficient process while still allowing room for iteration and alignment.

Several constraints shaped how the solution was designed and built:

Limited initial content and documentation
Visual assets, impact data, and written content were still evolving during the project.
Need for future flexibility
The website had to support new programs, reports, and campaigns without major redesigns.
Resource efficiency
Design and development decisions prioritized sustainability and ease of maintenance.
Timeline considerations
The project required an efficient process while still allowing room for iteration and alignment.

Several constraints shaped how the solution was designed and built:

Limited initial content and documentation
Visual assets, impact data, and written content were still evolving during the project.
Need for future flexibility
The website had to support new programs, reports, and campaigns without major redesigns.
Resource efficiency
Design and development decisions prioritized sustainability and ease of maintenance.
Timeline considerations
The project required an efficient process while still allowing room for iteration and alignment.

Diving Deeper into the Challenges

To craft a meaningful solution, I conducted:

Benchmark Analysis
Studied local and international foundation websites with strong storytelling and trust signals.
Audience Insight Review
Gained understanding of donor motivation and volunteer engagement behavior.
Visual & Emotional References
Explored warm, human-centric design approaches commonly used by international NGOs.

To craft a meaningful solution, I conducted:

Benchmark Analysis
Studied local and international foundation websites with strong storytelling and trust signals.
Audience Insight Review
Gained understanding of donor motivation and volunteer engagement behavior.
Visual & Emotional References
Explored warm, human-centric design approaches commonly used by international NGOs.

To craft a meaningful solution, I conducted:

Benchmark Analysis
Studied local and international foundation websites with strong storytelling and trust signals.
Audience Insight Review
Gained understanding of donor motivation and volunteer engagement behavior.
Visual & Emotional References
Explored warm, human-centric design approaches commonly used by international NGOs.

Stockbit

Stockbit

Stockbit

PROBLEMS

The foundation did not yet have a clear digital narrative
Program information risked feeling fragmented without proper structure
Limited storytelling reduced opportunities to build trust and engagement

The foundation did not yet have a clear digital narrative
Program information risked feeling fragmented without proper structure
Limited storytelling reduced opportunities to build trust and engagement

The foundation did not yet have a clear digital narrative
Program information risked feeling fragmented without proper structure
Limited storytelling reduced opportunities to build trust and engagement

NEEDS

A warm, human-centered design that builds credibility and trust
Clear storytelling about impact and beneficiaries
Simple navigation that guides users to donate or participate

A warm, human-centered design that builds credibility and trust
Clear storytelling about impact and beneficiaries
Simple navigation that guides users to donate or participate

A warm, human-centered design that builds credibility and trust
Clear storytelling about impact and beneficiaries
Simple navigation that guides users to donate or participate

GOALS

Increase public trust and engagement
Improve clarity of programs and mission
Encourage donations and volunteer participation

Increase public trust and engagement
Improve clarity of programs and mission
Encourage donations and volunteer participation

Increase public trust and engagement
Improve clarity of programs and mission
Encourage donations and volunteer participation

Crafting the New Brand Identity

Visual References & Moodboard

The visual direction focused on warmth, hope, and sincerity—using soft colors, meaningful imagery, and clean typography to reflect compassion and credibility.

Information Architecture

Content was structured to guide users through a clear journey:
understanding the mission → seeing the impact → taking action.

Final Designs

A Human & Trustworthy Digital Presence

The design incorporates:

Clean and calm layouts to avoid information overload
Emotional storytelling through imagery and copy
Clear call-to-action for donations and participation

The design incorporates:

Clean and calm layouts to avoid information overload
Emotional storytelling through imagery and copy
Clear call-to-action for donations and participation

The design incorporates:

Clean and calm layouts to avoid information overload
Emotional storytelling through imagery and copy
Clear call-to-action for donations and participation

Impactful & Engaging User Experience

The website helps visitors quickly understand what the foundation does, who it supports, and how they can contribute. The experience feels respectful, hopeful, and transparent—core values for a social impact organization.

DEVELOPMENT

The website was designed and developed with responsiveness and scalability in mind, ensuring future programs, reports, and campaigns can be added seamlessly.

Key Takeaways

Balancing Professionalism & Fun: Creating an engaging experience while maintaining credibility was crucial for success.

Design with Empathy
Human-centered design is essential for social impact organizations.
Trust Through Clarity
Clear structure and transparent information build long-term donor confidence.
Story-Driven Experience
Impact stories are the foundation of effective nonprofit digital platforms.
Scalable Foundation
A flexible design system supports future growth and evolving programs.

Balancing Professionalism & Fun: Creating an engaging experience while maintaining credibility was crucial for success.

Design with Empathy
Human-centered design is essential for social impact organizations.
Trust Through Clarity
Clear structure and transparent information build long-term donor confidence.
Story-Driven Experience
Impact stories are the foundation of effective nonprofit digital platforms.
Scalable Foundation
A flexible design system supports future growth and evolving programs.

Balancing Professionalism & Fun: Creating an engaging experience while maintaining credibility was crucial for success.

Design with Empathy
Human-centered design is essential for social impact organizations.
Trust Through Clarity
Clear structure and transparent information build long-term donor confidence.
Story-Driven Experience
Impact stories are the foundation of effective nonprofit digital platforms.
Scalable Foundation
A flexible design system supports future growth and evolving programs.