Empire State Building 80th Floor
Observatory Experience

The Empire State Building Observatory is an ambitious three-phase redesign 3-year project that transformed the building’s queueing experience into a carefully choreographed journey, seamlessly linking creative digital elements with the building’s expansive history and current relevance in pop culture.

On the 80th floor of the Empire State Building, a number of diverse exhibits were created to enhance visitors’ experience. The exhibition was permanent at the Empire State Building and was designed to celebrate the diversity of the city, transporting viewers to different parts of New York.

Role: UI design, motion graphics
Exhibits

01. NYC: Above and Beyond
02. Heart of NYC Media Wall
03. Host Connection

2016-2019


 

Exhibit I.
NYC Above and Beyond

Roles: UI/UX Design
Tools: Adobe Ai/Ae, Sketch
Deliverables: Interactive Kiosks
Duration: 1.5 Months
Link:NYC Above and Beyond

OCT.2019-NOV.2019

I worked with Squint/Opera to improve the user experience and user interfaces of 5 interactive video blades on the 80th-floor observatory, which allows visitors to create customized itineraries to all five boroughs, a feature created in partnership with New York City tourism board NYC & Company.

Empire-State-80th-floor-Photo-by-Evan-Joseph-Empire-State-Realty-Trust-18.jpg

Exhibit Overview

The goal for this exhibit was to redesign the existing UI of 6 interactive kiosks, which allows visitors to create customized itineraries, and optimize the user experience, and ensure a more accessible interface for visitors of all ages.

 

UI Revision

The UI revision focuses on tackling three main problems: Height accessibility and legibility, Crowd page layout and unease UI transition, and Missing information and interaction

 

01. Improving heights accessibility and spacing for better legibility

整理3-03.png
 

02. Simplifying page layout and UI transition between pages

整理2-04.png

03. Fill missing information and adding key interaction.

整理3-11.png

04. Overall Comparison

— Original

整理-v3-14.png

— New

整理-v3-12.png

ADA Mode Design

The goal here was to provide visitors with one more option to ensure visitors of all ages and with and without disabilities could easily interact with the screen and access the information that they look for.

 
整理3-10.png
 
整理-v3-13.png

 

Exhibit II.
Heart of NYC Media Wall

Role: Video Editing, Animation
Tools: Adobe Ai/Ae/Pr
Deliverables: Animated Loop Video
Duration: 3 Weeks

OCT.2019 - NOV.2019

My role in this exhibit was to select and edit clips that best present the feature of each borough and add motion graphics accordingly to support the introduction to each borough.

 
Empire-State-80th-floor-Photo-by-Evan-Joseph-Empire-State-Realty-Trust-17 (1).jpg
 

Exhibit Overview

A Media Wall features imagery of destination highlights from all five boroughs of New York City with selected clips provided by NYC & co.

 

 

Exhibit III.
Host Connection Attractor

Role: UI revision, graphics design
Tools: Adobe Ai
Deliverables:
Interactive Kiosks
Duration: 3 Weeks

OCT.2019-NOV.2019

Squint/Opera interviewed eight Hosts and created an interactive for visitors to hear personal stories from these Hosts in 9 languages, but the original design was not as engaging as expected.

I was hired as a freelancer on this project to try a new type of attractor with more animation, to increase visitors’ engagement with these kiosks.

11.png

An exhibit called “Host Connections” is installed in the Empire State Building. There are 5 kiosks scattered around the exhibits, each one featuring a different Host, who is like a guide to the Empire State Building. Squint interviewed eight Hosts last year and created an interactive for visitors to hear personal stories from these Hosts in 9 languages.

UI Revision

The main problem with the original design was that it tells stories through only audio, but the environment where it sits was too noisy and with lots of passengers passing by. As a result, visitors demand more visual experiences to fully digest the stories.

The UI revision focuses on tackling two problems: Muted attractor and no context or visual hints.

01. Spice up the attractor

HostConnection-onsite-03.png
HostConnection-10.png
 

02. Bringing context and visual hint to the stories

HostConnection-onsite-05.png

03. Overall comparison

— Original

— New