Role
Designer & Developer
UX/UI design, information architecture, visual design, front-end development, and ongoing website maintenance.
UX/UI Case Study
WAADA Nonprofit Website Redesign
A responsive nonprofit website project focused on improving information architecture, visual hierarchy, content organization, and long-term maintainability for a cultural arts organization.
Client
WAADA
A nonprofit organization supporting cultural, artistic, and community-based programs.
Tools
HTML, CSS, JS
Built with responsive front-end code, Bootstrap layout patterns, and reusable sections.
Focus
UX Structure
Clear navigation, scannable content, mobile-friendly layout, and easy content updates.
Project Overview
Turning nonprofit content into a clearer digital experience
WAADA needed a website that could present its mission, events, gallery materials, team information, donation details, and community programs in a more organized way.
The goal was not only to make the website look better, but also to make it easier for visitors to understand what the organization does and easier for the organization to update content over time.
I approached the project as a UX and information design problem: simplify the structure, create repeatable content sections, and build a responsive website system that can grow with the organization.
Problem
Visitors needed a simpler way to understand the organization
Nonprofit websites often contain many types of information: mission statements, programs, event photos, team members, donation information, and announcements. Without a clear structure, visitors may feel overwhelmed or miss important actions.
The main UX challenge was organizing this content so the website felt simple for users while still remaining flexible for future updates.
Goal
Build a clear, responsive, and maintainable website system
The project goal was to create a website structure that helps users quickly find key information, understand WAADA’s community work, browse visual content, and access donation-related information.
From a design perspective, the website needed consistent navigation, visual rhythm, clear content hierarchy, and reusable layouts for long-term maintenance.
User Needs
Designing for visitors, members, and organizers
Based on the organization’s content needs, I considered three main user groups: first-time visitors, community members, and internal organizers who need to update content.
01
First-Time Visitors
Need to quickly understand what WAADA is, what it does, and why the organization matters to the community.
02
Community Members
Need to browse events, galleries, programs, and community activities without getting lost in too much information.
03
Website Maintainers
Need reusable sections and consistent layouts so future updates can be added without redesigning the entire website.
Information Architecture
Organizing content into a clear website structure
I organized the website around the main content areas users would expect: Home, About, Gallery, Events, Team, and Donate.
This structure helps visitors move from general understanding to deeper browsing and finally to action-based content such as donation or contact information.
The page system also makes the website more scalable because new programs, galleries, or event updates can be added into existing sections.
Design Process
From content structure to responsive implementation
The process followed a practical UX workflow: understand the content, organize the structure, design reusable layouts, and refine the website across devices.
01
Understand Content
Reviewed the organization’s core content needs, including mission, events, gallery materials, team information, donation content, and community programs.
02
Create Structure
Grouped information into clear sections and pages so visitors could scan, understand, and navigate the website more easily.
03
Build & Refine
Developed responsive pages with HTML, CSS, JavaScript, and Bootstrap, then refined spacing, hierarchy, image display, and mobile behavior.
Design Decisions
Key UX/UI improvements
The visual direction supports clarity, trust, and ease of browsing while keeping the layout practical for a nonprofit organization.
01
Clear Visual Hierarchy
Used section labels, large headings, short paragraphs, and card-based layouts to help users quickly scan each page.
02
Reusable Layout System
Created repeatable section patterns for events, gallery content, team details, and donation information so the site remains consistent over time.
03
Responsive Experience
Adjusted spacing, image sizing, navigation behavior, and card layout so the website works across desktop, tablet, and mobile screens.
Website Screens
Selected screens from the final website
These screens show how the final design organizes homepage content, event information, and mobile browsing.
Outcome
A clearer and easier-to-maintain nonprofit website
The final website gives WAADA a more organized digital platform for presenting its mission, visual content, team information, donation details, and community programs.
01
Clearer Navigation
Visitors can move through the website more easily because the main content areas are separated into clear pages and sections.
02
Better Content Flow
The site uses stronger hierarchy, shorter content blocks, and visual sections to make nonprofit information easier to scan.
03
Long-Term Maintenance
Reusable layouts make it easier to add future events, gallery updates, team changes, and organization announcements.
Reflection
What I learned from this project
This project helped me connect graphic design, UX thinking, information architecture, and front-end development. I learned that a nonprofit website needs more than visual polish: it needs a clear structure that supports real communication needs.
The most important design lesson was that maintainability is part of user experience. A website that is easy to update can stay accurate, useful, and consistent for both visitors and the organization.
