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.
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.
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.
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.
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:
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):