World-Class Venue, Outdated Website
Forest Hills Stadium Redesign
Tags:
UX/UI Design | Accessibility Research
Year:
2025
While Forest Hills Stadium delivers a world-class venue experience, its website tells a different story. From confusing information architecture to text-heavy pages and accessibility issues, there’s an opportunity to improve the website’s usability and brand identity.
The Problem
For a venue that accommodates so many people physically, they should be able to do the same digitally.
Forest Hills Stadium has been a New York City landmark since 1923. It holds thousands of people, and offers accessible spaces and accommodations (e.g., accessible seating, sign language interpreters, and accessible restrooms). People from all backgrounds can come together here to experience concerts and community.
But their website says otherwise.
Tool(s) Used:
UX Metrics
Have you ever visited a website and thought: "This website feels old or outdated?"
When we first visited their website, it felt outdated and disconnected from Forest Hills Stadium's brand. In the venue's other digital presences, like social media, they portray a strong sense of community, prominent branding, and display visitor engagement through their profile.
Designed with information scattered across pages, text-heavy pages, and no visual breathing room, Forest Hills Stadium's website feels less modern and engaging. But when I started digging deeper and audited the site for accessibility, I found the barriers weren't just visual…
Digital Barriers Identified
If their website is inaccessible and difficult to navigate, barriers to accessing essential information are created, excluding potential audiences from cultural experiences and causing user frustration. It directly impacts Forest Hills Stadium’s ability to serve the community.
Keyboard Navigation Failure
Content Locked Behind Interactions
Insufficient Contrast
Missing Semantic Structure
Difficult Discoverability
Accessibility Audit Results
To get a better picture of the overall accessibility, I conducted a small-scale accessibility audit. While remediating many of the issues was out of the scope of the project, identifying major accessibility failures helped inform the direction and priorities of the redesign
Identified Accessibility Issue & WCAG Success Criterion (Level)
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)
The website was actively preventing people from accessing information they needed to attend the venue easily and comfortably.
Accessibility isn’t separate from content strategy. It is content strategy. What I realized from this audit is that these aren't separate accessibility problems; they're structural problems. The website wasn't organized for how people actually think about attending a concert. It was organized in whatever way made internal sense, without considering the diverse needs and mental models of the people trying to use it.
And that became the starting point for this project:
How do we design a website that actually serves visitors through usability and inclusive design?
We made a sitemap to visualize the site and created an organized content audit inventory in a sheet based on the original web pages. Because there was overlap between content items, we only included one instance of each content item. Using this list, we grouped some repetitive items into single instances of the content for clarity (e.g., 'Upcoming events carousel + Upcoming events cards' → 'Upcoming events'). We included broader themes of the content from the FAQ as cards in the hope of being able to redistribute the information, decentralizing it from just a catch-all FAQ section.
To become subject matter experts, we took inventory of all sections of the Forest Hills Stadium website. I also researched the venue further to gain a deeper understanding of its historical relevance and more context before moving into the redesign.
User Research to Avoid Assumptions and Meet Users’ Needs
Sitemap after Card Sort
After seeing how many cards were broadly related to visiting the venue, we decided to consolidate those under a ‘Visit’ tab to make them all accessible from one section.
We also changed the names of a few content items in response to comments about potential confusion. We then finalized our initial IA in a way we felt was logical, focusing on content relation and user feedback. The revised IA was then used as the basis for our tree test.
Testing our Proposed IA
Least Successful Task from Tree Test
Redesign: Lost & Found section on “Stadium Information” page
Redesign: Lost & Found section linked to on “Contact Us” page
We found that content got hidden in sub navigation, which is what we wanted to avoid entirely → so we redistributed content sections to have a flat navigation.
Based on these findings, we reduced hidden sub-navigation and moved to a flatter structure. Content previously grouped under Visit was redistributed, with Stadium Information and Getting to the Stadium promoted to the main navigation.
Because the site’s complexity is lower, and we aren’t working with extensive content, flat navigation seemed like a good approach based on our tree test and providing the users access to all sections immediately.
What Users Taught Us About Accessibility
Conducting user research, testing, and learning more about user expectations helped us re-evaluate the first version of our revised IA.
This helped us create a blueprint for a successful redesign, one that will meet the needs of website visitors and potential visitors.
Research insight revealed how users think. It showed us the mental model that makes the most sense, the structure that requires the least cognitive effort. When you design for that, everyone benefits.
Accessibility isn't primarily about colors, contrast, or alt text, though those things matter. Accessibility should inform the structure from the start. When you ask:
How is this information organized?
Does it work for people with different needs?
Does the structure match how people actually think?
....you solve accessibility problems at the foundation.
How Accessibility Informed Design Decisions
When moving into the design phase, we prioritized visual clarity and accessibility best practices.
All main navigation items are visible at the same level. With less complexity and easier implementation of focus states, navigating the site becomes simpler and more predictable.
Original: Navigation, with Venue navigation dropdown open
Redesign: Flattened global navigation
Users with low vision will have a harder time identifying what they're about to click when hovering on links on the original version of the site due to low contrast.
We aimed to:
Resolve all contrast issues
Improve color contrast to meet WCAG AA standards
Use multiple indicators (color + underline, color + styling)
Color isn't the only way to communicate a state
Original: Link
Redesign: Link
Original: Inaccessible link contrast on hover
Redesign: Accessible link contrast on hover
Text is styled as headings but not marked as headings in HTML. On the homepage, there is no H1 present as well, making it difficult for screen readers to understand the document structure.
We aimed to include:
Proper heading hierarchy (H1, H2, H3) with styles and consistent sizing in the style guide
Form fields with associated labels
Descriptive link text
Proper semantic structure also helps sighted users. When you scan a page visually, you're using headings to understand organization.
Original: Homepage (top-half)
Redesign : Homepage (top-half)
Original: Homepage (bottom-half)
Redesign : Homepage (bottom-half)
Other Accessible Design Practices
Visual Separation
Dense, unbroken text increases cognitive load and makes content difficult to scan. Clear visual separation helps users focus, understand hierarchy, and move through content comfortably.
Section breaks and spacing, Meaningful headings throughout, White space and breathing room, Bulleted lists instead of dense paragraphs, Related content grouped together
Dense, unbroken text increases cognitive load and makes content difficult to scan. Clear visual separation helps users focus, understand hierarchy, and move through content comfortably.
Same primary navigation on every page, Consistent footer structure, Unified button styles and form fields, Predictable interactions site-wide
I created a style guide, which helped form the design system we maintained for the redesign. I aimed to embed accessibility into the design system, along with the style guide. I ensured components that followed WCAG 2.1 A/AA rules. The style guide and design system helped us build more prominent branding.
When accessibility is built into the system, it becomes the default.
Properly labeled form fields and buttons
Creating a style guide improved branding and consistency for a website that felt disconnected, generic, and outdated.
We Started With Pen & Paper
Before moving into any fidelity level, we rapidly produced drawn-out wireframes to brainstorm.
This gave us a starting point before moving into the low-fidelity prototypes.
Users Validated the Approach
From testing the low-fidelity prototype with users. We conducted a pilot study to confirm our protocol. The pilot study allowed us to discover confusing language in the tasks. Once revised, we tested the low-fidelity prototype with two users. When testing the lo-fidelity protocol with the revised protocol, both users had ease navigating the site and completing tasks.
"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: About Us Lo-Fi
Redesign: Home Lo-Fi
Redesign: Rules & Policies Lo-Fi
Redesign: Events Lo-Fi
From Wireframes to Responsive Prototype
Once we drafted the wireframes using pen and paper, created low-fidelity prototypes, tested them, and developed the high-fidelity prototypes, I added auto-layout to every component and element, making every page responsive.
After identifying breakpoints for desktop, tablet, and mobile, I duplicated the screens and set minimum and maximum widths for each screen and adjusted font size, padding, and auto layout direction. For the hero component, I created a standardized height for each screen size.
Redesign: Breakpoints + Min/Max Height
Redesign: Responsive component versions
Redesign: Responsive Desktop/Tablet/Mobile Screens
Example Scenario: Planning to Attend a Concert
Before
Event cards only show Tickets, not event details
Event pages provide minimal information
Accessibility and parking info is scattered and dense
Users leave the site or call the venue out of frustration
After
Clear events list-view and calendar-view with visible event information
One click to complete, event-specific details
Stadium Information surfaces accessibility and parking immediately
Users can plan confidently and independently
Redesign: Events Calendar View
Redesign: Events List View
Why It Matters
These might seem like small differences, but it's the difference between someone being able to participate and choosing not to because the barriers are too high. Additionally, it leads to increased usability and decreased frustration. More importantly, every user (regardless of ability) has a clearer, simpler, more intuitive experience.
Beyond Compliance
Accessibility isn’t only about compliance; it’s a way of thinking and a lens that makes every experience better.
When websites are not accessible to users, overall usability is affected. Websites should evolve to meet the needs of the community they serve. When a venue of Forest Hills Stadium’s caliber is not providing an accessible experience, it’s not only bad for business but also excludes and marginalizes a significant portion of its audience.
As Forest Hills Stadium continues to serve the city, a modern, accessible digital presence is essential to ensuring that the community stays connected.
Redesigning with Accessibility Prioritized for a Successful Redesign
Accessibility is a way of asking:
How do we design so everyone can participate?
Who might we be excluding?
Especially when designing for a public outdoor music and event venue.
When I asked that question about Forest Hills Stadium, I didn't just find compliance violations. I found structural problems. And fixing them didn't just make the site technically accessible. It made it fundamentally better. Simpler. Clearer. More intuitive.
Design should ask those questions from the start, not add accessibility later. When we redesigned Forest Hills Stadium’s website, we focused on proactive accessibility rather than reactive remediation.
What I'd Do Next
User Testing with Assistive Technology
Conduct usability testing with screen reader users and keyboard-only users to validate accessibility improvements in real-world scenarios.
Ongoing Accessibility Monitoring
Establish automated accessibility testing in the development workflow and schedule regular manual audits to catch issues before they reach users.
Analytics & Iteration
Track user behavior, task completion rates, and accessibility-specific metrics to identify areas for continued improvement.