John F. Kennedy Presidential Library: ‘The President’s Desk’ Interactive Exhibit
I was very fortunate to get the opportunity to work on this IBM Interactive grant project for the John F. Kennedy Presidential Library and Museum in Boston, MA. The purpose of this non-profit institution is “to advance the study and understanding of President Kennedy’s life and career and the times in which he lived; and to promote a greater appreciation of America’s political and cultural heritage, the process of governing, and the importance of public service.” Specifically our team was asked to collaborate with the directors and other top staff to create an educational, interactive web experience that enables and encourages citizens to explore the historical records and artifacts from this important and turbulent time in American history through which President Kennedy led our country. My role was Interactive Designer and Information Architect. It was my job to produce creative concepts for each object in the interface that visitors could interact with and design an immersive, captivating user experience.
‘The President’s Desk’ Interactive Exhibit
Check it outMedia Coverage of Interactive Exhibit
Public Reactions
My mom is a baby boomer and was in High School during the Kennedy Administration and I always wish I could have been around during that time too. This was such a great idea. This is unbelievably cool…. really the kind of stuff I’d like to work on, but I just don’t see it happening. There’s just so much in there that we could use. I think my favorite interaction is the campaign office with the file folders. The family albums are also incredibly detailed. Did you see the way the pages fold? Somebody did some pretty elaborate Flash work on that.
No other library comes close to being this awesome. http://microsites.jfklibrary.org/presidentsdesk/# @JFKLibrary
The President’s Desk is an awesome exhibit!! Couldn’t get enough…you feel like you’re there with President Kennedy!! I liked the phone, the photos, but enjoyed listening to Frank Sanatra’s campaign song for JFK!!
Definitely @mandyfatemi’s new obsession & even I think it’s incredible – @JFKLibrary’s ‘The President’s Desk’ http://bit.ly/i8w04X
This is seriously TOO cool! Thanks for posting, and kudos to the very talented creators! What fun! (JFK’s phone and Rolodex are my favorites so far…)
The @JFKLibrary’s President’s Desk site allows you to listen in on phone calls from the Kennedy administration. Amazing! http://bit.ly/eniy53
The Presidents Desk ..How can I put it in words. It was feeling and seeing what he saw. The tootling on paper . A man that had the love of the sea. The love of country….Thanks John Kennedy Library . Thanks Caroline for such a gift. of the President Desk.
Sharon Fawcett, head of all presidential libraries, was very impressed with the demos that I showed her the other day. You guys should be very proud.
The telephone was my favorite. I love the library its fantastic and you can learn something. I loved the Kennedys and I remember JFK.
The Project Story
The Challenge
The JFK Library has a wonderful archive of video and audio clips, scanned documents, photographs, and images of various artifacts from the Kennedy era. While it is exciting that they now have a large percentage of this content online, it is unfortunately difficult to browse for and there currently isn’t much of an interactive context for this content. At this point it is really just a basic search engine, so visitors have to know specifically what they are looking for. Sometimes the content is organized into galleries or collections which is helpful but visitors still would need to explicitly search for these artifact groupings.
Brainstorming and Inspirations for the Overall Design Concept
After a long, collaborative brainstorming session, we settled upon a desktop metaphor. Inspired by J.K. Rowlings website (the author of the Harry Potter series) and a promotional website for a video game called “The Dead Mountaineer Hotel”, among others, we decided to center our interactive web experience around the Resolute desk inside the Oval Office. Visitors would be able to click on various objects that sit on the desk in order to bring them to life. Through these objects, they can contextually and playfully explore relevant archive content from the Library.
Setting the Stage and Prioritizing Which Interactive Objects to Highlight on the President’s Desk
We started off with a photograph of the Resolute desk that was taken during Kennedy’s time in the White House. Through the magic of Photoshop, our amazing graphic designer managed to “clear” off the desk in the photo so that we could introduce only items that we wanted visitors to be able to interact with. This was based on a prioritized list of content and themes of the Kennedy presidency that the Library wanted to highlight and showcase.
Sketching Out the Interactive Concepts for Each Object
After deciding what objects we would place on the desk, we begin drawing paper sketches to determine how these objects should be physically laid out. From that point, I started to come up with a thematic and interactive concept for each object. We skteched out some initial drawings as we determined how each object might “come alive” once it was clicked on. The general idea is that each object would zoom up and morph into a rich, interactive scene in which users can explore and observe embedded JFK Library content, including audio, video, photographs, and scanned documents. The next several slides show examples of how I conceptualized some of these desk objects.
Animated Storyboards
I quickly realized that static wireframes and storyboards were not rich enough deliverables to fully and accurately communicate my interactive concepts for each object. Therefore, I decided to create rough-draft, animated movies to show how each desk object scene should ultimately be realized. After that, our graphic designer added her creative visual treatments to my concepts. Using my movies and her polished images, our Flash developer then developed the actual Flash component that would be integrated into the JFK Library website. My animated storyboard movies for 12 different interactive objects can be viewed in the following slides. Unfortunately, because of our short timeframe and limited budget, IBM was only able to develop 7 of these for the final exhibit, but the JFK Library team loved all of the concepts I came up with.
Green Phone
The Green Phone is used to present the many phone conversations that JFK had recorded during his presidency with various leaders and advisers. The buttons are reserved for featured recordings and the directory contains a comprehensive list of all phone recordings so that users can “dial” them and listen.
Secret Taping System Button
The Secret Taping System Button resides in front and just underneath the middle drawer of the desk. Clicking on the button causes a bank vault (safe) door to zoom into view. The vault door opens to reveal 5 shelves of audio reels and a reel-to-reel player consistent with that period (e.g. The Akai 4000 DS which came out in 1962). Each shelf represents one major theme of JFK’s presidential term. These 5 themes include the Cuban Missle Crisis, the Test Ban Treaty, Vietnam, Civil Rights, and Space Exploration. Clicking on a tape reel on one of the shelves causes it to slide off the shelf, load onto the reel-to-reel player and begin playing. A description of the selected recording is displayed on a faded, yellowing piece of typewriter paper that pops up.
Coconut
The Coconut represents JFK’s heroic PT-109 war story. When the coconut is clicked on, it zooms up from the desk and suddenly visitors are transported to an isolated island with a view of the sea and palm trees. The backdrop scene is first revealed in black and white and then bursts into color as ocean sounds start playing. A coconut materializes and falls from the top of the palm tree, striking an old radio, resting at the foot of the tree. This jars the radio on and causes it to start playing either the U.S. Navy Theme Song or Jimmy Dean’s “PT-109” song from 1962, where he patriotically recounts the fateful story and JFK’s brave actions. Meanwhile, a projection beam shoots out from the fallen coconut, which has now “magically” transformed into the coconut that sat on JFK’s desk. The projection beam displays a slideshow of photos (with text descriptions), ordered to pictorially tell the PT-109 story, as the music continues to play.
Scrimshaw (Whale’s Tooth)
The Scrimshaw (whale’s tooth) represents JFK’s love of the sea and sailing. The purpose of this object is to showcase many different collections of artifacts that demonstrate JFK’s intimate relationship with maritime activities from boyhood through adulthood. The scrimshaw zoom ups from the desk and morphs into a rolled-up, ancient map of Cape Cod. The map unrolls and reveals a number of different “destinations” that each represent a different artifact collection. JFK’s remarks at the Australian Ambassador’s dinner during the America Cup Races in September 1962 begin to play in the background. A model of JFK’s Victura sailboat materializes on the map, docked at the U.S.S. Constitution location. When a user clicks on a map “destination” (red x), the sailboat model travels to that spot, revealing the artifact collection at that location. The user can then browse through the collection and view descriptions of each artifact.
Daily Engagement Calendar
The Daily Engagement Calendar links to a White House Diary, revealing JFK’s daily appointment calendar.
Briefing Folders
The Briefing Folders represent many of the archived scanned documents that are related to JFK’s major domestic agenda and national security issues. When clicked on, the folders zoom up and position themselves at the bottom left and bottom right of the desk. The desk also zooms up close so that only the blotter/desk pad and paper clip/pencil holder are visible. 4 paperclipped packets of documents rise up from each folder. Each packet has an attached note with the title of the category printed on it (e.g. Vietnam, Civil Rights Crisis, etc.). Clicking on one of these packets causes it to zoom up and move to the center of the blotter/desk pad. The paperclip on the selected packet moves into one of the paper clip containers above and the note with the category label moves up to the center top (above the packet). Users can rollover the document packet to “navigate” the image and zoom in on particular sections of the artifact (similar to the product pages on Lee Jeans and Red Envelope websites). They can also click on the lower right of the document to “shuffle” through each of the documents in the packet. Clicking on a different document packet in one of the folders causes the paperclip and note with category label to re-attach to the previously selected packet which then returns to its original position in the folder, while the newly selected packet moves to the center of the desk.
Photo Frame
The Photo Frame represents photo collections of Jacqueline, the Children, the Kennedy Family, and the White House Restoration. When the frame is clicked on, it zooms up and cross-fades. Four albums slide into place, stacked on top of each other, but with all the titles visible. Clicking an album enlarges it and bring it to the center, while simultaneously pushing the other albums up to the top (organizing them into a row). Clicking on the selected album cover causes it to open up. Clicking on the lower corner of an album page causes the page to turn forward or backward, allowing the user to flip through the book. Clicking on a different album causes the current album to close and swap out with the newly selected album.
Books & Bookends
The Books & Bookends represent the 3 books that JFK wrote. When clicked on, the books zoom up very close and then flash fade to a typewriter sticking up from the bottom of the screen. Old typewriter sounds begin playing and as words quickly fill up the piece of paper currently in the typewriter. The completed page flies out from the typewriter and lands on top of a stack of presumably completed pages. This sequence repeats while the words “1940: Why England Slept” flash across the screen. As this text exits to the right, the cover page is typed and then flies on top of the manuscript stack. After the sequence completes for JFK’s other books that he authored, the typewriter moves fully onto the screen and situates itself in the bottom left corner, just bumping up against the first manuscript stack. This causes a chain reaction and the manuscripts magically transform into actual books. Clicking on a book causes it to drift down from the top row and enlarge. Meanwhile, the typewriter begins making typing sounds again, as it “types” up a short overview description of the selected book. Clicking on the selected book cover again causes it to open and reveal various excerpts from the book. The user can flip through the pages of excerpts. The user can also click on the typewriter to get a pop-up with some details about JFK’s Underwood Typewriter that he used early on, while he was in Congress.
Formal White House Invitation
The Formal White House Invitation represents the elegant White House dinners that John and Jacqueline Kennedy hosted for all sorts of honorary guests from around the world. When the Invitation is clicked on, it zooms and opens up to reveal a photo of one of the tables from their dinners, with all the fancy place settings, etc. The invitation card then zooms up even further, so that the photo inside takes up the whole screen. Then, there is a time flash (glittery transition) and the dinner scene “comes to life”. Ambient sounds of many people conversing and dishes and glasses clinking can now be heard. A “menu” materializes with 3 “meal courses” (image collections): Artifacts, Photos, and Gifts. When a collection is clicked on, the background dims and an authentic plate that the Kennedys used swoops up from the table with the first image of the collection resting on it. An authentic name placard with a description of the currently displayed image also appears in the lower right corner. Users can cycle through the images of the collection. When moving to the next or previous image, the entire plate slides horizontally off the screen as the new plate with the new image slides into the center (like courses in a meal).
Inaugural Medal
The Inaugural Medal “warps” the user back to the Inauguration Scene in front of the Capitol Building on January 20, 1961. A video of the oath and Inaugural Address begin playing. The transcript for this speech isprovided on a legal notepad object. Interesting facts and artifacts related to JFK’s Inauguration Ceremony pop-up on the side throughout the speech. Famous quotes scroll like the CNN ticker across the bottom after JFK speaks them.
Pen & Inkwell
The Pen represents the Test Ban Treaty signing. The Pen zooms up and “sketches” the outline of a television from the 1960s. JFK’s Presidential Address on the Test Ban Treaty begins playing on the television. The transcript for this speech is provided on a legal notepad. The user is also able to interact with a TV Guide in order to select additional related programs such as background videos about the Cold War. Selecting a program listing in the TV Guide causes the television to “change channels” and switch to the newly selected video.
Campaign Button
The Campaign Button represents JFK’s historical and extraordinarily close 1960 presidential campaign. The button zooms up from the desk and the screen “flies through” the center of the button, as we are transported into JFK’s Campaign Headquarters (presumably on November 9th, the day after the election). A picture of the Campaign Headquarters Replica in the JFK Library appears as the backdrop for the scene. Many artifacts are added to the scene such as the newspaper front page with a “Kennedy Wins” headline, an electoral map, photos, etc. A 1960s television and a stack of old-looking photos from the campaign trail materializes. The television can be controlled via a TV guide from November 1960 that pops up from behind the TV. Users can “channel surf” through a variety of campaign-related programs, including campaign commercials, election night news coverage, JFK’s DNC acceptance speech, JFK’s victory speech, Nixon’s concession speech, and the famous JFK vs. Nixon Debate. When the user clicks on a new video in the TV Guide, the dial on the TV rotates, as the channel changes to the selected programming.