Community Portal
This project sits outside the boundaries of traditional instructional design. Faced with a real community problem and a client with a limited budget, I applied my UI/UX skills and leveraged AI responsibly to design and develop a fully functional community portal. From a hand-drawn sketch to a live demo approved for funding at an HOA board meeting, this project represents what is possible when design thinking meets intentional AI use.
The Problem: A residential HOA had no centralized place for residents to access bylaws, announcements, contractor information, or architectural forms. Neighbors relied on mass emails that often left people out of important conversations. The board needed a low-cost, easy-to-maintain solution that did not require ongoing developer support.
Responsibilities: UI/UX Designer, AI Prompt Engineer, Project Lead
Tools Used: Claude AI, GitHub, GitHub Pages
The Process
-
User interviews and neighbor feedback revealed that approximately 90% of community communication was happening on mobile devices. This single insight drove every design decision that followed and established mobile-first as a non-negotiable requirement.
-
The design process began with hand drawn sketches during a client meeting — a deliberately low fidelity approach that kept the focus on structure and user flow rather than aesthetics. Those sketches became the direct instructions for the first design build.
-
Claude served as both a development partner and a UI/UX consultant throughout the build. By establishing clear parameters and applying responsible prompting practices — verifying outputs, iterating deliberately, and maintaining design oversight. I used AI to accelerate development while staying in control of every decision. Claude supported design updates, code revisions, GitHub pushes, and client demo preparation.
-
The GitHub repository gave the client a live preview link to review between sessions, enabling asynchronous feedback without requiring technical knowledge on their end. Multiple iterations refined the design before a final demo was presented at an HOA board meeting, where the portal received unanimous approval and funding.
The Result.
The portal was approved for funding at the HOA board meeting following the live demo. Final handoff has been completed and is currently in security review with a developer confirming Google Drive API integrations before rollout to residents.
Key Takeaways
Mobile first design grounded in real user research
Responsible AI use as a force multiplier, not a replacement for design thinking
Full project lifecycle ownership from discovery through client handoff
View a demo of the live portal here or click the button below to see the site fully on your desktop or mobile device.
Note: This demo portal had mock data, and not all of the functionality is present. There are callouts to give further details.