Redesigning SJNA
Welcoming, community-centered redesign provides neighbors with up-to-date information, clear paths for involvement, and a responsive design that works for everyone—on any device.
Overview
Background
St. Johns is a historic North Portland neighborhood. The St. Johns Neighborhood Association (SJNA) helps keep residents informed, connected, and involved in local decisions. The association shares city updates, land-use changes, safety notices, and community events, but the website was not supporting that mission.
Problem
St. Johns residents need a website that provides easy access to local information and clear ways to get involved. Instead, the current platform feels uninviting, outdated, and confusing. With no budget, limited translation options, and an unsupported Google Sites build, progress depended on securing alignment from a volunteer board.
Solution
I created a scalable design foundation by running a usability audit, developing an empathy map, defining design principles, and building a Mini Design System. Using ChatGPT for rapid content structuring and tone calibration, I produced a high-fidelity prototype within strict no-code limits, resulting in a WCAG-compliant site that will strengthen community engagement.
Understanding Users
What We Learned From the Community — key pain points that guided our audit and shaped the Luis Carter persona.
1. Hard to get Involved
Residents often felt unsure and disconnected because the website offered no clear way to get involved, find meeting details, or understand what the association was working on. The lack of structure left people feeling frustrated and powerless.
2. Outdated & Uninviting
The site looked dated, felt disjointed, and didn’t reflect the spirit of the neighborhood. Key information was missing, inconsistent, or buried, and even the well-liked community newsletter wasn’t available. The overall experience was confusing and the donate page was never fully built.
3. Bad Mobile Experience
A usability survey showed that over half of users browse on smartphones and rated the mobile experience as “poor.” Many also wanted Spanish support, but offering translations would require a full duplicate site due to the zero budget and platform constraints.
This persona was created with the
help of feedback from real neighbors.
Opportunities
Turning pain points into actionable wins.
1. Improve Donate Flow
Residents need a straightforward way to contribute. By replacing the broken QR code process with a direct PayPal link, I helped make the giving process obvious, reliable, and easy to see — removing friction and giving the community a dependable way to support the neighborhood.
3. Optimize for Mobile
Google Sites’ automatic mobile stacking guided our design toward clean 1–3 column layouts. This ensured pages are stable, easy to maintain, and mirror consistently across English and Spanish versions, giving residents a seamless experience on desktop and mobile.
2. Deliver Timely Updates
Embedding the neighborhood newsletter on the homepage ensures residents get the information they need at a glance. This focused approach reduces manual work for board members while hitting the target of keeping neighbors informed about events, projects, and community news.
Design Process
From early research to a working prototype, each step shaped a clearer, more usable experience.
1. Auditing
I reviewed the existing site and ran a community survey to understand what neighbors needed most. This informed the primary persona guiding the redesign.
2. Prioritizing
Using a simple impact-vs-effort matrix, I identified the features that would meaningfully improve the experience—like donations, events, and board contacts.
3. Assembling
I built a lightweight design system in Figma—typography, color tokens, and reusable components—to keep the site consistent and easy for volunteers to maintain.
4. Prototyping
I built a desktop prototype to validate the design and demonstrate the full experience before translating it into Google Sites.
AUDITING
I reviewed the existing site and ran a community survey to understand what neighbors needed most. This informed the primary persona guiding the redesign.
PRIORITIZING
Using a simple impact-vs-effort matrix, I identified the features that would meaningfully improve the experience—like donations, events, and board contacts.
ASSEMBLING
I constructed a lightweight design system in Figma—typography, color tokens, and reusable components—to keep the site consistent and easy for volunteers to maintain.
PROTOTYPING
I built a desktop prototype to validate the design and demonstrate the full experience before translating it into Google Sites.
Using a simple impact-vs-effort matrix, I identified the features that would meaningfully improve the experience—like donations, events, and board contacts.
Using a simple impact-vs-effort matrix, I identified the features that would meaningfully improve the experience—like donations, events, and board contacts.
AUDITING
I reviewed the existing site and ran a community survey to understand what neighbors needed most. This informed the primary persona guiding the redesign.
Using a simple impact-vs-effort matrix, I identified the features that would meaningfully improve the experience—like donations, events, and board contacts.
Step 1
Step 2
Step 3
Step 4
Loading...
Final Figma Prototype
Loading...
Homepage Redesign Comparison
New Experience
I created a digital town square for community action, making it welcoming, informative, and easy for neighbors to get involved.
1. Welcoming UX Copywriting
I shaped the homepage to immediately reflect community values and connection. Warm language, friendly visuals, and a clear layout help residents feel welcomed, informed, and part of the neighborhood from the moment they arrive.
2. Information Architecture
I structured news, events, and resources so they’re effortless to scan and understand. Clean organization and consistent patterns reduce confusion, help residents stay current, and establish the site as a dependable source of information.
3. Participation User Flow
I clarified how to get involved by making calls-to-action obvious and navigation intuitive. Reduced friction helps neighbors volunteer, attend events, and join local efforts, turning engagement into a natural, inviting part of the experience.
Impact
Financial Barrier Removed
I fixed the broken donation flow and delivered a working PayPal setup, restoring reliable online giving and removing a major barrier for the organization.
Unified Direction & Roadmap
I established a clear design direction and provided a testable prototype, giving the board a shared vision and an actionable path for future development.
Accessibility Foundation Set
I implemented WCAG-aligned choices—contrast, typography, navigation, and bilingual structure—making the new experience more inclusive from the start.
Sustainable Design System
I built a lightweight design system that standardizes components and styles, ensuring volunteers can update content consistently without extra support.
Responsive
The layout works within Google Sites’ 12-column grid, using simple 1–3 column patterns that stack cleanly on mobile. Images follow preset sizes to prevent distortion, and sections use full-width or balanced thirds so nothing breaks when the layout shifts. This keeps navigation clear and core actions visible across devices.
Accessible
Because Google Sites ignores contrast rules in specific components, I used color-swatch images to enforce WCAG-compliant text contrast where the platform couldn’t. Buttons stay native for proper semantics, and all text remains outside images for readability. Breadcrumbs and mission-aligned navigation reinforce orientation, creating a clearer experience for every resident.
Consistent
A unified visual system keeps the site cohesive: consistent image dimensions, shared typography, and a simple palette that reads well across layouts. Google’s icon library provides scalable graphics the board can expand without outside help. Clear update guidance ensures the structure stays intact long after handoff.
Responsive & Accessible
Inclusive design that works with Google Sites—not against it.
"Hey Austen, thank you for this!" — Former SJNA Chair, in response to the new donation flow, which replaced a broken system with a reliable, user-friendly way for residents to support the neighborhood.
Reflections
The early focus on gathering user insights through surveys, interviews, and empathy mapping was essential to understanding what residents actually needed. Coordinating feedback from a volunteer board required patience, and the limitations of Google Sites meant building the entire structure with no-code tools. Even with these hurdles, centering the process on real user input kept the project grounded and purposeful.
Lessons
Building a lightweight design system early on created clarity and consistency within a zero-budget, no-code environment. I also took initiative to repair the broken donation flow so neighbors could reliably support the community. By using ChatGPT to refine messaging and tone, I produced polished, accessible content quickly, showing resourcefulness and adaptability under tight constraints.
Beyond
The donation page is fully functional, and the redesigned site now provides clearer communication and structured pathways for participation. I handed off the design to the board and am awaiting their approval to move it into production, and the Figma prototype allows residents to explore the refined flows and design improvements in action before launch.
Retrospective
More Projects
← Previous
You Grow Girl! Website Redesign
A speculative case study where we expanded their single-page website into a clearer, more engaging concept designed to better express their brand and support future growth.
Next →
Luminoso B2B Website Redesign
A solo redesign of Luminoso’s homepage that delivers a clearer, more user-focused B2B experience, making their AI-driven insights feel practical, approachable, and valuable.
Loading
.
.
.