Forest Hills Stadium Redesign
Overview:
Forest Hills Stadium is one of NYC’s most iconic live music venues, but its website created barriers for the people it serves. Information was difficult to find, navigation paths were inconsistent, and accessibility gaps made core tasks harder than they should be.
This project focused on redesigning the experience through accessibility-led product decisions: clearer information architecture (IA), stronger content hierarchy, and more inclusive interaction patterns across desktop, tablet, and mobile.
Tool(s) Used:
UX Metrics
Scope of Work:
User Research
Accessibility Audit
Responsive Design
Content Strategy
Wireframing
Prototyping
Team:
Chloe Dahan / Rosi Hristova
PROBLEM
Forest Hills Stadium welcomes thousands of visitors in person, but its digital experience did not reflect that inclusivity. Users had to work too hard to plan a visit, and some were blocked by accessibility failures before completing basic tasks.
The challenge was not just visual polish. It was structural: people could not reliably predict where to find critical information, and interaction patterns often failed accessibility expectations.
Have you ever visited a website and thought: "This website feels old or outdated?"
Text Heavy Screens from Forest Hills Stadium’s Current Website
This site felt outdated because it was overloaded and fragmented:
information scattered across pages
dense text without visual hierarchy
limited breathing room for scanning
accessibility issues hidden under surface-level design problems
ACCESSIBILITY AUDIT
Digital Barriers Identified
I conducted a focused accessibility audit to identify barriers affecting real tasks. While full engineering remediation was outside project scope, the audit gave us clear direction on what to prioritize in the redesign.
Key barriers
Keyboard Navigation Failure
Content Locked Behind Interactions
Insufficient Contrast
Missing Semantic Structure
Difficult Discoverability
These barriers impacted usability, trust, and task completion.
Identified Accessibility Issues and WCAG Criteria
Insufficient link color contrast on hover: WCAG 1.4.3 (Level AA), 1.4.11 (Level AA)
Text fields styled to resemble buttons: WCAG 1.3.1 (Level A), 3.2.4 (Level AA)
Focus visible failure (elements receive focus without a visual indicator): WCAG 2.4.7 (Level AA)
Linked images missing alternative text (e.g., header logos): WCAG 1.1.1 (Level A), 2.4.4 (Level A)
Low-quality or duplicate alternative text: WCAG 1.1.1 (Level A)
Document language not defined in HTML: WCAG 3.1.1 (Level A)
Text styled as headings without semantic markup: WCAG 1.3.1 (Level A), 2.4.1 (Level A), 2.4.6 (Level AA)
Adjacent links pointing to the same destination: WCAG 2.4.4 (Level A)
Missing H1 heading: WCAG 1.3.1 (Level A), 2.4.6 (Level AA)
No "Skip to main content" mechanism: WCAG 2.4.1 (Level A)
Navigation dropdowns inaccessible via keyboard: WCAG 2.1.1 (Level A)
FAQ accordions cannot be opened using a: WCAG 2.1.1 (Level A), 2.4.3 (Level A)
CONTENT STRATEGY
This project reframed accessibility as a structural content problem, not a checklist of isolated issues.
Users were not just encountering low-contrast links or weak focus states. They were struggling because information architecture and content distribution did not match how people actually plan a concert visit.
WebAIM WAVE Report
That led to our core question:
We mapped the existing ecosystem through a content inventory and sitemap analysis:
cataloged core content areas across the current site
removed duplicates to focus on unique content needs
grouped repetitive patterns into clearer categories
identified FAQ dependence and redistributed key information into relevant pages
Content Inventory Sheet
This process gave us a foundation for improving discoverability before moving into visual design.
USER RESEARCH
User Research to Avoid Assumptions and Meet Users’ Needs
Sitemap after Card Sort
USER TESTING
Testing our Proposed IA
Least Successful Task from Tree Test
Redesign: Lost & Found section linked on 'Contact Us' page
We flattened navigation to improve predictability and reduce cognitive load:
top-level sections became more visible and less nested
paths aligned more closely with user intent
structure better supported keyboard navigation patterns
Proposed IA (before user testing)
Revised Proposed IA (after user testing - flattened navigation)
Research confirmed that accessibility starts with structure:
predictable grouping
clearer labels
reduced hierarchy complexity
faster path to critical information
When the structure matches mental models, usability improves for everyone.
ACCESSIBILITY EVALUATION
How Accessibility Informed Design Decisions
During high-fidelity design, we prioritized visual clarity and interaction reliability across the website.
All primary navigation items were surfaced at a consistent level. This reduced complexity and made interaction behavior easier to understand.
Original: Navigation, with Venue navigation dropdown open
Redesign: Flattened global navigation
We redesigned links and state changes to be more distinguishable:
stronger color contrast aligned to WCAG targets
multi-signal states (not color only), including underline/styling support
Original: Inaccessible link contrast on hover
Redesign: Accessible link contrast on hover
We designed for semantic clarity and visual scanning together:
heading hierarchy mapped intentionally (H1/H2/H3)
forms and controls designed with clear labels
descriptive links replaced vague language
content chunking improved reading flow for all users
Original: FAQ page with key information buried inside accordions
Redesign : Key information decentralized from the FAQ, placed in meaningful sections
Visual Separation
Dense content was broken into scannable, structured sections:
meaningful section spacing
concise headings
grouped related information
lists instead of long text blocks where appropriate
Consistency and Predictability
Interaction consistency was treated as an accessibility requirement:
persistent navigation patterns
unified field/button behavior
similar page-to-page structure
DESIGN SYSTEM & BRANDING
I created a style guide and component system that made accessibility the default behavior:
Components designed against WCAG 2.1 A/AA expectations
The result strengthened both usability and brand cohesion.
Style Guide
Instead of feeling generic and fragmented, the redesigned system felt recognizable, modern, and inclusive.
Design System
WIREFRAME TO PROTOTYPE
We Started With Pen & Paper
Before high fidelity, we rapidly sketched multiple layout directions to explore structure and content flow quickly.
These early wireframes helped us align on hierarchy and task flow before investing in polished UI.
Users Validated the Direction
We ran a pilot to improve testing language, then tested revised low-fidelity flows with users.
Users completed tasks with less friction and reported that the structure felt intuitive and easy to navigate.
"I found things where I expected to find them."
-User 1
"I didn't have to think too hard about completing the tasks."
-User 2
Task Completion: 100% (vs. 58% with nested structure)
When we tested the low-fidelity prototype with users, they confirmed what the research suggested. The flattened, task-based structure worked intuitively. People navigated naturally. No one got lost.
Redesign: Home Lo-Fi
Redesign: Rules & Policies Lo-Fi
Redesign: About Us Lo-Fi
Redesign: Events Lo-Fi
The low-fidelity testing confirmed the same pattern found in research: a flatter, task-based structure reduced effort and confusion.
CREATING A RESPONSIVE EXPERIENCE
From Wireframes to Responsive Prototype
After validating structure, I translated patterns into responsive prototypes:
applied auto layout throughout pages/components
established desktop/tablet/mobile breakpoints
adjusted typography, spacing, and direction changes by screen size
standardized hero behavior for consistency across contexts
This made the experience more reliable and easier to scale in implementation.
Redesign: Breakpoints + Min/Max Height
Redesign: Responsive component versions
Redesign: Responsive Desktop/Tablet/Mobile Screens
WHAT CHANGED
Example Scenario: Planning to Attend a Concert
Before
Event discovery and planning details were fragmented
Users had to jump between pages to answer basic questions
Accessibility and parking information felt buried or inconsistent
Navigation complexity increased cognitive load
After
Event experiences prioritized clear information and actions
Planning-critical content surfaced earlier in the journey
Navigation became flatter and easier to predict
Users could plan attendance with less effort and more confidence
Redesign: Events Calendar View
Redesign: Events List View
Impact
Improved discoverability of core planning information
Reduced cognitive load through clearer structure
Stronger accessibility foundation in navigation and interaction patterns
Better alignment between user needs and business outcomes
KEY TAKEAWAYS
Beyond Compliance
Accessibility isn’t only about compliance; it’s a way of thinking and a lens that makes every experience better.
This project showed that when accessibility informs architecture, content strategy, and interaction design from the beginning, the result is more usable, inclusive, and effective for everyone.
For a public-facing cultural venue, an accessible digital experience is essential to serving the full community.
Designing for Participation
The central design question was:
How do we ensure everyone can participate?
By treating accessibility as a foundational design lens, we improved more than WCAG alignment. We improved clarity, confidence, and overall experience quality.
NEXT STEPS
What I'd Do Next
User Testing with Assistive Technology
Validate redesigned flows with screen reader users and keyboard-only users in realistic task scenarios.
Ongoing Accessibility Monitoring
Once launched, pair manual review with automated accessibility checks in the workflow to catch regressions early.
Analytics & Iteration
Track task completion and behavior metrics post-launch to identify further opportunities and prioritize iterative improvements.