Printing the Gyroscope Annual Report Books
How we designed and printed custom books for all our users!
Gyroscope is an app where you can see all the stats about your life—until now only digitally: on the website, iPhone, Android or Chrome. Each year we generate an annual review of everything you did, but we’ve always been fascinated by the idea of having a coffee table book of your life, making your life into a product that you can actually touch or hand to someone.
Last year, knowing little about print but having done annual reports for a few years, we set out to make that a reality. We put up an order form at the end of 2016, and a few Pro members preordered their books.
After almost a year of design and prototyping, the limited edition set of 80 books have been produced and shipped to their owners!
At the end of each year, we’ll be producing a new set of books. They’re $399 each—which is quite costly, but this post will explain what goes into each one and why the printing costs are so high for an edition of 1.
We had never done any print products before (and as far as I know nothing like this has ever been available as a product), so I wanted to share a bit more about how they were made…
At the print shop
Early Inspiration
Nicholas Felton has been doing annual reports of his life for a long time. Over the course of a year, he would collect data about himself, and then produce a book reviewing all of those details. All 10 of his reports are available online to view digitally on his website, but also available for order as printed books. I bought some of those books a few years ago.
Though I had seen the designs on on his site, physically flipping through the book with its special paper and fluorescent inks was a much more magical experience that can’t be replicated in an app.
Each year had a different focus, with about 16 pages going into depth with a particular topic. For example, the 2013 report was all about communication and analyzing the details of how he talked to people.
One of the nice things about having a whole year of data is that patterns become apparent that may not have been interesting over just a few days or weeks. Simple measurements over a whole year can reveal underlying trends or draw attention to the interesting outliers.
The quantitative analysis and detailed trends are great to have, but one of the most delightful parts of the report were not the statistics but the qualitative details about a person. Alongside the big graphs, the fun data points like the types of pickles or cheeses he ate give the books a lot more personality and make it more of an intimate report.
Things like how many burritos you eat or the most popular ice cream flavor can be hard to track — but are really impressive details, and make people ask “Wow, how do you know that?” It’s a bit like a magic trick.
Sometimes, the only way to get them is by painstakingly tracking everything you do all year, but in other cases they can be figured out more passively.
There is a lot of curation and filtering involved in building these books—almost a year of work for each one. Figuring out how to do that at scale for other people would be challenging, but would be an important step in having these reports resonate with their owners and accurately reflect a year in their life.
2014 was the 10th and final year for the Feltron Annual Reports. Our books would have to pick up where these left off, and let him continue having reports for every year of his life—but without all the work.
The Gyroscope online reports
In our online annual reports, we were already analyzing and showing a lot of great data for the year, organized by sections for the year—travel, running, photos, etc.
Digital activity and music listens added up over the year, showing a nice overview of all the hard work done.
The travel maps looked really nice with a year of data too, showing patterns in a city and frequently visited spots.
Running and cycling is very popular for many of our users, who use the Gyroscope app to share their workouts during the year. With a whole year of data, it is possible to see an overview of changes during the year, and re-live your favorite ones or big races.
Validating the idea
Doing printed books was something we had talked about doing since Gyroscope started. Actually producing them would be a huge project though, and probably be very expensive.
I definitely wanted one for myself, but we were curious how many of our users would buy one or be interested in this. The digital version of the annual report was already available online and pretty good.
Instead of just jumping into it, we decided to do a survey with our Pro members to see what they were interested in—and also how much they would actually be willing to pay for a high quality book.
The average price would determine a lot of what we would be able to do. A simple magazine or 10 page booklet would be a lot cheaper than a large hardcover book. Adding nice details like foil or premium papers and inks would increase the costs, but also make it a lot nicer.
One of the questions asked “what is the most you’d be willing to pay for your book” and there were a few people who said they would be willing to pay $200–250. Many more were in the $100–200 range, which seemed like a great price point if we could get the costs low enough.
I didn’t have a good sense of how much all these things would cost to print, but I suspected it would end up getting very expensive.
One of the biggest things we heard was that people were interested but didn’t have enough data tracked for 2016. Many of them were planning to use Gyroscope more regularly and planned to get a good book at the end of 2017.
Lack of the proper location tracking (with our Moves integration) was one of the biggest bottlenecks, and one of the reasons we are currently working on building that ourselves.
Finding a printer
In order to figure out how much the books might cost, I wanted to get some quotes from some printers and find out how much things like silver foil and hardcover books might cost. Then we could start taking preorders and working on the books for everyone.
Finding the right print shop was surprisingly challenging.
I did a quick search and tried emailing a few dozen places in the Bay Area. Most were very confused by our requirement of unique content for each print rather than doing a big run. For almost a month I searched, asking people who had worked in print for their recommendations. A few online services for printing photobooks on demand came up, like Blurb. However, they seemed very expensive and with limited quality, more intended for a single family photo album rather than a professional project or a batch of hundreds of books.
Finally I found a local print shop in Potrero Hill called Watermark Press, and they seemed to specialize in digital printing. I walked down there one day, and we spent an hour looking over samples they had printed and discussing various styles and materials for the book.
Reviewing a bunch of the options in person, we were able to make most of the decisions about the details of the book.
Picking the actual paper for the inside pages also presented many tradeoffs, in weight, texture and size. The pages needed to be thick enough to feel substantial, but not so thick that the pages wouldn’t stay open easily or be annoying to flip, like a bunch of pieces of cardboard stuck together.
The large 9x12 books felt much more immersive and substantial than smaller ones, but also made everything a lot more expensive. I figured the better experience would be worth it to the customers. We briefly considered having it be square, to match the design of the iPhone app cards, but decided that feeling like a real book was more important.
There were various options for the texture of the pages—glossy or matte, varnished or unvarnished. Based on the quality of photos and color reproduction, we were leaning towards a silk finish, but the feel of a rough matte texture was also very appealing.
Codename Jubilee
With enough members interested, and a few preorders starting to come in, we started trying to figure out how to actually make books for all these people.
At first we explored the traditional tools like InDesign, which are often used to design books. Many of the features are centered around ways to dynamically add the page numbers or flow text across pages.
Pretty much everything in the industry was focused around printing many copies of one book. We wanted to do the opposite — design many books at the same time and just print one copy of each.
I found this interesting guide about building books with CSS3, which seemed like a promising idea. I really liked the idea of using web technologies and JavaScript to build this, especially since we already have a lot of that built for the web version of the annual reports.
There were some useful tips for laying out a book with CSS properties, but ultimately suggested the wrong approach, with expensive tools like Antenna House or Prince to make a PDF from HTML pages. I checked out the documentation and tried them briefly but they didn’t seem to work well, perhaps only designed for very simple text-based books and not any JavaScript or rich content like we would need for our graphs and images.
There were also some command line tools which used Webkit to make PDFs, but those also were a bit odd and didn’t pass our basic tests for generating usable PDFs.
Still, I really liked the idea of using JavaScript and CSS to print a book from a series of webpages. We’ve already used that tech to make all kinds of things: websites, clocks, apps—so why not a book?
Our original iPhone app was codenamed Magneto, and since then all of our projects and channels have been named after X-Men characters.
The running app was Quicksilver, our database is Cerebro, and of course this book was designated Jubilee.
We started by forking some of the code from the original annual reports, but as a new section with special print constraints. The requirements for printing are in many ways the opposite from the internet—loading speed doesn’t really matter, and animations were nonexistent, the page size and resolution are always known.
Rather than dealing with different devices and possible mobile usage, each page was going to be a fixed number of inches, with a known aspect ratio, so all the measurements could be hardcoded. And unlike web design, the units could be specified as inches.
And of course this book was designated Jubilee.
It took a while to get used to these different constraints, and writing CSS in inches, but also made it really fun to work on, and enabled things that would typically not be possible on the web or in an app.
With basic pages showing on the site and sized for print, we needed to figure out how to get them into a format that could be sent to a printer, and see how these designs looked when printed.
As mentioned earlier, there were some tools out there that promised to turn webpages into books. They were all terrible and expensive though, and didn’t even seem to work properly.
Fortunately, browsers already come with an easy way to make a PDF: printing.
After trying out a variety of different browsers and print settings, Google Chrome ended up being the best way to do it. Many browsers strip out images or background colors for print, which would mess up the pages. Chrome had a helpful checkbox to include them, so the printed page looked similar to what was shown on screen.
The final step after exporting from the browser was preparing the files with Adobe Acrobat, merging and cropping them to generate the final deliverable.
The pages were 9x12, but we needed to add a little bit of bleed around it, so the actual PDFs were larger — exactly 9.687"x12.750".
In reality, making the book wasn’t quite as simple as hitting print and checking a checkbox. Later on, we spent weeks solving problems with small details like getting circles to render correctly with border radius, or rendering emoji on the page (Twitter’s vector set was useful for that), or even getting the right shade of black. But for the first proof this would be good enough.
The first draft was generated on December 27 at 7:53 pm, combined in Adobe Acrobat from bunch of separate PDFs (one for each page). It wasn’t very well designed, but started to somewhat resemble a book, with an intro, table of contents and a few chapters of pages.
I sent the (very) basic PDF of my book to the printers to make sure they could actually work with this format. The idea was that eventually we would provide them with dozens or hundreds of similar PDFs, and they would somehow give us books.
The first proof
To make sure our approach of generating the books from the website would actually work, we sent the PDF proof to be made on the digital press. A few days later, we got the proof back in a large envelope containing 32 uncut sheets, complete with bleed and trim marks.
It didn’t feel like quite a book yet, but it was a great start. This first version was just a bunch of huge pages, but seeing it on paper showed which elements looked good in print and how all the various items translated to CMYK.
I quickly learned to test early & often — ordering printed proofs instead of just looking at the page on the computer. Print is a really different medium from a screen and can be very unforgiving. The good news was that the maps and photos, which were a big part of the experience, translated nicely on the paper we were using. We experimented with some matte unfinished stock, which had a nice feel to it, but unfortunately the images lost a lot of their contrast and depth.
A lot of elements which we relied on in the site—like bright colors for running lines, or glows on a map, didn’t translate the same to print, where there is no backlight.
On the web, colors can generally be subtle shades of grey, or slightly tinted rather than doing completely #000 and #fff everywhere. In print, however, the text often looked better as full black. Light grey details and subtle lines didn’t translate as well and would get fuzzy when the dots of ink started to show. We were playing with a whole new set of rules, but soon came up with a good stylesheet that worked well in print and had nice color selections.
Per Peter’s suggestion, we also added a preflight step to convert the solid black areas from plain black ink to a technique called rich black, which adds other colored inks on top of the black to make it feel even darker.
Representing & storing the books
Once the basic pages were working, we needed to figure out how to store and curate them. Each book was 64 pages long, so we needed to figure out the contents for each one.
One possibility was to put them in the database, but the exact structure was still constantly changing. Also there were only a few dozen books, so storing them more manually wasn’t too hard.
We ended up storing them as an array of pages in a python file called pages.py, which is now about 6,000 lines long. It contains the curated details of everyone’s book—each page can have some options like whether to show in the table of contents. The pages were grouped in pairs, so we know which we two pages would show side by side and fit together.
Preorders
Until now, I wasn’t sure whether this would be possible. Now, with a rough proof back from the printers, and some quotes, it was starting to seem possible. A lot of work, and very expensive, but something that we could offer.
We put up a page with some concept photos and photos of the recent proofs, and an order button. At low volume the printing costs would be extremely high, so we priced it at $299, with a $50 discount for Pro members.
There weren’t very many, but some orders started to come in, from people who had wanted this for a long time or were just very excited about Gyroscope. Others said they were excited about it but would buy it the next year once they had enough data.
Designing the cover
From very early on, I knew I wanted to have some sort of silver foil. This whole project was probably just an excuse to get to use metallic foils.
One of the compromises for the cover was to not have any personalization, like the person’s name or other unique content. It would just say “Annual Report” and the year 2016.
While it would’ve been nice to have the person’s face or other dynamic info printed on the cover, that would’ve made it much more complicated. Making them all identical would let us print all of them together as a batch of 100 sheets on a really nice printing press, as a (slightly) cheaper and much more manageable project.
In addition to the silver foil, we used spot UV which is an effect where only some parts of the page have a glossy texture. While technically clear, it reflects the light differently and can also be felt.
I had used it on the April Zero business cards a long time ago. It could be used for some more subtle text (like “limited edition”) or giving the cover more texture so it is easier to grip and feels more interesting. Each dot was individually positioned to feel slightly geometric but also a bit natural and organic.
The two would combine with the base layer to give something like this, which would be wrapped around the hardcover.
We debated whether the cover should be made of a special colored paper, or just made on nice white paper with the design printed over. Ultimately we opted for the latter, which would let us show more detail in the Gyroscope logo and also have plain white text on the spine. The G for the logo and the 2016 text would be in silver foil.
We did a few simulated proofs first, printing the design in CMYK on a flat page. It would look similar to the final one, but without the foil or any special effects. This let us make improvements to the size and shape, and make sure it lined up well on the actual cover.
Holding it and flipping through the pages was an important part of the process, to get a realistic preview of the final product and make the necessary adjustments. For example, the 2016 text looked aligned in the original file, but when actually printed it needed to be moved over to the right because of all the space the spine took up.
Once the design was aligned and sized properly, we approved the final design and printed a hundred copies of the cover on a nice offset press. It was sent as three separate layers: color, silver and UV.
By April, the final covers were all printed and stored in preparation for the final books. We used one them for the next proof of the book. This 3rd prototype was getting closer to what the final product would feel like, with updated designs for the 64 pages and the foil on the cover. It turned out really nicely and was starting to feel like a real product. Now all that remained was finalizing the 2,304 unique pages that went inside.
Tradeoffs & printing costs
Printing 2016 on the cover was a big decision that had a lot of implications. It looked nice and gave us a large area to put foil on, but also meant they couldn’t be reused for 2017 or anything else.
The idea was that having the spine and cover of each year’s edition be unique would be a great detail, worth the additional cost. How much is that cost? About $30–40 more than if we had gone with something generic. With this strategy, printing 100 copies of the cover ended up costing around $4,000, making each book’s cover cost around $50.
Printing many more covers, even 1,000, would not have been much more expensive, since most of the expenses go towards setup. However, there weren’t that many orders for the books, so that would’ve been wasted. One of the lessons here is that high-quality materials become a lot more affordable with scale. This is true online too: more users and paying customers means a higher quality product for everyone — but in print that difference can be even more extreme.
The size of the book was also tricky — 9x12 would be much more expensive than 8x11 or something smaller, but also felt so much nicer and would allow the maps to be significantly bigger.
Other tradeoffs were not about cost, but about durability or style. We spent weeks debating between different paper textures—the rough version of the book felt great to touch, but didn’t showcase the maps as well as the slightly glossy finish we ended up going with. Still, sometimes I flip through that old prototype and wonder how it would’ve turned out.
Digital printing vs Offset Printing
The highest quality way to print a book is with offset printing — where CMYK plates are used to print many pages efficiently.
The initial setup costs are very high, since individual plates would need to be made for each page, and the press needs to be set up, etc. However, once the setup is done, printing thousands of copies is quite efficient and can become very cheap. The technique is often intended for printing hundreds or thousands of copies, so it yields a really cheap unit cost if you order many.
Our main constraint was that we were printing very limited quantities (typically just 1) of many totally different books, so each one needed to be printed separately but still at high quality. This meant offset printing would be prohibitively expensive, and we needed to use a technique called digital printing, which is more similar to how your personal printer at home works, and doesn’t involve custom made plates.
Not quite as nice as traditional offset printing, it seems the quality of digital printing has improved a lot with the latest technology. While there is still a difference that can be noticed, especially in smaller details and getting small text as crisp as possible, it would be good enough for what we wanted to do.
The biggest limitation with digital printing wasn’t the quality, but the size of the press and the paper that could be used. The ideal type of binding is called smyth-sewn, a high quality type of binding a book which is very durable and makes it easy to open the pages.
However, needs multiple pages to be printed onto a giant sheets, and then folded together into one signature to be sewn.
Unfortunately, the digital press could only print sheets that were big enough for a couple of our pages, so this technique wasn’t an option.
Instead, we would have to perfect bind the books, where the pages are glued together at the end. For similar style, fabric headbands would be attached, making it look similar. We started with this approach for the first prototype. It worked well, but had some durability issues with the end pages peeling apart after a while. To fix this, we added some additional side stitching to reinforce it.
Designing the pages
Our approach was to hand-make my first book with maximum curation, just aiming to make it the best possible 64 pages without worrying much about automation or scaling. Once that was good enough, we could streamline the process and replicate the pages across the rest of the books.
The cards from the app or the website gave a good starting point for what the pages could be — the maps for example, or the running routes.
That gave us a way to start filling up the pages with familiar designs, with some minor design changes to work better in print. For example, the bright green lines that glow on a screen looked flat and hard to see in print, especially over a satellite view. Those could be switched to white and made brighter. On average, most of the changes involved making everything much higher contrast and more bold.
While still feeling familiar, we wanted to include some new ideas for print that hadn’t been done before, taking advantage of the book format. People were spending a lot of money on this, so we didn’t want it to feel like we just took their Gyrocope web profile and hit print.
One interesting property with a book is that two pages are always showing side by side, and so we can design the experience as two-page spreads. Most of the book was planned two pages as a time — for example one side could be the photos or maps from a month, and the other side would have more detailed stats. Or we could have big graphs and maps that went across both pages for a more immersive experience.
In this example, we have a graph of the whole year’s computer activity stretched across two pages.
One major constraint on the site and in the app is speed. Loading every single data point for a year is not usually practical—it would go too slow, and also create too much load on our servers. In print though, doing crazy things like loading every hour of the year is possible. It may take 5–10 seconds to load that data from the server, but luckily that doesn’t need to happen every time you open the book.
This view shows the most frequent times of day that apps were used throughout the year, based on RescueTime data synced to Gyroscope.
I would often try the first version with my data, but then start testing it with everyone else who ordered a book. Occasionally I would get distracted for an hour, just looking at the different pages and how they turned out for everyone. This was generally a good sign, and meant the page was ready.
Mind Map
One of our most popular cards in the app is the weekly Mind Map, which shows a great overview of when you were working, listening to music, or offline, and how those change throughout the week.
Similarly, we were able to load a whole year of usage onto a page and graph it all, one month at a time. Weekends were highlighted to show weekly patterns and explain why certain days might be different than other ones.
In the early versions, the dots weren’t labeled and people were unsure about what the page showed. For the final iteration, we added a page title and also labels for each month, which listed the total and explained the difference between green and red circles.
Travel & delight
We’re not just worker bees, with generic stats like steps and productivity. An important part of the book was figuring out how to make it personal and entertaining, including things you did during the year that reveal more of who you are as a person.
The places you went to were really exciting to revisit, and with a whole year of data reveal meaningful patterns about a person. I spend a lot of time in coffee shops, for example — both for acquiring caffeine and working.
Especially for those with kids, Disneyland was a popular destination. Some people even had checkins to the specific rides.
Music tracking
Music tracking was something else we had collected for a few years, and was a good opportunity to make each month more memorable.
In my experience, songs can often act as time machines, bringing you back to the moment when you were listening to them.
I figured if we listed your top-listened songs, some of them would have meaningful associations and be a lot more significant than just saying “that was the month you had 100,000 steps.”
Mapping
We had already built a lot of the mapping technology for the website and app, generating clusters and labeling the spots you visited. For those using Moves regularly, it highlighted the travel lines between them. These turned out really nice in print, after some modifications to improve the print resolution and coloring.
User feedback & custom events
The books are of course highly customized for each person’s data. In addition to showing the data, we also had some personalization options—like adding a dedication to the book or choice of accent color.
The book had a timeline section that showed an overview of what happened in 2016. Many details, like travel to other cities, could be figured out from the data that was stored.
We also had a way to add custom events to the timeline—especially for important life events, like getting married, having a baby or a new job. We reached out to customers to get their additions of custom events to the timeline, or whether they wanted to dedicate the book to anyone.
These would be represented in the JSON file and automatically show in the book.
Other users had more feedback about the individual pages in their draft and helped us track down and fix various bugs.
A few of the books were almost finished and pretty well tested, but many of the orders still had to be processed and generated. Though we had built a lot of tech to streamline the process and generate the pages, making a whole book was still quite a manual process at first, requiring a day or two of work to complete the curation.
After switching from mine to other people’s, we started running into a lot of data quality issues and missing pieces which slowed things down.
Gaps in data or untracked months caused a big challenge, and we had to figure out ways to get some people up from 30 or 40 pages to the full 64—since all the books are the same length. Most people had some great data hidden in their account, but their life needed to be analyzed to figure out what those events were and curate the contents to make sure those were reflected properly on the pages.
I started going through dozens of the first-draft PDFs on my computer, making notes of which parts were interesting and which pages needed to be removed for each person.
For example, some people didn’t have any running, so those associated pages didn’t apply—but perhaps they had cycling instead which could be shown. Others weren’t tracking their computer history through RescueTime and couldn’t get the mindmap and other associated pages. Travel was another important one, figuring out when someone took a trip and highlighting that as a custom page.
With the first 10 books done, I needed to just finish the rest and get the remaining drafts up to 64 pages. I locked myself in a hotel room in Florence for about a week, just emerging for quick pasta breaks or to go running. Most of the books felt about 90% done, but needed some final details to be really good. This was the time to add that final 10% which would hopefully take them from pretty good to delightful when they finally shipped.
After the final JSON structure was written, loading and exporting each book took about about 10 minutes—for loading all the pages and image assets, doing final QA checks, and saving the PDF.
Finally they were all finished, as a series of named and numbered PDF files on my computer. At the end of August, I sent the print shop all the PDFs, and a corresponding spreadsheet with all the delivery information for each one. Now all that was left to do was wait for them to be produced and shipped.
Shipping
This October, almost exactly a year after writing the first lines of code for the book, the books were finally completed & mailed to everyone who ordered.
With 80 prints in the limited edition, it took a bit longer than expected to prepare the designs for everyone. There were still a lot of improvements that could have been made, but we also wanted to actually ship them in a timely manner.
To manage the shipping process and make sure everyone got the proper book, we provided the printers with a spreadsheet of all the PDF files and their shipping addresses. Many of the orders went within the Bay Area, but some also went to other countries, with a couple to Canada and the Netherlands.
“Real artists ship” –Steve Jobs
A few days later, I was hitting refresh on dozens of different tracking numbers, watching their progress around the world as deliveries started happening.
Most of them went smoothly, but for a few of them I had to call UPS and manage the deliveries to make sure they arrived smoothly. Doing things in the real world is hard!
Delivering the wrong books to the wrong people was a scenario that kept me up at night, so we made sure to keep them individually labeled and tracked. Since they were all different on the insides but looked the same on the cover, it was very important to make sure everyone got their own book.
Since this was a limited edition that would never be created again, I made 10 extra of my own book, and they arrived in a box one Wednesday afternoon.
Though I had seen the designs, this was also the first time I was seeing the final book in person. 2016 felt like so long ago, and I had forgotten a lot of the things that were referenced in the book.
In the wild
The most fun part was seeing people’s reactions as they started to receive theirs, posting photos and showing them off to their friends.
Instagram Stories were also a popular spot, where people shared their unboxing videos and flipped through the pages for the first time.
One of the books was ordered by Nicholas Felton himself, continuing the Feltron Annual Reports tradition, but without requiring as much work.
Care Instructions
Most of the pages are self-explanatory and framed in the 3rd person, so they can easily be shared with someone to show what you did last year. The cover can show dirt or oil smudges though, so if you give it to someone we recommend making sure their hands are clean.
Order your own book!
The books are available for preorder on the site at the end of the year, in limited quantities.
If you’re interested in tracking your life and ordering a book next year, install the Gyroscope app!
