A new & improved Gyroscope App is now available in the App Store. This blog post is about our previous & now discontinued running app.
The Making of Gyroscope Running
Codename Quicksilver: Our first React Native iPhone app
We recently released a new experimental iPhone app, called Running by Gyroscope. It allows you to make beautiful images to share your latest run. This is a story about how we designed the app, the tools we used to build it, and what we learned along the way.
The app is powered by two of our most popular integrations, Runkeeper and Strava. They do a fantastic job at tracking your activity. After tracking a run, Gyroscope automatically syncs the raw data. Then you get to have some fun and choose the story you want to share.
A satellite map of your scenic route? Perhaps a photo you took of the breathtaking sunset? Or the fact that it was equal to 7 donuts? Maybe your heart rate was really high so you want to highlight that. The choice is yours.
Chapter 1
March 2015
We had just launched the Gyroscope website. The system was working great. My runs would instantly sync and show up on aprilzero.com, with all of my stats and even info like the music I listened to on Spotify.
We had built a beautiful dashboard, but the only way to share was by sending someone the whole thing.
Our next big challenges were mobile and sharing.
One afternoon in March, I went for a run up Twin Peaks. It was a clear and beautiful day, both bridges visible in the distance.
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.
Standalone App
One of the biggest design decisions was to make this a separate running-specific app. I wanted to see the word “Running” on my home screen, and instantly access my content.
As we added more capabilities in the future — like Cycling or Swimming—people could install just the ones they wanted. I wanted to avoid getting cluttered and covered by levels of navigation.
Activity Feed
Most other running apps need the logging to be prominent, but since we didn’t have that we could make sure content was always king. Everything besides the recent runs would be hidden away in a sidebar.
We played with different styles and metaphors for each run. They could be stacked cards, or a bunch of tiles. After experimenting with various levels of information density, the bigger ones ended up taking too much space. After using the app for a few minutes, I realized I was too zoomed in and wasn’t getting the big picture view I wanted. The view on the website worked quite well, so we ended up reusing those same bars, color coded by pace.
I tried putting the fastest & longest run in the header, so they would always be easy to access without needing to scroll down. It would be a friendly challenge—every time I opened the app I had an opportunity to beat my own record. If someone ran a marathon or did something really impressive, they would always have easy access to it.
The constantly incrementing age counter from the site was a really popular feature, so we added a similar timer here to mark the time since your last run. As that number got higher, people would hopefully be more motivated.
Chapter 4
The Donut Counter
This summer, we were working from the True Ventures office in San Francisco. One day, someone brought a couple boxes of donuts to the office. After lunch, someone—Phil Black if I recall correctly—cut them into 8ths, and said it didn’t count if you only ate little pieces. While I realized this wasn’t scientifically true, I started to sample the various flavors.
As I sat there, working on a running app and eating a quarter of a glazed buttermilk donut, I was curious about how far I would have to run that night to cancel out my snack. After some googling, I discovered a generic donut is about 200 calories, and the calories in a run are approximately (weight × 0.75 × distance).
Runs without map data — like on a treadmill or those tracked via Fitbit—were giving us a lot of trouble. The app was relying on maps for all of the views, but we needed an alternative that could be more flexible.
As I sat there, doing the math for my different runs, I realized 2 things: I had no idea how many donuts were in most of my runs, and it was pretty fun to find out.
And thus the donut counter was born.
We would do some math to figure out an approximate donut count — whether a short run for just 1 donut, or a really long one. I spent the rest of the day shopping for stock photos of nice donuts of various increments, from 1 to 6.
Chapter 5
Beta Testing
Once we had a basic version of the app working, I sent some invites to the top runners on the site — people with over a hundred runs logged. I was shocked and impressed to see that quite a few people had accumulated many thousands of runs in their account.
I enjoyed running, but was nowhere near their level. Their feedback and suggestions would be what we needed to make this a great product.
At first, I was just manually sending emails. People would respond with bugs or suggestions and I would try to keep track of what everyone was saying.
Then someone suggested setting up a Facebook group, something they had done with other beta tests and found really useful. I set up a new private group and sent out the link to a few of our top testers. It grew over time to over a hundred people, many who were running daily and using the app.
Not only did we get a bunch of bug reports and suggestions, some people even started mocking up things that they wanted.
We could brainstorm new features, ship them to everyone in the group, and quickly see them with real content.
Chapter 6
Tools & Tricks
We have a great team at Gyroscope that worked really hard to make this app happen (thanks Mahdi, Eric, Robbie!), but we also had a lot of outside help. Here are a bunch of great resources and products which we found invaluable and saved us a lot of engineering time.
React Native
Coming from a web background, using Javascript and a CSS/Flexbox-style layout system felt very intuitive. I had designed iPhone apps before, but never actually written code for one. If React Native didn’t exist, I would’ve needed to wait for someone else to do the development. A side project like this would’ve probably never gotten started.
Brent Vatne, who was one of our first beta testers, was also a contributor to React Native, and helped us out a ton when we got stuck or had questions that were not yet in the documentation. Thanks Brent!
Since we started, React has improved a lot. Every new release—starting around 0.3 up to 0.12 when we launched—boosted the performance and fixed issues that we had been dealing with.
It still needs work (I wish the animation performance was better) but is improving very rapidly. At least for our very simple application, it got the job done and helped us move much faster than we could’ve otherwise.
React Native’s live-reloading over the network made it possible to rapidly iterate on new ideas or make micro adjustments in just a few minutes. Now I can’t imagine having to recompile and wait to see changes.
Mapbox
Mapbox makes amazing mapping tools that use all over our site. Their editor allows for customizing the style and color. We used it to create a variety of different styles, including this dark and minimal tileset.
At first we played with their iOS GL implementation, but realized that we didn’t actually want people to be able to pan or zoom around. To keep things simple, we decided to reuse our existing web implementation via a webview, letting us keep the code we had already spent months testing and improving.
Imgix
One of the unique features of our app is customizing the style of the card depending on the photo. Imgix helps us analyze the color palette, so we can set the text and other elements to matching and complementary colors.
We also use Imgix for special effects, like enhancing and blurring the image. Using a cloud solution for photos means there is a bit of initial setup time — the user has to upload the photo instead of doing everything locally on the phone—and it can sometimes take a minute to upload and then re-download the processed photo—but that tradeoff was worth it for the amount of time it saves us and the additional features we get.
Fabric by Twitter
We started using Fabric/Crashlytics to track our crashes. In the early days of our app, it would crash a lot. Over time we fixed all the crashes, but I still found myself using the dashboard to see our usage stats.
I had been planning on setting up analytics, but it turned out that almost everything we needed was already part of this dashboard. My favorite thing to see was users active right now, but other stats like monthly active users (MAU), DAU/MAU ratio, and retention rates, were really insightful.
As we made changes to the app throughout the beta, we could actually see the time per session, retention rates, etc. changing. Adding in push notifications with Parse made a big improvement in re-engagement and keeping people coming back at the right time.
Parse
In the early versions of the app, people had to manually open the app and see if their latest run had been loaded. Once we started using Parse to send a push notification for new runs, our retention went way up.
Chapter 7
77 Donuts
One day, I was scrolling through our mentions on Instagram. There were a few photos of sunsets, and then I saw someone who seemed to have done a run for 77 donuts.
Surely there was a bug in my calorie calculations, or someone had uploaded fake data. Perhaps a bike ride was mistakenly marked as a run?
I clicked and googled the “Fat Dog” that Nate had mentioned. Apparently it was a 120 mile ultramarathon in Canada, said to be one of the hardest in the world. Wow!
I shared his post with our group of beta testers. Seeing Nate’s awesome run made me want a way to feature these special runs for everyone to see.
We added a couple features to the sidebar of the app: a feed of featured runs, and a list of friends who ran recently.
Nate’s record is unbeaten — 77 is still the highest amount of donuts someone has tracked on Gyroscope. However, since starting this project I’ve learned to never underestimate people. The next version will have triple-digit support just in case.
Chapter 11
What’s next?
We released this app in the App Store & many people have been using it to track and share their lives.
Tatiana lost almost 40 pounds by tracking all her steps and sharing them.
We’ve taken what we learned with Running & used it to build the new Gyroscope App — which shows the complete story of your life. Also in React Native app, you can read how we built it or get the app from the App Store.
