Nike+ Running Photo Sharing

Overview

The photo sharing feature in Nike+ Running app is one of the most important features that we’ve released to date. As mentioned, the feature directly contributes to the feedback loop within the running community. With every running photo we share, we are inspiring another runner out there to go for a run.

Here’s a quick overview showing how it currently works.

Photo sharing flow

Pretty straightforward, right?

It wasn’t always this easy.

When we started the project, I had a very different view on how photo sharing was going to be implemented. Looking back on it, it was overly complicated and it required too much time to create something that looked halfway decent. Thankfully to prototyping and a team of smart designers, we were able to iterate and simplify on the flow in order to make photo sharing as seamless as possible.

Adding a Photo

After a runner finished a run, we wanted to provide a quick and easy way for them to capture the end of their run by taking them directly into camera mode from the Share Run screen.

Adding a photo

Customizing the Photo

After taking a photo, the runner could then customize it with Nike+ metrics such as distance, NikeFuel earned, average pace, run route, and of course, the Swoosh. This all made sense until we got to editing the grid. The grid allowed runners to add a couple of more photos to their original photo in order to create a collage of their run.

Adding Nike+ metrics and editing the grid

After testing the initial set of prototypes, people were confused as to why this portion of the photo sharing process came later. The mental model that most users had were to: 1) select a grid and then 2) fill in the missing pieces of the grid.

In addition, it seemed like there was too much focus on editing the size and placement of metrics rather than on the photos themselves. This model of adding a metric one by one, resizing it, and then changing its placement was based off of some of the popular photo editing apps out there.

With this insight, we decided to create several variations of how the metrics were laid out. These presets did a couple of things: 1) it got rid of having to resize the metrics to fit perfectly within the collage and 2) it cleaned up the UI, making the process less overwhelming. Thanks to our visual designers (Sean Kelly, Sojin Ouh, and Steve Winchell), a visual guide was created specifying the various layouts.

Collage angles by Sean Kelly, inspired by the Nike Swoosh

Guidelines for photo collage by Sojin Ouh and Steve Winchell

Lessons Learned

It’s always humbling to look back at the awkward baby prototypes that a product feature once was. When you see the evolution of a product, you get a sense of the shortcuts that had to be taken in order to get it to a better place. The best part is that with the lessons learned, you get to re-apply them to your next project and maybe even pick up a few more new lessons. Here are some of those lessons I’ve picked up over the course of this project:

Follow the beaten path only if the general mental model follows it

Don’t follow the beaten path if the beaten path is long and arduous

“Fail fast, fail often” (old, but gold)

Don’t just trust your gut, trust your team

If you haven’t yet, hit up nikeplusrunning.tumblr.com to see what the Nike+ Running community has been up to since the release of the feature.

And as a bonus for making it this far, here’s one of the many earlier prototypes of Nike+ photo sharing (cue outtakes music):