The Challenge

Contribute a new body of knowledge to the field of interaction design by creating a marketable product or service.

The Story

Superzeroes takes places in the midst of the global economic collapse, where a world once protected by its superheroes has become corrupt with evil-doers of all kinds running wild. In these tough times, most superheroes have called it quits to seek simpler lives. With towns all over the world panicking, a new pantheon of heroes must step forward to conquer evil…

And so the game begins with a “mixed bag” band of misfits volunteering themselves to the cause. These nobodies have absolutely no superpowers to speak of, yet they genuinely believe they can develop them through experience fighting crime. In this time of need, the townships of the world have no choice but to trust the protection of their homes and citizens to these incredibly ordinary… Superzeroes.

Comparing gameplay parameters

Some initial concept sketches

A concept map of core game components

How it Works

As a location-based mobile game, players are required to go places in order to advance their character’s strength and the game’s plot. Public spaces become game locations that players must journey to as part of missions that are assigned to them. Completing missions in the game, whether solo or on a team, will allow players to “level up” and tackle more difficult forthcoming missions.

Armed with their mobile phone as the game’s interface, map, communications device, and GPS, players will re-discover the fun of adventuring in their own city, meeting new people in the process. When playing Superzeroes, players will see the line between reality and fiction blur into one.

Finding the sweet spot for my prototype

Prototyping social gameplay

The game's system map

Why it Matters

In a time when many of us are so fixated on just getting stuff done, Superzeroes aims to help players re-establish an emotional connection with their cities. Players are encouraged to explore the streets, parks, and the various institutions and shops that surround us. And in doing so, the true goal of Superzeroes comes to light as players will encounter other players who are playing the game.

Using the game as a platform, and continuously encouraging collaboration and teamwork, Superzeroes can help break down the barriers of social ambiguity, making it easier and actually fun to meet new friends you wouldn’t otherwise have met. Superzeroes helps its players create new social connections that extend beyond what’s being offered to us behind our screens.

Air Travel Isn’t All That Fun

According to the extensive research we conducted, which included surveys, interviews, and ethnographic observations, most air travel passengers loathe the airport. The feelings of stress and resignation were common amongst the people we talked to, largely due to the unreliability of the airlines. We knew we needed to address this with Passport.

Designing a More Personal Experience

Our approach was to design an experience that catered to the passenger. By delivering pertinent travel information in a timely fashion, we could help reduce stress and anxiety because as we discovered, poor communication from the airline was a huge cause of travel stress. We identified several key service moments of the air travel experience that Passport could intervene, and designed specific tools for those moments that could facilitate relevant communications.

We captured interaction touchpoints ranging from purchasing an online ticket, to the check-in process at the airport, using Passport on the plane, and even what it’s like to make that hectic transfer to a connecting flight. We knew we had to address each of these moments equally because their individual effects on the travel experience were additive, and flaws at any point of the experience would result in major customer dissatisfaction.

Service ecology of NY Airports

Passport's Service Blueprint

Imagining the Passport kiosk service

Creating Service Envy

In addition to addressing passenger needs, Passport was designed to be feasible for airlines to implement as well as a viable fixture in airport terminals. Airline kiosks are already installed in terminals and on-board touchscreen interfaces are also fairly common on passenger aircraft. We took this opportunity to build on top of existing infrastructure to improve the passenger experience.

A redesigned boarding pass

Kiosk interface with directions

Seatback screen displaying information

This project was a collaboration with Jeff Kirsch and Katie Koch

All documents presented below are my own work

Collecting Relevant Data

By making personal transportation choices more transparent and creating a platform for cooperation and competition, users can participate in a larger, global effort to reduce their carbon footprint. Using the iPhone’s accelerometer as a pedometer, Good Move can keep track of how you travel while making assessments on the effect its had on your health, savings, and the environment. While the mobile portion of the service collects the data, the web service acts as the platform that wraps a game-like experience around it.

The Importance of Game Dynamics

It was important for us to foster a community of active, long-term users and we borrowed elements of game design to help us achieve this goal. We included several features that would display visceral feedback for participation, including a personal progress (leveling) bar, detailed statistics of use, and a global contributions meter that showed how the community’s cumulative participation was helping to reduce the global carbon footprint. A robust rewards system further cemented active participation, by providing users with actionable, achievable goals that increases in difficulty over time.

Concept sketches that got us started

Concept model for the mobile app

System map for the web service

Tapping the Social Graph

