A community site has to welcome people and help them move forward.
Challenge
Many audiences, very different moments of need.
Visitors might arrive to find support, attend an event, locate an affirming resource, volunteer, donate, or simply understand the organization.
Team
Bonita Binford, Christian Flores, Jen Sly, Juan Munoz.
The source deck documents a collaborative design sprint. The research artifacts and major prototype decisions belong to that shared team effort.
My contribution
From sprint decisions to a responsive coded demo.
I contributed to content and navigation analysis, information architecture, interface direction, and prototype decisions, then translated the direction into the navigable website shown here.
Shared goalWelcome people emotionally while giving them practical, accessible paths to help.
Process overview
A focused process for clarity and a real implementation.
01
Understand
Reviewed audiences, needs, existing content, and the reasons people visit.
02
Structure
Audited navigation and grouped resources, events, support, and giving into clearer pathways.
03
Design
Created wireframes, patterns, and visual directions balancing warmth with readability.
04
Develop
Implemented the responsive multi-page experience and checked route and interaction behavior.
Current experience audit
The original experience asked visitors to interpret the organization’s structure.
The team’s evaluation pointed to a hierarchy problem, not just a visual one. Repeated categories and competing calls to action made it harder to understand what to do next.
A large, pixelated jumbotron competed with events, resources, and other task-oriented content.
02 · Grouping
Related content was dispersed.
Mission, team, organizational information, and repeated imagery could be consolidated into clearer groups.
03 · Navigation
Options competed for attention.
Visitors had to parse overlapping categories instead of selecting a direct, goal-oriented path.
04 · States
Unclear labels weakened confidence.
Incomplete or ambiguous states—such as an “Error” label for future registration—needed more useful language.
Audience synthesis
Designing for people seeking belonging, information, and a clear next step.
Ashley represents a visitor looking for local events, volunteering, affirming resources, and community—while navigating with uncertainty about where to begin.
Primary persona · Ashley Johnson · extracted from M17 Stonewall Columbus (1).pptx
Goal
Find community, events, and ways to contribute.
Emotional context
Excited to connect, but unsure where to start.
Barrier
Too many options make priorities difficult to read.
Design implication
Organize the experience around visitor intent.
User expectations
The evidence converged on clarity, community, and context.
Participants valued events, resources, inclusive imagery, and a clear donation path. They wished for a more polished, less-cluttered interface with stronger community signals.
I like / I wish / I wonder board · direct FigJam export supplied by Juan Munoz
Journey
The journey moved from uncertainty toward connection and action.
Ashley begins with two concrete intentions—find events and support an organization—but the number and prominence of options create friction before she can act.
Find a local event and an organization worth supporting.
SearchFriction
Options feel broad before a clear path becomes visible.
EvaluateNeed
See useful context without donation prompts taking over.
ActOpportunity
Connect events, resources, and support through predictable pathways.
Diverge → converge
The sprint narrowed a broad redesign into a few high-impact decisions.
Explored
Many possible changes
Community features, event visibility, donation context, imagery, search, typography, color, and page hierarchy.
Prioritized
Five interface levers
Navigation bar and hierarchy
Donation pathway
Image treatment
Color and typography
Homepage content order
Carried forward
Clearer visitor-oriented pathways
The coded build separates About, Resources, Events, Support, Contact, and Donate into visible, repeatable routes.
Information architecture
Navigation shifted from organizational categories to visitor intent.
The redesigned structure grouped institutional content under About, practical help under Resources, and participation under Support. Search remained a utility for visitors who already knew what they needed.
UtilitySearch
About
Team / Mission
Pride
Contact
Resources
Calendar
Programs
Wellness
Resource Center
Career
Support
Donate
Become a Member
Volunteer
Shop
About
Organization, mission, Pride, and contact context.
Resources
Practical help grouped into recognizable categories.
Support
Giving, membership, volunteering, and participation.
Wireframes + navigation
Structure came before visual expression.
Navigation concepts and task flows tested the relationship between top-level groups, expandable menus, search, and donation before the high-fidelity styling was applied.
Navigation exploration · focused menu states
Mid-fidelity task flow
Mobile page and task progression
Proposed A/B test
One question remained open: how should events attract attention?
The team proposed comparing a square card presentation with a horizontal event treatment to study visual hierarchy and interaction. The supplied sources contain the plan and variants, but no test results.
Variant A · Square event-card direction
Variant B · Horizontal event direction
Hypothesis
A square event-card layout may create stronger visual hierarchy and make events easier to notice than a horizontal treatment.
What would be measured
Event discovery, comprehension, interaction, and engagement with event details.
Status
Proposed test. No validated result is available.
Visual direction
Warmth and visibility became part of the navigation system.
The sprint style guide established Stonewall’s purple, lavender, orange, and white palette alongside Open Sans, Nunito, and a set of rounded action styles.
Original sprint direction
Sprint visual direction · clean source export
Final coded system
#221044#4C2788#F6A13A#F3EAF8
More restrained hierarchy. Clearer action states.
The coded demo carries forward the warm identity while using consistent cards, semantic page structure, repeated CTA styles, and responsive layouts across distinct routes.
Prototype direction
Prototype decisions established the visual language.
This historical Figma artifact records the design-stage direction. Final product evidence below comes directly from the live coded website.
Historical Figma prototype · design evidence, not the coded final product
Built experience
One visual system across events, resources, and support.
The final evidence comes from the current coded demonstration: real routes, working navigation, responsive content, and a simulated donation flow.
01 · Upcoming events
Upcoming events became easier to scan and explore.
The events route uses scannable dates, event types, times, and locations while keeping resource and contact pathways nearby.
Events route · coded event discovery and filtering
02 · Find support that fits
Resources were organized around the kind of support people needed.
Resource cards use descriptive labels and dedicated routes for trans resources, wellness, support groups, and family planning.
Resources · coded support categories
03 · Community pathways
Different forms of participation became visible without competing.
Donating, volunteering, partnering, and attending events are presented as distinct, equally legible ways to participate.
Community pathways · support options
04 · Donation flow
A clearly labeled simulated donation flow.
The coded demonstration shows the donation path and form states while clearly identifying the experience as a prototype rather than production payment infrastructure.
Donation prototype · readable disclosure, form, and summary
05 · Responsive navigation
Navigation stays direct from desktop to mobile.
Desktop links collapse into a clear mobile menu without changing the visitor-oriented information model.
Desktop navigationOpened mobile menu
Responsive implementation
Designed as a system. Built as a responsive website.
Fresh captures of the coded homepage show the same hierarchy adapting across desktop and mobile without placing one device inside another.
Navigation collapses, grids stack, controls widen, and imagery scales without clipping.
Reusable patterns
Headers, cards, CTAs, breadcrumbs, newsletter blocks, and footers repeat across the demonstration.
Coded demonstration
The multi-page experience is published and linked directly from this case study.
Accessibility considerations
Emotional clarity depends on practical clarity.
The implementation includes a skip link, semantic headings, descriptive image alt text, labeled forms, meaningful link text, responsive type, visible focus treatment, and tap-friendly controls.
Keyboard-visible navigation and action states
Responsive content order and readable text sizing
Descriptive labels for routes, events, and resources
Donation flow identified as simulated
This is not a claim of full accessibility. Assistive-technology testing, contrast review across every state, and validation with community members remain necessary.
Outcome + reflection
Organized around what people came to do.
The project produced a clearer visitor-oriented navigation model, a more cohesive visual language, connected pathways across resources, events, support, and giving, and a responsive coded demonstration.
What I learned
Community UX must carry two kinds of clarity at once: emotional reassurance and practical direction. Translating the prototype into a multi-page build exposed responsive, content, and routing decisions that a static frame could not.
What should be validated next
Run the proposed events-layout comparison
Test navigation and terminology with community members
Evaluate key routes with assistive technology
Validate support and donation pathways
Replace representative content with approved organization content
