As I looked over the city, I wanted a way to share this moment. I had tracked and quantified everything—the elevation, my heart rate, the route I took to get there, the music I was listening to, and what I was seeing (with a photo), but there was no way to recombine them back into my experience.

I pictured an augmented-reality view of my route up the mountain. An idea popped in my head for a sharable card, overlaying my vitals and location on top of the photo I took. All of that info was already in Gyroscope—it just needed to be properly designed.

I decided this would make a sweet Instagram photo, and ran all the way back home excited to try it out.

Chapter 2

Fake it until you make it

As soon as I got home, I opened up Photoshop and dragged in some of the photos I had taken. I added the map data from my run, and combined it with some stats to create a basic infographic. One day we might have a nice automated tool, but for now it was faster to just make it from scratch.

I placed the basic data like city and distance in the corner. I sampled the text color (teal) from the photo, and added a marker for where the photo was taken. A few hours later, the photo I posted was getting a ton of likes. People were asking how it was made.

I decided I would keep doing this experiment, hand-making images after each run and trying new designs.

Over the next few weeks, I continued making new images to share after each run. I played around with different styles of maps, and adding details like music, weather or heart rate. These small flourishes added more insight and dimensions to the run, and people seemed to like it.

I began to really look forward to the creative exercise of making and sharing each card after a run. Combined with the endorphins, it ended up getting pretty addicting. There were many new layers of creativity and storytelling: looking through the photos I had taken, seeing different views of my map route, choosing nice accent colors, etc.

It combined a bunch of my favorite things: photography, running, and getting attention.

There was something about adding a few stats and logo to the photo that transformed it from feeling like just a photo to being graphic design or even art. The composition and shape of all the elements could work together to create something that was much greater than the sum of its parts.

Even while traveling, I enjoyed working on these. The cards were a nice way to capture the different places I visited, like a kind of postcard.

Toggling various data points like music or maps would tell a different story for the same content. For example, on a more intense run I might add my heart rate. If it was a really hot or cold day, the weather might be an interesting stat. If there was a beautiful sunset or view, that usually made a nice backdrop. If the geography was interesting, a satellite view would highlight it.

After doing this experiment for a few months, I realized this would be a pretty amazing product. I really wanted it for myself, and many others had been expressing interest in using it themselves.

I started sketching some concepts, and consolidating my experiments into a few of the best layouts.

Chapter 3

Designing the App

When starting on a new design, I like to list the objectives. Picking the right goals is often more important and harder than making things look good. For Quicksilver, there were a few guiding principles that I felt were important. These would define every pixel or line of code that we would produce.

Get as many likes as possible See your latest run instantly Make the customization fun

Designing for Maximum Engagement

To get as many likes as possible, we would need to add the right visual flair, focus, and context to make it resonate with others. Realizing our target demographic — the general public and not just fellow athletes — helped shape things and was a big differentiator from what everyone else was doing.

Most apps had detailed stats to help improve performance. However, to a friend who is not a runner, that info is much less exciting. They would probably much rather see that it was equal to 5 donuts, and give you a thumbs up. Or maybe a pretty photo from the top of the mountain you painstakingly climbed.

We tried to build each layout option as its own brand, with a unique name and icon. This was the core feature of the app, and needed to be extremely intuitive and fun to use.

After trying out a few different ideas, we ended up with the layouts in a long list at the bottom. It was really rewarding to flip through the different layouts and pick one.

It felt like Instagram filters for running

Launch Screen

Since photography and user content were a big part of the app, I wanted that to be reflected as you first opened it.

I started looking around for nice photos to use as a background. My friend Adam, one of the best photographers I know, graciously let us use one of his shots from Mt. Tam.

Once I added it to the app, I instantly fell in love. It was the perfect feeling of serenity and nature that would set the right tone for the rest of the app.