Edward M Kennedy Institute

In February of 2013, a small team formed at Control Group in a bid to win the Technology bid for the Edward M Kennedy Museum. Over the course of the next two years, I would hold multiple roles, including Presentation Designer, Prototyper and Front End Developer in an effort to bring this project to fruition.

Process

Our project was daunting - 22 separate page apps served on a tablet, with 3 different user tiers. As an bonus, multiple apps that needed to interact between the multiple players. During our initial phase, we took over an entire section of the office and laid out imagery for each exhibit around the room. We focused on the basics: typography, grid, color theory and interaction models to help transition users from one exhibit to the next. After several iterations, prototypes and engagements with the client, we landed on a clean, minimal navigation model.

During the second phase, I was uniquely focused on translating the static visual design into front end views using Angular JS for templating needs. It was my team’s first foray into Angular and eventually we designated a second developer to focus just on Angular integration.

Prototype

To progress through, click/tap on the buttons outlined in blue.

Explanation

For one particular exhibit, our users would get a chance to explore the People who Made a Difference. The user selects a category, then an individual to finally reach the details. Our development style was to build a v1 to get the app working, but we were not about to stop there. The next iteration needed the signature moments and transitions that a regular user of tablets and smartphones has come to expect. If we were to leave it as is, the user jumps to the next view without any way to understand how they reached this view, nor does it take full advantage of the card metaphor in the visual design.

However, we had a very short window to fit in this UI exploration. So it goes :). Within 1 1/2 hours, I threw together an animation in Adobe Edge Animate to illustrate the concept and I shared it with all the designers and developers involved, so we could quickly come to an agreement on how much it would cost to fully develop the experience.