Active Spectator App
USER RESEARCH | STRATEGY | INTERACTION DESIGN | VISUAL DESIGN
Have you ever been to a road race to cheer on your spouse, friend or coworker? It can be hard to be prepared for the perfect photo opp. of your friend running by when there's a solid wall of runners passing by. It's also hard to cheer someone on when you know they're at a tough part of the race, but it's several miles from the finish line and you have to decide where you want to stand.
Enter... Active Spectator
- At-a-glance, see all your friends (some of whom you might not even know are there!) on a race leaderboard
- Check our your friend's profile so you're ready to snap a photo when she passes by or press-and-hold the cheer button (walkie-talkie style!) so you can offer encouragement, even when you're not there
- Know exactly where your friends are during and after the race
To get a better understanding of what both runners and spectators wanted, I set up interviews with a handful of each. There were several themes that emerged with every conversation:
- It's hard it was to pick someone out of a crowd, some people used "Find my Friend" to see where their friend was in relation to where they were, but this was sometimes a little clunky, especially when following multiple friends.
- People wished they could follow their friend on the entire course.
- It's always a surprised when you check Facebook later and see that you had a whole bunch of friends at the same race.
Sketches + Prototypes
After talking with runners and spectators, I hit the whiteboard to sketch out the overall flow and prioritize tasks based on context within the app— for example, if a user wants to see when their next friend is running by, it would be easy to check out the Real-Time ETA and then switch over to the map view to see exactly where you are in relation to your friend. Below you'll see some early sketches, as well as all the screens rendered in Sketch App.
Take it for a spin
For this project, I was testing out Marvel as an alternative to InVision for prototyping. Have a look at the live prototype!