Brooklyn Academy of Music Case Study

The 2024 redesign of the Brooklyn Academy of Music (BAM) website reflects a bold reimagining of its visual identity and user experience. Rooted in the dynamic and captivating essence of live performance, the project merges innovative interaction design with thoughtful organization to elevate the user's digital journey.

Role and Responsibilities

I served as the sole designer for this project, taking on the following responsibilities:

Developing a bold and cohesive visual identity for the website.
Designing and implementing improved navigation and interactive elements.

The Painpoints

Inconsistent Visual Identity
The old site lacked a cohesive design system, leading to a disjointed user experience and weak brand representation.

Confusing Navigation
Performance types (theatre, dance, music) were not clearly delineated, making it difficult for users to find relevant information quickly.

Static Design
The previous design lacked engagement or interactivity, failing to reflect the dynamic energy of BAM's performances.

“As the user moves the cursor, the typography reacts and "looks" toward the cursor's position, mirroring the way an audience is captivated by the action unfolding during a performance.”

The Solution

Dynamic Typography Interaction
Interactive motion design draws users into the digital space, reflecting BAM's captivating performances.

Enhanced Navigation
Categorized pages for performance types provide clarity and allow users to quickly find relevant events.

Cohesive Visual Identity
Modular grid structures, bold typography, and vibrant colors create a unified brand presence.

Wireframes

Next, I created low-fidelity wireframes for key web pages including home, theatre, dance, music, support, and about and members.

Visual Design

Modular Grid System
The grid-based layout organizes content intuitively, ensuring a clean and accessible visual hierarchy. This modular approach reflects the arrangement of theatre seats, reinforcing the connection to live performances.

Bold Color Palette
Vibrant and contrasting colors were selected to evoke the energy and drama of the stage.

Typography/Animation
Dynamic, modern typefaces convey sophistication while maintaining readability across all devices. The interactive typography reacts to cursor movements, enhancing the immersive experience and drawing parallels to audience focus during a live performance.