Role
Designer & Developer
UX/UI design, information architecture, visual design, front-end development, and ongoing maintenance.
WAADA Website Redesign
Responsive Website System
A nonprofit website redesign focused on improving content organization, visual hierarchy, responsive design, and long-term website maintainability.
Project Snapshot
A clearer digital home for a nonprofit organization.
The project connected UX structure, front-end implementation, and maintainable page design into one consistent website system.
Client
Washington Art and Design Association (WAADA)
A nonprofit organization supporting cultural, artistic, and community-based programs.
Tools
HTML, CSS, JS
Built with responsive front-end code, reusable layouts, and mobile-friendly interaction patterns.
Focus
UX Structure
Clear navigation, scannable content, mobile-friendly layout, and easier 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.
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.
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, 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.
Clear Visual Hierarchy
Used section labels, large headings, short paragraphs, and card-based layouts to help users quickly scan each page.
Reusable Layout System
Created repeatable section patterns for events, gallery content, team details, and donation information so the site remains consistent over time.
Responsive Experience
Adjusted spacing, image sizing, navigation behavior, and card layout so the website works across desktop, tablet, and mobile screens.
Website Showcase
Selected pages from the final website.
A collection of key pages demonstrating the website’s structure, content organization, and responsive user experience across devices.
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
02
Better content flow
03
Long-term maintenance