The Kennedy Center

Creating better user experiences through technology for the busiest performing arts facility in the United States

For The Kennedy Center in Washington, DC I worked as a part-time Interaction Designer & Front End Developer from 2011 to 2013. The primary projects I worked on were the lobby directional and educational interface and the Center’s first mobile website.

user experience design for multimedia pylons by Karey Helms

Directional Pylons

In conjunction with the renovation of The Kennedy Center’s Level A concourse, the center added six multimedia pylons with two screens on either side to provide directional and educational content. The Level A concourse does not have immediate access to any of the Kennedy Center’s theaters but is an important threshold in between the Hall of Nations and the Hall of States. My role as the Information Architect and Flash Programmer on the project was to work with an interactive designer, the head of the multimedia department, and database developer to structure and code the ActionScript and XML used in creating and displaying the content.

user experience and interaction design by Karey Helms

With my team, we first mapped out the space in which the twelve directional pylons would be placed. This was a crucial first step in determining which information an individual pylon would display and how directional content would be oriented. The pylons were also given identities, which was later used to automatically filter the information within ActionScript.

The pylon content was divided into two categories: directional and educational. Directional content consisted of information for the day’s performances, and educational content was a series of image and text slideshows based on pre-defined themes. Once I was given the visual design files, content and a link to the server performance data (XML), I designed the information architecture to fully understand the complete system and channels of information before I began programming.

information architecture and front-end development by Karey Helms

In addition to dynamically drawing the design, within the ActionScript I created variables to filter the incoming directional information based on performance details and pylon identities (location). The primary obstacle encountered during the development process occurred between ActionScript 3.0 and the pylon hardware. Programming began before the hardware arrived at the Center as it was important to begin the development as soon as possible so that visual and programmatic tests could be made between the team as a whole. Though, when the hardware arrived, they components were determined to not be able to read and display SWF files created by ActionScript 3.0. Therefore, I had to recode them in ActionScript 2.0, which was compatible.

information architecture and front-end development by Karey Helms

Ben Rosenfield & Regis Vogt (Hardware), Nick Van Brunt & Michael Gilman (.Net), Reñe Trujillo (Design)

Information architecture & Flash programming

mobile website design and development by Karey Helms

Mobile Website

Located in Washington DC, the John F. Kennedy Center for the Performing Arts is the nation’s busiest performing arts facility. On the Kennedy Center’s full website, visitors can execute a wide range of web related tasks, including but not limited to find information on and history of the living memorial, buy tickets to upcoming performances, explore educational interactives, research the artist database, contribute monetarily, sign up to volunteer, take virtual tours, and apply for internships or employment.

The mobile website needed to have a more limited information architecture that addressed the most important core actions a mobile visitor would need to complete or The Kennedy Center would want them to complete. These content areas can be broken down into buying tickets through a performance finder, contributing, visiting, and accessing account information. They also cater to the three common types of mobile web visitors: the casual visitor (a tourist), the repeat visitor (a regular patron), and the urgent or now visitor (a ticket holder looking for directions or parking).

This was my first project when employed at the Kennedy Center and I worked very closely with Joe, the lead developer throughout the entire process. My roles included researching mobile trends and standards, creating the information architecture and content flow, wire-framing content design and user experience iterations, designing the interface, and coding the front-end design in HTML/CSS with jQuery.

I began by making multiple iterations of proposed mobile information architectures and content organizations. These were circulated throughout the web department for feedback and tested against the Kennedy Center user personas.

While working on the information architecture, I gradually began constructing content and user experience wireframes for all pages to be included in the mobile website. Key user interactions were frequently discussed with co-workers in the web department, for feedback and rapid iterations.

As I began the front-end development process, translating the visual designs in CSS and the wireframes into HTML within jQtouch, I transitioned into a more formal agile development process alongside the lead back-end developer. The mobile website was completed on time and in time for the Kennedy Center’s opening announcement for the 2012-2013 season.

Joe Dickerson (Back-end Development)

user experience, visual design, information architecture, & front-end development