The Making of UP Coffee

I’d like to start off by thanking Jawbone for allowing us to publish this piece on our experience collaborating with them. Obviously, all the opinions within it are those of Product Club and if we’ve made any errors, they’re entirely our responsibility.

Over the past year, while we’ve been sketching and prototyping our own projects, Product Club has taken on occasional bits of consulting or prototyping work to pay the bills. And we’ve been extremely lucky — because there are only two of us, because our overheads are low and because we’ve wanted to reserve a lot of time for our own work—we’ve had the luxury of being able to pick and choose with whom we work.

But when Aza Raskin of Jawbone Labs contacted us with an idea to develop a lightweight health app to support and develop the UP ecosystem, we leapt at the chance. It seemed like a great opportunity to do a fun, useful project with an interesting and sexy hook — working with people that we like spending time with. And, in fact, that’s exactly what it turned out to be — a lovely piece of collaboration with lots of exploratory play.

We (Jawbone Labs and Product Club collectively) built the project from end to end in just a few months, with Product Club’s engagement broken up into three sections of work, each piece resulting in a completely functional iOS app. The last piece of work brought us to the launch of UP Coffee roughly a week ago and the pleasingly enthusiastic response it’s got from users all over the world. We couldn’t be prouder of the creative process that brought us to this point, and we’re really proud of the app. If you haven’t already, you should download it here: UP Coffee on the App Store.

The first pass of the app started back towards the middle of last year, when we had our initial brainstorms with the Jawbone Labs team.

At the time we were discussing a range of interesting health-related ideas — not just caffeine tracking. Before we got stuck into all the various things we could track we created a few nice constraints for ourselves. Often with projects like this it’s a question of bringing an idea into focus, moving from a very general rough concept or desire to something sharp and clear. We started by setting some ground-rules for the app we were trying to make. It would be focused on health, it should complement rather than compete with the UP app and while it would have value to people who already had an UP band it should also work for people who hadn’t yet experimented with fitness apps or devices. And we stuck hundreds of post-its onto whiteboards detailing all of the various things that people might want to track or explore about their health or their lives. In the process we rapidly rated every idea by some nice simple criteria — like whether the thing we were planning to track was mainstream or niche, ‘medical’ or ‘lifestyle’ and how well understood it was by normal people.

Jawbone had already been exploring some interesting ideas around caffeine through their internal hack days, and that resonated with all of us, so after a couple of days of exploration we decided on a very simple, nice, clear idea that stayed with us as our guiding principle through the rest of the design and development process. We were going to develop a classy, simple and easy to use caffeine tracking app that not only reflected back what you’d consumed, but also helped you understand what effects caffeine had on your body and sleep.

We also decided that the app should have a clear life-cycle to it, that it should be a completely accomplishable journey that people could take, with a beginning, middle and end—like an experiment you could perform on yourself. Over a month you’d learn something about yourself and your body, and—if you wanted to—you could use that information to change the way you consumed caffeine.

Finally we decided we wanted it to be fun—for the project to have some extra little piece of play or thrill to it that might bring a little bit of delight into what could otherwise feel like quite a medical process. Some of these health products can feel a bit like filling in an Excel spreadsheet — and as we all know science tells us filling in Excel spreadsheets is the least possible fun you can have with a computer. We really wanted to fight that feeling that learning about yourself might be tedious, ‘worthy’ or work and replace it with an interaction that you might look forward to.

By the end of day two we had a very simple idea of how we might add in some fun into the app — a new interaction that made the app something you could play with. It started off being a physics-based little interaction with little balls that got more jittery and responsive in response to what you’d consumed. It wasn’t what we ended up with, but it pointed in an interesting direction:

Before we left we had two final chats — firstly with one of Jawbone’s medical experts who would be researching scientific papers on caffeine consumption, and then with their data team. Our collective hope was that they might be able to take some of the information we were going to collect, work with it, and then return it to users in the form of a genuinely useful insight into their health and behaviour. The data team’s involvement would prove to be really important later in the production process, and would really push the app to another level.