We knew users would feel extra motivated to participate if their friends were a part of the community too. As such, we built the system to encourage friendly competition, where users could compare their contributions and achievements with their friends to see who was doing better and in what areas. The system’s internal communications allowed users to actively challenge one another for personal and environmental supremacy.

Storyboarding the user journey

Wireframes for the web service

A designed comp of the web service

 

Capturing the Full Eco-system

To document the entire experience of using the system, we created a user journey that captures the experience of using Good Move from start to finish. The video tells a story of what it’s like for a user to start tracking their movement through a city, culminating in a walkthrough of the web service component while capturing the competitive spirit of the system.

This project was a collaboration with Stephanie Aaron

Client: Showtime Sports
Role: User Experience Designer

From HBO to Showtime

Beat the Insiders is an online “pick ‘em” game where players log in to pick the NFL teams they thought were going to win for the week. The original game called, Beat the Hosts, saw amazing results as a form-driven selection interface with a message board. When Showtime picked up the game’s companion program, Inside the NFL, we were asked to redesign the game for them.

Understanding the Football Fan

We spent a few weeks uncovering the mechanics of the original game, studying what fans really loved about participating. We discovered there was a huge social component to the game – fans loved talking about their picks, their reasoning behind them, and showing off their football knowledge to others. There was also a lot of competition amongst family, friends, and coworkers. It was then that we knew we had to make this game a rich social experience.

The Power of Paper

Several weeks were spent iterating on a paper prototype that was used to help us work with the fluid interactions of the intended experience. By making the experience of “playing” with the prototype tangible, we grasped the nuances of the interactive experience much more clearly than we would have if we jumped right into digital wireframes.

Another benefit was that it was used to engage the client and get them involved with discussing what the experience could be like. The prototype was brought to client meetings and we engaged in a lot of participatory design sessions with them. It was through these meetings that many improvements were incorporated into the design.

Putting together the paper prototype

Prototyping with developers

Showing the prototype to the client

The Interactive Prototype

Once the preliminary game mechanics were finalized, we moved from paper to digital. But instead of designing the usual static wireframes, we decided to try a new interactive prototyping software called, Axure RP Pro.

The rich interactions we were able to execute using Axure were again helpful to engage the client and to more effectively communicate intended experiences to the development team. From simple mouseover effects to more complex conditional interactions, Axure provided us with the right tools to demonstrate the gameplay to multiple levels of audiences.

Check out the prototype

Client: Madison Square Garden
Role: Lead Designer

A New Focus and Expanded Audience

Two site architecture options

The major challenge we faced with this project was its expansion to a wider market and having to accommodate two divergent audience groups – New Yorkers and everybody else.

Very specific rule sets on ticketing and showtimes for the New York show and the new national shows meant we needed to consider two very different displays of information. In essence, it felt like we needed to design two separate sites, but a requirement from the client was to maintain a consistent look between the two shows and keep them both in the same site. In the end, we presented two directions for the site architecture that could accommodate the different user types, and helped the client come to a decision on the most appropriate one.

Incorporating the Experience of Christmas

A wireframe of the ticketing page

Christmas in New York is a special feeling and we wanted to emulate that with the site. We tapped into the existing behaviors of our users around the event – sightseeing other Christmas spectacles around town, dining out, ice skating – activities that often led to the Christmas Spectacular itself. We designed this into the site in the form of interactive maps, an activity planner, and of course tying in social media to help broadcast the feeling of Christmas as shared by many.

Customized Content Management Systems

To offer our clients more flexible control over the types of content they could upload, we often created customized back-end systems that could support their requests for dynamic content. Whether it’s user management systems, or the ability to create and drop in a custom poll on any page, these CMS’ were highly robust and often fairly complicated. Not only was it my job to design the form that the CMS would take, but also to ensure that the experience of using these systems was as easy as possible. We wanted to give our content editors the confidence to make the right choices when using our tools.

Case Study 1: BBC Worldwide’s Subscription Management
Role: User Experience Designer

Subscriptions overview page

Subscriptions Tool

Outlining the tooltip copy

Download the PDF

Documenting Behavior

As the user experience team evolved its practice over time, we began to create interaction design documentation that would outline the exact behaviors as intended by its designers. Whereas formerly in the past, agreements over interaction would take place verbally, we would now specify them on paper based on how we designed the back-end tool that would control its behavior. By having a hand at designing both ends of this spectrum, we were able to fully ascribe the intended experience of our designs.

Case Study 2: Madison Square Garden’s Ranking Tool Functionality
Role: Lead Designer

CMS for a customized ranking tool

Setting values through the CMS

Detailing the front-end behaviors

Download the CMS PDF / Download the Interaction Design PDF