Boardwalk Empire: Interactive Viewers Guide
Overview
While at HBO, one of the projects I worked on was the “Boardwalk Empire” Season 3 Interactive Viewer’s Guide which was a desktop and iPad feature accessible to HBOGO members. The show was a period piece during the prohibition era that focused on the illegal production and distribution of alcohol in Atlantic City, New York City and Chicago. In the show, there is a lengthy list of characters tied to each region that had embedded relationships with other characters as well as additional subplots. The idea was to create a reference point to keep users up to date with the characters and the story plots.
My roles
User Experience
UI Design
The challenge
On the iPad, the challenge was to create a feature that the user can reference to about the show and the characters while watching the episode. Two other designers and myself were assigned to this project and with only two months allocated for it, we had to move fast and think of what were the important factors. The show’s main character, Nucky Thompson, is a crime boss and politician that controls every business (legal and illegal) in Atlantic City. In the show he develops a series of different subplot stories with his wife and several other characters. We decided to focus on the character bios, relationship ties and locations as the features of the app.
Flow for user accessing the Interactive Viewer’s Guide
Wireframe flow 1: Navigating from homepage
Because this app was enabled for the user while they watched an episode, the focus area was at the bottom part of the screen. The homepage would start off with the three major characters and their corresponding cities. So if the user wanted to see the characters in Atlantic City, they would just click on Nucky Thompson’s character which would navigate them to a portion of a map that displayed the city of Atlantic City and the characters there. On any particular city, the user could also pan around to other cities and view the characters there without having to navigate back to the homepage.
Wireframe flow 2: User wants to access character bio page from map
While on the map, if the user wanted to get information about a particular character, they could click on their photo and the information would display in either a small card or large focus panel. When the modal is displayed, the episode pauses until the user clicks out and then the episode resumes.
Inspiration for UI
We did a lot of design exploration from the “Roaring ‘20’s” time era and we wanted to implement elements of design from that period. I’m a big fan of A.M. Cassandre’s design (see below in “L’Amerique Du Sud”) and wanted to reflect the art deco feel of the period in the UI for the map and character profile cards to coincide with the elements and feel of the show.