Product Club’s main responsibility through this project was to take the concept into a functioning app, circulating design and technical sketches for feedback and ideas from Jawbone along the way. Matt and I have have a highly collaborative way of building that comes of having worked with each other a thousand times over the last decade. We normally start off by throwing an idea around for a while until we feel like we understand its heart and until some kind of rough structure has emerged. We identify some of the idea’s particular technical and design challenges, then—while I go and start firming up the navigation and the visual direction—Matt starts delving into the more idiosyncratic areas or challenges of the engineering side. Often he’ll come back with illustrative bits of code and sample features that push me further on the design side by showing me what’s possible. I’m there to represent the users. He’s there to represent the space of the possible. It works really well for us.

The navigation was one of our first areas of play. We wanted the app to feel light and non-threatening and we felt like tab-based navigation segregated things too aggressively. We wanted each section to be a little nugget of information—almost an infographic—each one giving you a different perspective on your health and caffeine consumption. In the end we got inspired by iOS7's task switcher and built a navigation approach that let you sweep horizontally between the different views. This felt much lighter and nicer and people responded really well to it. We built it so that the screens and the navigation parallax pleasingly with each other and you can swipe between screens or tap on icons in the tab bar to move around. If you want to get back to ‘now’ in sub part of the app, you can also tap the nav icon again to zoom back to it.

Next was the visual style. The two teams had decided that the look of the app didn’t need to be completely in tune with the UP app — in fact, a different visual style for Jawbone Labs projects would hopefully mean that no one would ever get UP Coffee confused with its much larger and more significant older sibling. At the time iOS7 had not yet been released and it felt like an opportunity to push a little into uncharted territory. Collectively we oriented ourselves towards something that felt like a merging of iOS7's flat color and Jawbone’s own bright packaging and product design.

We had an idea that whatever the physics toy that we were going to integrate into the app would contain something that felt like a coffee-like liquid, coffee beans or cappuccino froth. The iOS7 style led us towards a simplified abstracted feel, so to make that substance feel like coffee, we expected that we were going to be working with a lot of brown. We needed another colour that contrasted pleasingly with that brown and felt fresh and friendly, and centred in on a nice bright shade of blue that was close to one of Jawbone’s standard colours.

Our core visualisation of your coffee consumption was coming along too. Matt had started exploring integrating physics engines into iOS7 and was generating various different ways to visualise how much caffeine someone currently had in their system. We played with lots of different models, gradually moving towards the metaphor of a flask from a 1950s laboratory. As you consumed caffeine, coffee-coloured beans would fall into the flask. As time passed, the beans slowly disappeared. The more full the flask, the more the beans would jiggle and jitter against one another.

We played extensively with bean size, shape, weight and friction — and as we did so it completely changed how the app felt in your hand. When the beans were heavier and more friction-ful, it felt like things were scraping against each other. On the other hand, if they were too light and smooth, things stopped feeling real. We finally settled on numbers that made the beans feel a bit like a liquid, but with a slightly lighter gravity than normal. We knew we were on to something when we started showing the screen to people in meetings. We couldn’t get the phone back from them — people would be lost playing with the beans. Even now, one of the things I love doing when I’m stressed is open the app and swirl the beans around. They make lovely little smooth crashing waves I find insanely satisfying to play with.

While the flask screen stayed pretty consistent throughout the project, other screens came and went or changed dramatically. At the end of our first pass, we had a screen with three analogue clocks on it. It was designed to show people significant times in their day. If you tapped on each dial, a small piece of text in the centre would switch between showing you AM/PM or a digital time display. Visually it was one of my favorite screens, but it turned out that people found it confusing. It was the first to go when we started our second piece of work on the project.

The graph screen that plotted your caffeine levels over time originally scrolled up and down rather than left to right. We would see people turning the phone around trying to work out the best way to read it. We all recognised this as a warning sign of its complexity but we couldn’t think of a way to make it easier to understand. Eventually Jawbone pushed us to find a horizontal solution that worked with the parallax navigation and after we showed them several options, we all agreed that one particular option seemed more practical and pleasing. We’re pretty happy with how it turned out.

Another big change was the sleep screen. The challenge here was to explain how caffeine during the day might impact on the hours of sleep that you might get that night. We were looking for ways to present users with data in such a way that they could draw their own conclusions about the impact it might have on them. Our first pass was fairly flat: a vertically scrolling graph showing caffeine on the left and sleep on the right. It suffered from the same problems as the normal graph screen — hard to navigate, hard to parse, and scrolling vertically. So we decided that we needed to try again.

