The Jewish Museum NYC mobile app

Overview

The Jewish Museum NYC Mobile Tour Application is a digital companion designed to enhance the on-site experience for museum visitors.

I led front-end development of the Jewish Museum NYC Mobile Tour Application while serving as Associate Technical Architect at Code and Theory.

Project Goals

• Enhance Visitor Engagement: Create a dynamic mobile tour that keeps users anchored in the moment while providing deeper insights into the artworks.
• Flexible Content Architecture: Enable museum staff to easily manage and evolve content over time.
• Data-Driven Insights: Capture visitor behavior to inform future improvements.
• Mission-Driven Design: Express the museum’s mission and Jewish identity through thoughtful UX and content.

Technical Architecture

Technology Stack

• Frontend: Angular Single Page Application (SPA)
• Content Management: Contentful (Headless CMS)
• API: RESTful integration for content delivery
• Localization: Multi-language support via i18n JSON files
• UI/UX: Custom SCSS, Flickity for interactive carousels, SVG icons for accessibility

Key Features

• Interactive Museum Map: Users can navigate floors, view features (exhibits, shops, restrooms), and access audio tours.
• Audio Tour Integration: Rich audio content tied to specific artworks and exhibitions, with intuitive navigation and playback.
• Dynamic Content: All content (artworks, tours, features) is managed via Contentful, allowing for real-time updates and COPA (Create Once Publish Anywhere) flexibility.
• Accessibility: Right-to-left language support, clear navigation, and responsive design ensure usability for all visitors.
• Analytics: Integrated services capture user interactions for ongoing optimization.

Design Approach

• Minimal & Intuitive IA: The information architecture is streamlined to keep users focused on the artworks and their stories.
• Motion & Feedback: Subtle animations and transitions clarify UI moments and enhance the audio tour experience.
• Consistent Experience: Whether on-site or remote, users enjoy a unified interface and content structure.

Impact

• Richer In-Person Connections: Visitors engage more deeply with the museum’s collection, guided by contextual digital content.
• Seamless Exploration: The app encourages exploration, grounding users in the museum’s mission and identity.
• Scalable & Maintainable: The headless CMS approach empowers museum staff to evolve the experience without developer intervention.

Sample Code Highlights

Angular Map Screen Component

@Component({
  selector: 'app-map-screen',
  templateUrl: './map-screen.component.html',
  styleUrls: ['./map-screen.component.scss'],
})
export class MapScreenComponent implements OnInit {
  mapContent: Entry<any>[];
  sliderItems = [];
  flickityOptions = {
    /* ...carousel config... */
  };

  ngAfterViewInit() {
    // RTL support for locales
    if (this.locale.getLocaleDirection(this.locale.currentLocale) === 'rtl') {
      this.flickityOptions.rightToLeft = true;
      this.flickityOptions.cellAlign = 'right';
    }
    this.flickityContainer = new Flickity(
      '.museum-map-screen__floor-flickety-container',
      this.flickityOptions
    );
  }

  selectFloor(activeIndex) {
    this.flickityContainer.select(activeIndex, false, false);
    this.updateActiveFloorBtn(activeIndex);
  }
}

Internationalization Example

"MAP": {
  "VIEW_TOUR": "View Audio Tour",
  "ONGOING": "Ongoing",
  "SHOP": "Shop",
  "RESTROOMS": "Restrooms",
  "FLOOR": "Floor"
}

Conclusion

The Jewish Museum NYC Mobile Tour Application exemplifies how thoughtful digital design can amplify cultural experiences. By leveraging modern web technologies, a headless CMS, and a user-centered approach, the app delivers a flexible, engaging, and mission-driven companion for museum visitors.

Live app

The Angular application is available at https://tours.thejewishmuseum.org (now offline)

Full Case Study

Visit codeandtheory.com at https://www.codeandtheory.com/things-we-make/the-jewish-museum