About Colorado Connect

1. Research. We reviewed public pages from the City of Aurora, Aurora Public Library, Aurora Community Connection, ForAurora, Aurora Housing Authority, 2-1-1 Colorado, and Colorado Crisis Services to see how residents currently find help.
2. User needs. We wrote three primary user flows: a parent who needs groceries this week, a renter who received a late notice, and a student looking for volunteer hours.
3. Card sorting. We listed every service we found on cards and grouped them until six stable top-level needs emerged: Food, Housing, Health & Crisis, Youth & Family, Jobs & Education, and City Services.
4. Wireframe to UI. Low-fidelity sketches tested two patterns: a long single-scroll page and a directory with filters. The directory won because it supports deep links such as a shared "Food in Aurora" result set.
5. Content review. Every listing was rewritten in plain language at an easy reading level, then tagged with a source citation.

The information architecture is one hub with five content types in a single directory — organizations, programs, services, events, and resources — rather than five separate mini-sites. Navigation is task-based (Find Resources, Events, Get Involved) and faceted filters handle the rest: category, cost, audience, and type.

The header search writes a query string to the directory route, so a search result is a shareable URL and search behavior survives a page reload. Detail pages follow one consistent template: who it helps, what you can get, hours and contact, how to start, related resources, and the source.

• Color. Navy communicates civic trust, teal marks interactive elements, and gold is reserved for urgency and emphasis. The snow background reduces glare compared with pure white. All text pairings were checked for a 4.5:1 minimum contrast ratio.
• Type. Fraunces gives headings a warm, public-interest voice; Source Sans 3 keeps body copy and UI highly legible at 16px and up with a clear heading hierarchy.
• Emergency bar. 911, 988, 2-1-1, and Access Aurora appear on every page in persistent navy with gold accents, so crisis routing is never more than one glance away and is visually separate from the browsing experience.
• Filters. Filters are progressive enhancement over a complete list: the full directory renders first, and filtering narrows it client-side with a live result count announced to screen readers.
• Mobile-first. Layouts start as a single column with large tap targets, then expand at tablet and desktop responsive breakpoints on an 8px spacing scale inside a 1120px max-width container.

• Semantic HTML landmarks: one header, one main, one footer, and labeled navigation.
• A skip-to-main-content link as the first focusable element.
• Visible focus outlines on every interactive element, never removed.
• Text-size control (100% / 112.5% / 125%) and a high-contrast mode, both remembered between visits.
• Tap targets at least 44px tall, and 16px or larger body text.
• Form fields with real labels, inline error text, and aria-invalid state — not color alone.
• Live result counts announced with aria-live, and expandable event details wired with aria-expanded.
• Color contrast targeted at WCAG 2.1 AA (4.5:1 for text, 3:1 for large text and UI borders).

Tested at three widths: 375px (mobile), 768px (tablet), and 1280px and up (desktop). The site works in current Chrome, Edge, Safari, and Firefox. Interactive features degrade gracefully: all content is readable without JavaScript, and the directory still lists every resource.

If a city or nonprofit partnership launched this hub, we would report on these indicators each month and tie them to Core Web Vitals and accessibility audits.

Methods: moderated usability testing with five residents per round, task timing, funnel analysis of the search-to-detail user flow, and quarterly content re-verification.

Listing details were drawn from these public sources and re-checked before publishing.

• City of Aurora — resident, youth, and library pages — www.auroragov.org
• ForAurora — Marketplace food bank — www.foraurora.org
• Aurora Community Connection — family resource center — auroracommunityconnection.org
• Aurora Housing Authority / Aurora@Home — www.aurorahousing.org
• 2-1-1 Colorado — www.211colorado.org
• Colorado Crisis Services / 988 — coloradocrisisservices.org

Colorado Connect is a student-designed information hub created for an FBLA competition. It is a proposed design for a community partnership, not an official city product. Always verify hours and eligibility with the organization. Call 911 in an emergency.