Considerable research followed on good ways to visualise correlations between two variables, but none of them felt right. The ones that were most powerful did not feel accessible or clear. In particular we explored scatter plots (see some examples) and grid-based heatmaps (the version in particular that seemed most potentially accurate was the Correlogram), but we’d said early on that we didn’t want the app to feel medical and these had an immediately off-putting quality.

In the end we decided to sacrifice full exposure to the data for something slightly more digestible — a screen that chunked your coffee consumption into archetypical days and then showed you your average sleep for each type. We worked to support the premise with little design elements that clarified or accentuated the message. A few little coffee cups on each line of the visualisation gave people a sense of what we considered ‘a little’ or ‘a lot’ of coffee and helped us cement again the relationship between particular popular drinks and caffeine consumption. And because people are always tapping elements on iPhone screens to see if they’d do something, we made it so that when you tap on a particular metric, it switched to show you another way of understanding it. The goal, as ever through the app, was to help people not only understand how caffeine affects them, but also to get a greater sense of caffeine in general.

This description makes it sound simple, but—like pretty much every screen in the app—we made around fifty design variants large and small for the sleep screen before we settled on the one we liked most…

We also added two new screens. The ‘Did You Know’ section partly came from our collective sense that we’d learned loads of fascinating stuff about caffeine metabolism that we really wanted to share with people. For example, we’d learned that women generally metabolize caffeine more quickly than men. We’d also seen a study that said that taking the birth control pill changed that dramatically, slowing caffeine metabolism by up to a third. We found all this stuff fascinating and wanted to share it more widely.

One of our beta testers inside Jawbone had also suggested that they wanted a bit more incentive to come back to the app and we all agreed a daily fact might contribute to keeping the app in the front of people’s minds.

But the biggest new contribution came from the Jawbone data team. They’d had been working out interesting ways to make sense of all the caffeine information that the app was collecting.

The first pass of this functionality had required people to wait for nearly a full month to get any pay-off. But the second pass became our ‘experiments’ section with smaller, mission-like projects that could be completed in a few days. These experiments now not only take in data about what caffeine you’ve consumed, but also pull in information from your UP band (if you have one) about how you’re sleeping. Every few days, if you stick with it, these experiments can give you a little extra nugget of insight into your body and life. And they made web pages for every one of your results pages so that—should you want to—you can share them over the web or SMS or social media, letting you compare your results with your friends or family.

The work those guys have been doing has been extraordinary and we think you’re going to love those reports when you see them.

The app that we have today looks pretty similar to the one we had at the beginning of 2014, but of course the initial building is only half the battle. The final few weeks have been a haze of building, testing and refinements involving almost every part of Jawbone.

The whole web presence has been built from scratch, polished and refined by Jawbone Labs and the wider Jawbone design and front-end engineering teams, with the whole process being helped by all of the support functions inside organisations that don’t normally get much love in product announcements. Large companies are complex beasts with lots of responsibilities and necessary oversight. Without the support of Jawbone’s legal, IP and marketing teams, launching the app would have been almost impossibly complex.

Meanwhile Jawbone’s QA teams have attacked the app from every angle while loads of other staff have played with it, looking for things that might be confusing, broken or poorly explained. Feedback and enthusiasm has come in from every part of the company. Bugs have been spotted, collated by incredibly efficient product people, before being fixed and double-checked. The app has been and continues to be tweaked and improved on a daily basis — now in response to comments, feature requests and (occasional) problems from people out there using it.

All in all the whole creative enterprise has been incredibly efficient, pleasing and a true collaboration every step of the way. We’ve had a blast.

So here we are, six months after we first started talking about the app and UP Coffee is in the App Store for you all to see and play with. We’ve all had a great, creative, productive time and we’re very proud of the work that we’ve done together.

So far the response has been amazingly positive, but in the end we made it for you guys and your reaction is really the only thing that matters. So try it out and let us know what you think. We’re looking forward to hearing from you.

UP Coffee is available from the Apple App Store. You can find out more information about it on Jawbone’s UP Coffee site. It works particularly well with the Jawbone UP24. Why not buy one today!

Product Club is a new product development and invention company based in San Francisco founded by Tom Coates and Matt Biddulph. In addition to our occasional creative consulting and prototyping work, we’re currently working on a really exciting start-up project that we’re not quite ready to tell you about.