01
Clear Site Structure
Organized the website into focused pages and sections so visitors can quickly understand the organization, browse visual content, learn about the team, and find the donation path.
Project
Washington Arts and Design Association
A nonprofit website project focused on clearer content structure, responsive layout, visual hierarchy, and a more maintainable digital experience for visitors and community members.
Overview
Website Structure + UX + Maintenance
Washington Art and Design Association is a nonprofit organization that supports cultural, artistic, and community-based programs.
My work focused on improving how the organization presents its mission, gallery content, team information, donation details, and community activities through a clearer website structure.
The final direction uses consistent sections, reusable layouts, and responsive design patterns so the website can remain organized as the organization continues to grow.
Project Scope
What this project includes
- Responsive nonprofit website design and front-end development
- Home, About, Gallery, Team, and Donate page structure
- Clear navigation, page hierarchy, and visitor flow
- Content organization for programs, galleries, and community materials
- Reusable layout sections for future content updates
- Ongoing website maintenance and content support
Role & Tools
My Contribution
Led the design and development of the website, including UX/UI design, information architecture, and front-end implementation. Maintained and updated website content to support ongoing events and organizational needs.
Challenge
Making nonprofit content easier to browse and maintain
The organization needed a website that could present different types of content, including its mission, gallery materials, team information, donation details, and community programs, without overwhelming visitors.
The main challenge was creating a structure that feels simple on the front end while still being flexible enough for future updates behind the scenes.
This required a balance between visual clarity, intuitive navigation, and a reusable content system that could support long-term website maintenance.
Solution
A reusable website system for nonprofit communication
I designed the website as a connected system rather than a collection of separate pages, making the content easier to understand, update, and expand.
02
Consistent User Experience
Improved spacing, section rhythm, typography, card layouts, and responsive behavior to create a smoother browsing experience across desktop and mobile screens.
03
Maintainable Layout System
Built reusable sections for content updates, gallery materials, team information, and donation-related content so the website can remain consistent over time.
Process
How the website system was built
The process moved from content organization to visual layout and then to responsive front-end development.
01
Organize Content
Organized the organization’s content into a clear information architecture, defining key sections such as mission, gallery, team, donations, and community programs to support intuitive navigation.
02
Design Layouts
Created a consistent layout direction using visual hierarchy, spacing, image placement, card structures, and reusable section patterns.
03
Build & Refine
Developed responsive web pages using HTML, CSS, JavaScript, and the Bootstrap framework, ensuring consistent layout and usability across devices.
Website Highlights
Selected Website Screens
A focused selection of screens showing the homepage structure, content organization, and responsive user experience.
Outcome
A clearer and easier-to-maintain nonprofit website
The final website improved how WAADA presents its mission, visual content, team information, donation details, and community programs in one organized digital platform.
01
Clearer Navigation
Visitors can browse key information more easily through a cleaner page structure, improved content hierarchy, and consistent navigation.
02
Flexible Updates
The website structure supports ongoing updates for program content, gallery items, team information, and organizational announcements.
03
Practical Design System
The project connected UX thinking, information design, responsive web development, and nonprofit communication needs into one practical website system.
