At a glance
- Problem
- Garden Club needed a clear, lightweight site for announcements, membership info, and volunteer sign-ups.
- Role
- UI design, responsive layout design
- Tools
- HTML/CSS, mobile-first design
- Timeline
- 7 versions with progressive refinement
- Key Decisions
- Navigation tabs (Programs / Events / Join), quick links block, compact content for on-campus browsing
- Result
- Improved readability and reduced time-to-action for volunteers.
Live preview — GSGC V7 (Final)
Problem / Context
The Garden Club needed a clear, lightweight site for announcements, membership info, and volunteer sign-ups. Prior versions were inconsistent and hard to scan on mobile.
Audience
Students, staff, and local community members looking for garden events, volunteer schedules, and quick answers about how to join.
Goals
- Make key actions obvious: Join, Volunteer, and View Events.
- Keep information scannable on small screens.
- Reduce navigation steps to reach program details.
- Show seasonal updates without overwhelming the homepage.
Constraints
Responsive layout, high readability, and simple navigation were mandatory. Content length had to stay compact to support quick on-campus browsing.
Design Decisions
- Navigation tabs for Programs, Events, and Join to reduce menu depth.
- Quick links block near the top for recurring tasks.
- Structured layout with short sections and clear typography.
- Consistent spacing and card-based groupings for visual rhythm.
Iteration / Versions (v1–v7)
Each version tested a clearer hierarchy. Later iterations tightened spacing, improved the tab layout, and simplified the volunteer flow.
Outcome + Next Steps
The v4–v7 structure improved readability and reduced time-to-action for volunteers. Next steps include a lightweight event filter and a simple newsletter signup.