Building the Gyroscope App with React Native
How I lost 20 pounds while building our iPhone app
We recently released our new iPhone app, Health Tracking by Gyroscope. The app syncs your HealthKit data to Gyroscope and provides a dashboard to keep track of everything about your life.
As we tested and improved the new app, I ended up losing over 20 pounds. I tracked and synced all my data for over two years, but only by having a realtime view of my data was I able to start improving my behavior and become healthier each day—the quantified self dream.
Our goal was to build an app that helped people use their data to achieve practical goals like losing weight, being more productive, and sharing important moments.
Though no one had created an app that achieved these ambitious goals, some great design elements already existed in other experiences that gave us a good starting point.
Inspiration
The Feltron Annual Report
For the past 10 years, Nicholas Felton produced a beautiful annual report of his life. The data was meticulously tracked throughout the year and then analyzed and designed around various topics. You can see the previous years at feltron.com or at the SF MOMA.
The reports were a fascinating window into someone else’s life. We had a lot of similar data automatically coming in every day, and I was really excited to see what kind of reports I could get about myself—both for entertainment purposes as well as finding useful patterns and improving my health.
Web Analytics
For work, there are a bunch of dashboards and services that I rely on daily. Anything mission critical or that makes money probably has dozens of companies building dashboards to help understand and optimize things.
All of our servers are well instrumented to make sure they are running as intended and to quickly notify us if anything ever went wrong. One day in the (not so distant) future, similar dashboards will exist for your body.
Other analytics tools like Google Analytics and Fabric help us understand traffic and other complex metrics. Big numbers, sparklines, highlighted outliers, and other design elements make it easy to quickly parse large quantities of data.
Video Games
Video games have a more fun application of analytics, and often feature a virtual character with attributes like levels, health and experience points.
Presented in the right way, it is a very fun and intuitive way to understand how you’re doing and focus on the right things—stay alive, level up, use a health potion, etc.
People spend hundreds of hours on improving these virtual numbers, but nothing similar exist for real life. Yet…
Codename Magneto
All of our projects are codenamed after X-Men characters, and this app was designated “Magneto.”
Early in 2015, Facebook released a cool new technology called React Native. Eric was a big fan of React and started experimenting with a basic React Native project, pulling live data from our API and displaying it on a screen.
Though the app ran through XCode, the application code was mostly JavaScript that I could edit in Sublime Text or any other text editor. Within a few hours, I was able to edit elements on the page and style them with a Flexbox/CSS-like syntax. It was magical.
Wearables
At around the same time, the Apple Watch came out and there was a lot of excitement and confusion about it. The apps and notifications on the Watch were most often talked about, but we were most excited about the health features.
Once I started wearing one, it monitored my heart rate and steps in the background. I wanted to combine that with other data that was also an important part of my health — the weight and bodyfat from my Fitbit scale, the music I listened to on Spotify, how much time I spent working each day.
The Health app was installed on everyone’s phones and measuring some basic data like steps. There were a few simple things I wanted to be able to do, which were impossible or very tricky with the existing Health app.
- See the heart rate graph for a recent workout
- See an overview of today’s info without scrolling or clicking
- Easily see what I did yesterday instead of just today
Mahdi, who was one of our early users and had just joined the team as full-time engineer, started working on this HealthKit syncing functionality in Objective-C.
The Running App
While Mahdi was building the HealthKit app syncing, I started working on another simple app that let you customize and share your running through a variety of filters and layouts.
When we released that running app, thousands of people started using it to post creative images of their workouts. However, many others complained that they weren’t runners, and couldn’t enjoy the maps of their workouts or see how many donuts of calories they burned.
We needed to figure out how to bring that same feeling of creativity and motivation to all Gyroscope users, not just the athletes. Our solution to that would be to build similar experiences for things that everyone does—music, heartbeats, sleep, computer activity, steps, travel, etc.
Some early app mockups
We started designing some mobile dashboards to condense all the information into the app. To view the details, we decided to make everything a square card with a bunch of customizable options below.
Sharing was also expanded to be a more prominent at the bottom of the page, since a big part of the experience would be to post your biggest achievements on Instagram or share them with friends.
Since these views were so data driven, the initial mockups only provided a rough starting point. Most of the final designs were figured out with the real app on top of live data and graphs that came from our servers.
Weekly Reports
The daily cards focused on a single data point, but the weekly reports had much more information and could show an overview and highlight patterns.
Meanwhile, on the website…
With new features like our Fitbit integration and the HealthKit syncing, we had a lot of new health data coming in — heart rate, steps, blood pressure, bodyfat percentage—but the original website had been focused more on locations and photos. We needed to improve the web experience to let people easily consume their new data, and started working on a new web profile theme with one of my favorite designers, Shane Mielke.
This new theme was intended to be a more serious dashboard of all your stats, and Shane came up with a dozen mockups before we got really excited about this one.
One of the turning points was splitting the content into intuitive sections, by parts of the human body. At first I wasn’t sure if the metaphor would work, but it seemed to fit pretty well with all the data we had, and would give us room to grow.
With a 3D render of the human body (Shane made a simple male and female version), we could use the body as a navigation structure and highlight each section when opened.
Mental health stats like sleep, productivity, time on computer, would go in the brain section. In the future we could add things like mood or meditation.
Cardiovascular stats like heart rate and blood pressure would be organized in the chest area, while fitness activities like steps, running and other workouts could go around the legs area.
Each section was an important concepts that could be filled in with more details later. For example, if we ever added food tracking, that could go into the core section without needing to redesign the whole thing.
The data structure worked surprisingly well, and so we decided to try continuing it in the app. Shane and I started playing around with the mobile homepage, squeezing some of the cards for each section onto the screen.
Until now, most of these were mockups were made with hypothetical data. Most of them involved a big, easily readable title and a graphic showing details of data. The next step would be to actually start building it and see how useful it was in real life with my actual data.
Color coding by status
Our goal for this dashboard was to make it extremely easy to glance and understand the relevant information. Big numbers and color coded cards would give a quick overview of whether a section was “good” for the day.
For example, if the steps were less than a few thousand, the fitness card would be red or orange to remind you to be more active. If you reached your goal or just got back from the gym, it would be green and you could move on to other things. Individual sections are not very hard to get green, but the challenge became finding the right balance across all of the sections.
Launch Screen
For the initial launch screen, I wanted something that was futuristic but still human. I had taken this photo while in Japan a couple years ago and it seemed to have the right emotion.
I put the Gyroscope logo and some text over it and we had our initial login screen.
Beta Testing
By mid-September, we had a working prototype of the app that people could start using. We had tested it on ourselves, but the big challenge was to have it be equally useful for millions of people around the world, and not just tailored to ourselves.
We decided to send it out to some friends and Pro users as the start of our beta program. A corresponding Facebook group was started to post announcements and easily get feedback.
As we posted updates, users would send feedback and help us quickly find bugs. All of this happened within hours or minutes, and let us quickly iterate. Since it was just a private beta, we could release new versions almost instantly without waiting for an App Store review process.
Until now we had been designing based on our own guesses and feedback from just a few people, but now we were able to use more stats and feedback from our users to inform decisions.
It has been tremendously exciting to hear the the experiences of some of our early beta testers.
“Gyroscope is the only product that makes tracking my life easy. With a glance I can tell what I’m excelling at, and what I need to work on. I don’t go a day without checking the app.”
— Brandon Littell
The testing was a lot more collaborative than just finding crashes and bugs. Many people had requests and suggestions that helped us focus on features that people would use regularly.
Mapping your life
One of the most exciting data points we have is location data, tracked through either Swarm or Moves. Running, cycling and other activities also fill in more points on the map.
We loved using Mapbox on our website and decided to implement the same mapping technology in the app. At first we experimented with maps that could zoom and pan, but quickly decided to simplify the experience and use the maps as a static backdrop. We would do the math and try to figure out the best zoom level and composition to see everything relevant.
People who used Moves to track their motion could see a heatmap of everywhere they went and the breakdown of how they spent their time. From a health perspective, it is interesting to see how much time is spent walking vs driving. I started leaving earlier and walking to more meetings.
Some views offered fitness insights, while others were more about understanding travel or what kind of restaurants were visited.
Push Notifications
One of the ways we could make people’s lives easier was by sending a simple push notification each day with some insights.
A lot of discussion and testing went into the scheduling and language of the message. Initially I wanted to send it at the end of the day as a recap. However, data sometimes took time to sync and come in, and had the risk of reporting incomplete data. We decided on 9am the next morning.
Our priority is to make the user’s life easier, even at the expense of making money or hitting our desired metrics. Instead of something mysterious that forced people to open the app, we put all the relevant info so people could get value without even opening the app.
“I started using Gyroscope quite some time ago, but it wasn’t until I had my daughter that it became a big deal for me. I love how my data for staying fit is organized and the deep detailed breakdown I receive. Not to mention I always feel like something new is improving in my experience. The team really cares about its users.
Aside from having an overview of my overall health, I also keep a watchful eye on how mentally fit I am by monitoring my productivity level. I work an average of 38–42 hours per week on Iris (my startup) and am a full-time mom. Gyroscope helped me manage those working hours in order to get a solid “balance” going and I’m super grateful for it. The result? Extreme productivity. Before, 40 hours of work was consumed by BS’ing. Now? You never know how the day will go with an infant, so I truly make the most of out my time…”
Monthly Reporting
Once a month, there would be a new monthly report and we wanted to use that time to review progress and be more introspective. There were a few simple questions we hoped to answer using this data.
Have you been active enough?
Did you sleep enough?
How productive were you?
“As a college student, maintaining healthy balance is key to success. Gyroscope helps me visualize the data in my life so I can balance sleep, fitness, and productivity. Beautiful visualizations and a super useful app!”
— Victoria Spiegel
Weight Loss
Since starting Gyroscope over a year earlier, I had been gradually gaining a lot of weight. It wasn’t a big mystery—the combination of stress, limited sleep and many late nights of working and snacking more than cancelled out the limited exercise I was doing.
One of my goals with the app was that it would help me lose weight. Every day in the morning, I stand on my Fitbit Aria scale to see my weight and bodyfat measurements.
Throughout the day, Gyroscope would remind me of those stats. I built some layouts to help keep me honest and show my recent history in context. Noticing quickly and self-correcting was the key.
Until now, it had been easy to put that out of mind until the weekly reports or when I occasionally checked the site. In the meantime I could make a lot of unhealthy decisions — taking an Uber instead of walking somewhere, ordering dessert or an extra cookie with coffee, etc.—which added up over time. A constant awareness helped counteract the urge to eat delicious sweets every day.
Six months later, as the app was about to be released, I was excited to see I lost about 20 pounds and 5% of bodyfat. I hadn’t done anything very differently, but a bunch of subtle changes and decisions each day had led up to being much healthier. My daily steps were higher as I tried to walk everywhere, and every time I opened the app and saw my progress I was more motivated to keep the momentum.
Many of our other beta testers had similar stories. Though we still want to add and improve many things, we released it in the App Store so everyone could start using the app to improve their lives.
The Gyroscope App is now available for free in the App Store.
