BROOKLYN BOTANIC GARDEN (BBG)

A conceptual redesign of the BBG website created through gathering data from visitors to the garden. Full case study below.

Areas
UX research, heuristic analysis, interaction design, UI, accessibility

Platform
Responsive Web

Duration
4 weeks

My Role
UX/UI Designer — conducted a heuristic evaluation of the original site, identified usability and accessibility issues, and led the redesign of navigation, layout, and content hierarchy.

  • Applied Nielsen’s 10 usability heuristics to assess site effectiveness

  • Proposed and validated a streamlined navigation system

  • Created wireframes and redesigned key sections with accessibility in mind

Overview
I aimed to improve navigation and to create a cleaner visual design to make key visitor information easier to find.

This case study outlines my approach: conducting a heuristic evaluation, mapping content priorities, and redesigning key sections to better serve BBG’s users.

The Team
Solo designer with peer critique.

Collaborated with a small group for heuristic review feedback and design critique sessions to ensure solutions were user-centered.

The Challenge

Through research gathered through the research and discovery phase, the key pain points were that the original Brooklyn Botanic Garden website made it difficult for visitors to find critical information like hours, tickets, and events.

Pain Points

  • Clunky, confusing dropdown navigation

  • Crowded homepage with poor hierarchy

  • Hidden visiting information

  • Clunky carousel with weak CTAs

  • Accessibility gaps (contrast, missing alt text)

  • Underutilized blog section

  • Disorganized footer

Design Goals

  • Replaced with a persistent sidebar navigation that is always visible and labeled clearly

  • Introduced a clean, grid-based layout with clear white space and grouped content

  • Surfaced hours, ticket prices, and map link in hero section

  • Redesigned carousel with large arrows and clear “Learn More” button

  • Added alt text, improved contrast, and clear focus states

  • Redesigned “Plants & Gardens Blog” with larger images and simplified layout

  • Streamlined footer into clear sections

Expected Impact

  • Reduced clicks to key pages and improved wayfinding

  • Faster scanning and reduced cognitive load

  • Visitors see essential info immediately

  • Increased click-through to featured events

  • Improved inclusivity and compliance with WCAG AA

  • Encourages exploration and increases dwell time

  • Easier access to secondary resources

Research & Discovery

Heuristic Audit

I evaluated the existing site using Nielsen’s 10 usability heuristics. Key issues included inconsistent navigation, overcrowded content sections, ambiguous CTAs, and lack of mobile responsiveness.

User Interviews

To understand key user needs, I conducted 10 interviews with users:

  • Visitors unfamiliar with BBG (seeking event schedules & ticket info)

  • Local visitors/gardeners wanting plant information & garden maps

  • Students or educators seeking learning resources or programs

  • People with visual or mobility impairments needing accessible features

Key Insights

  • Many website visitors struggled to find event/program schedules; often the information was buried in sub-menus

  • The image carousels or sliders didn’t clearly convey calls to action; people didn’t know which parts were clickable

  • Users with accessibility concerns noted poor contrast in text overlays, small clickable areas, and missing alt-text

Impact on Design

These findings drove the redesign approach to streamline navigation, declutter the interface, and prioritize accessibility.

Ideation & Wireframes

I translated research findings into a new site structure and layout, focusing on solving the key navigation and hierarchy issues uncovered in the heuristic analysis

  • Navigation: Explored sidebar vs. mega-menu options and validated with quick tree-tests to ensure users could find hours, tickets, and events faster

  • Layout: Shifted to a grid-based layout to introduce hierarchy, breathing room, and logical grouping of content

  • Content Priority: Mapped visitor needs so that hours, ticket prices, and garden map links would always appear at the top of the homepage

Key Improvements

Original

Cluttered layout, buried hours/tickets, confusing navigation.

Redesign

Modern grid layout, sidebar navigation, surfaced essentials.

Pain points

  • Confusing header navigation

  • Overcrowded homepage

  • Hidden visiting info

  • Clunky carousel

  • Poor accessibility

Design solution

  • Replaced dropdown with a persistent sidebar navigation

  • Introduced grid-based layout with clear white space

  • Moved hours, ticket prices, and map link to hero section

  • Rebuilt carousel with large arrows + clear call-to-action

  • Added alt text, improved color contrast, clarified CTAs

Results & Impact

  • Navigation clicks reduced: prototype testing revealed that many users were able to locate events/ticket info in 2 clicks instead of 4

  • Engagement improved: redesigned hero section & blog layout saw higher dwell time in usability prototype – users more inclined to scroll into content

  • Accessibility wins: all main action buttons now meet WCAG AA contrast standards; images now have descriptive alt attributes; design tested on mobile + desktop

  • Prioritizing content hierarchy (what visitors need first) made the largest usability improvement

  • Early user feedback (mockups) exposed ambiguous navigation labels, and changing labels early avoided bigger revisions

  • Would improve further by running moderated usability tests with people with disabilities, testing multi-device interactions, and refining the site map with real analytics data

Reflection