Handstand & Kartwheel

Designing a mobile app for real time racing

THE COMPANY

Handstand provides challenging and playful experiences to inspire people to push their limits and deepen their connections with one another. They’re known for crafting full-day adventures that bring communities together, utilizing technology to enable fun while offering a shared experience.

ROLE

Interaction Design, User Research, User Testing

CONTEXT & CHALLENGE

Figure 1: Mario Kart N64 - Race, shoot items, win.

In 2016, the Handstand team approached me with the goal of creating an interactive app experience for a day-long event of foot races. In short, they had a vision to bring the famous game, Mario Kart, to real life. Mario Kart is a video game franchise in which players choose characters and vehicles, race on a course, and collect power-up items that can be used to advance in the race or to hit other players to slow them down (Figure 1).

The challenge: How might we create a real life Mario Kart foot race experience using digital technology, that allows for social interaction?

For this project, I worked with the stakeholders and a visual designer to create the race app experience for their event called Kartwheel.

Process

Explore the problem space

INTERVIEWS

Translating the chaotic delight of a Mario Kart race into the circumstances of a real-world footrace is no straightforward challenge. To understand the essence of what people loved about Mario Kart, and to generate provocations about what might be taken into a real life experience, I conducted informal interviews and brainstorm sessions with the Handstand team. In our discussions, we noticed the following themes that should be taken into consideration when planning the day-long event and app:

Personalization - Racers should be able to personalize their race-day avatars
Equalizer items - Anyone should be able to win with the right item, regardless of running skill
Variety of courses - We should let users select from different race course experiences to keep the day exciting

Figure 2: What made the game fun — **Figure 2:** What made the game fun

RAPID PROTOTYPING

It’s one thing to design a mobile app for the sitting or standing scenario, but a core component of this project would be real-time racing with a phone. How does the experience change when you’re interacting with an app on the go? Working with the Handstand team, we rapidly prototyped a test environment (Figures 2 & 3) consisting of 12 individuals on a set course, location tracking using Apple Find My Friends, and iMessage notifications conducted by a Wizard of Oz-style mission controller. We were looking for general and specific learnings, including:

What is the experience running with a device?
How do the distances feel?
How does it feel to get virtually ‘hit’ with an item by someone you’re racing with, then have to do a penalty that slows you down in the race?

Figure 2: Map of courses for user race tests. As Mission control observed racers passing an Item Zone, they would send the racer an item to use against other racers. — **Figure 2:** Map of courses for user race tests. As Mission control observed racers passing an Item Zone, they would send the racer an item to use against other racers.

Figure 3: Flow chart of user tests. How we mimicked receiving and shooting items during a foot race. — **Figure 3**: Flow chart of user tests. How we mimicked receiving and shooting items during a foot race.

Selected learnings:

Running with a device: It’s hard to read what items are received while running, and even harder to fire items. Additionally, phones can lock which makes an interactive race even more difficult.
Race length: Longer races were difficult, especially with running penalties and everyone running full speed to win.
Virtual items: Getting hit and penalized during a race was frustrating for our racers, but hitting someone else and watching them do a penalty was extremely satisfying.

Design

Taking the learnings from research and testing, I began designing wireframes and flows for the experience. For this project, I was responsible for designing the race experience (pre, during, and post race), event leaderboard, and profile page for each racer. The following will outline a few of the flows I designed for the Kartwheel app.

ONBOARDING TO THE EVENT

Kartwheel was a race event and an accompanying mobile app, so the designed onboarding experience needed to explain how the racing app works and how it ties into the event of the day (Figure 4). Additionally, because initial research showed that elements of personalization helped create an exciting race experience, I added touch points like selecting an image that would be seen within the race UI and leaderboards, and a “racing buddy” that would run with participants during the race and help with race events like getting hit by an item.

Figure 4: Kartwheel event and app onboarding — **Figure 4:** Kartwheel event and app onboarding

REGISTERING FOR A RACE

The event was meant to be a multi-hour experience with different races of varying lengths throughout the day. When coming to the event, participants needed a way to determine what race they would like to join based on start time, length, and number of participants. I designed the races page to let participants evaluate the upcoming races for the day and sign up.

Figure 5: Pick a race flow — **Figure 5:** Pick a race flow

RACING

Once registered for a race, the racing experience had 5 key components:

See the course map on your phone
See yourself and other racers on the map
Run through item zones to get power-up items
Fire items to slow down other racers
Do a mini-game challenge in the app when getting hit as a penalty to slow down in the race

The design for this experience needed to be simple with minimal distractions. Events that occurred, such as receiving an item or getting hit, were designed to have at-a-glance visual states, sounds, and haptic feedback for when the app was open. When the app was closed, users would receive notifications that had quick actions (e.g. “You got an item, fire it!”) so the user did not have to open the app to play if they did not want to.

Figure 6: Screen flow of receiving and firing a power-up item at other racers — **Figure 6:** Screen flow of receiving and firing a power-up item at other racers

Figure 7: Screen flow of getting hit by a power-up item, then having to stop to do a mini-game penalty to continue racing — **Figure 7:** Screen flow of getting hit by a power-up item, then having to stop to do a mini-game penalty to continue racing

REFLECTION & RESULTS

Kartwheel was an interesting challenge with novel problems and a fun team. One major takeaway for me was an increased appreciation for the value of prototyping with increasing fidelity to the final experience, because it can be hard to anticipate what constraints might arise when designing for real life scenarios. The app had been designed with the idea of letting racers run multiple courses, however our location (Golden Gate Park), only allowed us to create 1 race loop. When planning for real life events, it’s important to determine these types of constraints before design, to help the app experience match the event.

Even with the constraints and challenges, I found this project very rewarding. I was able to see the app completely built in a short timeframe, and watch the event come to life. The first Kartwheel event was held on May 13, 2017 and had about 200 racers. The app is still used by the company for corporate events.