 I'm really happy to be here, thank you for having me. Ah, hacking your help with JavaScript. It was a title that made a lot of sense a couple months ago. So, you know, a couple years ago when I left the New York Times, people would come up to me with this question, and it used to kind of freak me out. And it was, so what do you do? I don't know if anyone else shares this feeling, but I felt like I put this face that Larry has on every time I started to kind of freak out. Like, I don't really know. When I was feeling really confident, I would say that I was a visual storyteller. This seemed to be the title everyone was using a while ago. Everyone at least was not a visual journalist. And when I was feeling really bummed out, when I was working on broken JavaScript and stuff that sucked, I said I fixed broken share tools, which happens more often than you might imagine in your newsroom. I kind of settled on this title, that I'm the design engineer. I enjoy both. I enjoy the act of design, the act of building and creating. This kind of fits, and I don't feel odd telling people this. I can't claim to be the only one who's come up with this title. So, after I left the New York Times, I was actually drawn to the West Coast to work on health and fitness data visualizations. I was really passionate about Iron Man and triathlons. I was crazy fit, exercising all the time. It didn't make sense to be in a newsroom anymore. So I went to work at Strava, where I worked with athlete data. And that was really fun, but then I had kids. So it made a lot more sense to go to Fitbit. Now, I love Fitbit. I make sounds like some concession, but it fit my life a little bit more closely. I wasn't able to go on 12-hour bike rides anymore, although I'd always dreamt I could one day. Actually, just recently, about a couple weeks ago, I joined Google's Life Science Division called Verily. And this professional angst that I had for a long time, it's still kind of there. I think we should all probably have a little professional angst. But I did find a domain that I'm really interested in. And that's health and fitness. And more specifically, just actual real, real health these days. And why health? Because every day we're getting a little bit closer to the end, guys. I mean, we're like... It's almost over. You never know, right? I think about this probably more than I should. And if you're a really optimistic personality, you might think this is a good thing, right? Like, live in the moment. Or if you're more like me, you might think, oh, jeez. So now I'm not so much a design engineer. I think I'm probably closer to a product engineer, a product designer. I build and design things. And from the design perspective, I'm in a much better position to steer the direction of a product, rather than just being a pure engineer or a pure designer. So how I would typically work is I would get a data set and I get a chance to play with it and figure out is there any sort of unique opportunity here? So why don't we start with one? I'll just walk through a quick project. Heart rate. Heart rate's a great data set. All kinds of interesting things happen to your heart. This is from a run that I would do around Lake Merritt all the time. It's like 45 minutes, 30 minutes. And here's the data from it. Pretty standard, nice little stream, heart rate data. You know, there's not that much variance there. Let me go a little bit closer. Take like a one-minute segment of that data. And we can see it's relatively straightforward. There's a data point every second. It's really evenly spaced. And of course, this has been smoothed. This has been filtered so that we can view it from really far out, right? Every designer always wants a smooth line. Inevitably, anytime you've ever faced a mock-up, you see a really smooth bezier when you're faced with data when it actually looks like garbage. So the interesting thing here is let's go a little bit closer. And with heart rate data, what we actually see is that it's really noisy. I mean, your heart doesn't beat every second. It's really inconsistent. It's jumping all over the place. So if we go right into that sample and instead of smoothing it and cleaning it up and we look at instantaneous heart rate, we can start to do some really interesting things. We're going to go deeper. Let's get out of the really far out view of what we always do with these retrospective graphs and go right into this heart rate data. And so this is kind of an interesting line. This is the same one-minute segment. But when you look at instantaneous heart rate, you can actually see something happening in your body. And so what we're actually seeing here is the beginning of an inhale at the bottom and the beginning of an exhale as it falls like that. And what this is is respiratory sinus arrhythmia. This is your heart and your breath getting in alignment. So I'm already using the words that you might associate with meditation. So let's design a meditation experience. So one of the magic things in JavaScript lately is the ability to communicate with devices. So I do this a fair bit. I've got this chance to stream from a polar heart rate strap, heart rate values, like an HRV, instantaneous heart rate. And I start rendering this out. The screen is like pushed to the side. Oh well. So this is just heart rate from a stored sample. I was going to try and do it live on the stage, but I just didn't have the confidence. It was definitely a mistake. So this is recorded heart rate values. So I don't really know how to breathe yet, you know, what the period should be like. So let's just get rid of that little moving thing on the bottom and give you some kind of guide. So when this thing contracts, we're exhaling. And when it's expanding, we're filling ourselves up with air so you can do this now if you want. Okay, so we've got a guide, right? We know what's happening. Inhale, exhale. So I'm going to pause it. And this is the visual. Why did everyone laugh? Oh, okay, right, yeah. This would be the part that would be really hard in a live demo, right? So what I want to do is show some kind of relationship. I don't want to draw the heart rate line. That's boring. So what I can do is I can add a little bit of an effect to this ring. And because we know the period at which this thing is expanding and contracting and we know what your heart is doing, we can see how aligned you are to it. So with a little bit of Perlin noise, a little bit of magic math and some smoothing, we can give you this kind of nice sort of organic feel around the rings. So I'll let that go for a little bit. Let's just let it go. So it's going to continue to contract and expand. And these rings are going to respond to the data. Oh, audio. Can we get audio? Well, there's audio in the background. The nice thing about playing with these great APIs now is that we can actually look at this data and we can start doing things with it. We can tell how closely aligned you are. We can fade audio in and out. Oh, that's too bad. So we can fade audio in and out with this expanding and contracting guide. And we can actually play little chimes if you're actually in alignment. Yeah, it seems like it is. It says it is. That's okay. We'll keep going. All right, so we continue. So this is a fairly simplistic visual metaphor to work with. It's not very precise and that's on purpose. So we can keep going and just explore a little bit. We want to go deeper, right? So let's keep going. These physical metaphors are really powerful. I'm borrowing some Mr. Dube code here, which I've massacred in the background somewhere. We can start playing again with flocking. A couple of people have probably already talked about flocking today. When we're actually talking about connecting to your body, charts and graphs aren't going to be all that helpful. What we do want to do is kind of maybe think about replicating real phenomena in nature. One of the reasons I like these concepts of the boys' algorithm, everyone kind of knows this, so I'll skip over it, is that physical metaphors are really forgiving. They're powerful because they're not precise, because you can connect with them and not actually think about if you're doing it right. The thing that I really like about this particular visualization is that we're feeding your data into it and the birds are actually responding to how aligned you are. They'll become a flock if you're really in alignment with this guide. But if you're not, it's still going to be kind of pretty. If you're right with respect to health, it's kind of a dangerous place to go. So we'll get rid of the birds. Good night. By now, you're probably wondering, where are the charts? Come on, where are the charts, guys? Well, charts are really poor allies for those looking to improve their health. There's this component of shame when it comes to health that is really strong and overrides rational thought. We talk about this aha moment all the time. Can we find that little nugget, that kernel of information that will get someone to go, ah, that's interesting? Well, what if that little point of interest is, oh, you're extremely obese? You know, or you're overweight, or you're dying a little bit more every day. Like, that's not an aha moment we want you to have very often, right? I mean, maybe for an intervention, you can do that once or twice, but that's going to wear out pretty quickly. I'm going to pick on BMI because it's a really easy one to pick on. But not everyone really knows it. You look at the language of weight where it's like obese, extremely obese, ideal, normal. I mean, these are clinical terms, theoretically, but is normal really a clinical term? I mean, that's not something that is going to encourage the kind of behavior that's going to get someone to improve their health. And so that's what I look for. I've made these mistakes myself. You know, I've designed these charts that I'm going to try to avoid showing too much of. At Fitbit, we designed this feature called cardiovascular fitness, which is essentially VO2 max, it's a measure of how fit you are. This guy's doing a VO2 max test. As you can see, he's enjoying it. That line hanging from the top, that is a harness because he's expected to run until he completely falls off. Like, this is a full-out effort. The mask is recording how much, the volume of oxygen that he's able to utilize. And so there's other ways of estimating VO2 max and we came up with a way. And so I designed some of these features. And the natural inclination as a former news person was to figure out, like, what does this number mean? You know, what's good? What's bad? I need to know these things. And so I designed this. I came up with these categories. We obviously did all the research and came up with these categories. We could define excellent. You know, your point of reference here is that Lance Armstrong is an 88. That's high. That's very good. But then I'm also creating these problems that I was trying to avoid, right? Like, fair and poor and average. I mean, average is okay. That's the majority of you are going to fall, but it doesn't feel very good. You are average. And, you know, for some people, a small percentage of people getting this number, if you're below, say, 30, high 20s, it means you need a new heart. And so is it really my... Is it really effective for me to be telling you these things? Is that the kind of information that you want to engage with on a regular basis? If you need a new heart, you probably already know it, right? We hope. Resting heart rate, another really interesting graph, or data point, a boring graph, typically. It's all relative with resting heart rate. We know that if you're above a certain number, you are in deep trouble. If you're over 100, that's an intervention. That's a clinical intervention, and we need to help you right away. But we also know that if you're close to that, or even above 80 for the vast majority of people, you're in big trouble. You're getting... Like, why are we going to try and help you once you've already arrived at your end state? Above 100 is literally... It's really hard to come back from something like that. You've got to lose a lot of weight. We want to go preventative, right? We want to create experiences that prevent you from getting all the way up to 100. So I guess where I've arrived with this kind of information and this process of transitioning from news to product design is that information rich graphics make for really compelling content as long as it's about someone else. If it's about another thing, if it's about another place, but if it's about you, well, that's a really different story. You know, it's funny. When I first arrived, I thought, you know, all I needed to do was to find that aha moment and deliver it unto the masses and it would encourage them to live a healthier life. I was a lot more egotistical then. But, you know, when we looked at this Pokemon Go phenomena, these people were doing a lot more exercise and it was never designed to encourage exercise. And so it was at this point that I started having these like existential angst moments where I was thinking, you know, what's visualization for? What are these charts for in the first place? So changing health outcomes really isn't about changing minds. I'm trying to communicate a really specific salient point. It's about changing behavior. It's about finding ways to almost deprogram you. I love this gift. I mean, I think I would use it as a background if I could. He's so vacant except for that moment where he looks up. He's like, oh. And in a way, in a way we need to become the scarecrow if we want to change the way we behave with respect to health at least. This is a challenge that came up at Fitbit with respect to sedentary time. We wanted to see if we could get people to move more. I'm sorry, but you guys have been sitting this entire time. Again, every second you're getting closer to the end. And it turns out that sedentary time, you know, even if you go and you run a half marathon every day, it's not about that. It's about prolonged periods of sedentary time. So you've got to move more often. This was shocking to me because I was running a lot of the time. So behaviorist psychologists talk about this a lot. This is a graph from Charles Duhigg's book about the habit loop. And so this is where we start talking about visualization, having an opportunity to be useful again. There's this notion of a habit loop and there's this trigger that will get you to go and do the routine. There's the routine itself, which can be bad. It can be good. And then the reward. The reward is that positive feedback. And it gets you to do it again once that trigger happens again. So I think that reward component of that loop is where visualization could potentially play a role. So looking again back to just getting like a raw data set. This is sedentary time data. I've created a little square for each block of sedentary or active time. I'm pretty sure that this is a messed up data set, so it's not capturing sleep correctly. But anyway, the point is, is we start exploring it and looking at potential ways to tie into that reward system. This is actually what I would consider a negative reward. This is, you know, it's an exploration, but it probably doesn't make sense as a positive reinforcement. Here we're actually plotting the longest time sitting. I really bum people out. I don't know. I love circles. I love playing with circles. And, you know, back to physical metaphors. We've got this blob and it's going to get bigger and bigger and smaller and smaller and shed weight as you move more. Now, of course, also a bummer because everyone ended up being a big blob, right? So moved away from that direction. And, you know, at the time when I was doing these experiments, everyone was doing force-directed graphs. I'm like, why not me? I'm still sort of connected to data visualization. And I started playing around with them, too. So this was a prototype, just this idea of, you know, as you go through the day you acquire sitting and moving blobs and the moving blobs are going to eat the little sitting ones, right? So you want to get as many of these little beasts as you can. So the feedback on this was that it was creepy. So we didn't do this. I was really pulling for this and it didn't come through. That's too bad. I thought this was kind of fun or kind of cool-looking, but I didn't think anyone would actually respond to it. This is plotting active time or looking at metabolism. And if you gained enough active minutes during an hour, we would give you a star. Now, at the time, you know, I was pretty skeptical that this would resonate with anybody. And actually, no one knew what the lines were, but they knew that it was good to get stars, right? So we started playing with stars. And it's funny the language that people have when you start giving them like a little nod, a little kudos, right? Like, how often in the day has someone come up to you and said, hey, you're doing great? You look good today. You did a good job. That never happens nearly enough. I wish it did. And so that's kind of the role that this visualization took on. And so a really important component, I think, to remember about designing in this habit-loop system is that, you know, it's not just this retrospective graph at the end. Like, no one's going to remember that the next day when they have to think about getting up. What we ended up coming up with was kind of a system where, you know, before the end of the hour of the day, if you actually did go for a walk and get enough steps to earn it, you get this little, you know, well done. And at the end of the day, we'd give you this arc. And that's a bit of green in the star. We have these retrospective graphs, too. Nobody looks at those. This is a beloved feature, but the only place people look for these sorts of things is on their wrist. And so I guess the takeaway there for me is that if you really want to affect change, you've got to become part of like a larger system. That information is not enough. So what about my health? Some people here know that I've got some health problems or health problems. I've got health things that I deal with. I'm diabetic. I'm epileptic. I had a heart ablation. I've got a couple of things going on. This was me when I was way fitter. Maybe that's why I put the photo in. Anyway, I'm trying to convey to you that I've had to wear a lot of gear. Insulin pump, heart ablation, or a halter strap to monitor my heart. I've got some other stuff going on in the background there. And so the reason I know that a lot of people don't take care of themselves is not only because there's copious data to support that, it's because I don't either. And I've got all the motivation and reason, too. I pulled this photo up because I think it's really funny. It's Valentine's Day a couple of years ago. My wife, Jen, took it. And the funny thing is that before this, about an hour, I was having a grand mal seizure. And here I am in bed, kind of recovered a little bit. Beside it, there's a glucose meter. And there's also this thing of chocolates. Like, what the hell am I doing? I've had a grand mal seizure. I'm diabetic. And maybe my first motivation after this traumatic event is to take care of myself. That's not really the way the human mind works. At least that's not how my mind works. And so here I am digging into a box of chocolates. I probably ate the whole thing. I don't remember. So over time, I started playing with my own data. I've got a continuous glucose meter. Where is it? Right here. And it broadcasts a new value to my phone every five minutes. And you can track. These are just really shitty data sketches, right? For a little context, if you don't know anything about diabetes, you want to stay in between those bars. If it's blue, it's too low. And if it's red, it's too high. And at the bottom here, I'm sort of coloring the day by the volatility of my sugar. So those are some good days. There's some really bad ones, too. And, you know, the funny thing is, is that it was really hard to work with this data because it's such a drag to look at how shitty you're doing. It's like a report card on your day, every day. This is the product that DEXCOM makes. It allows you to analyze days, look at trends. It's all probably done in D3. It looks very similar to what I was working on. I only discovered it recently. You know, there's some chaos in there, right? You know, maybe a couple of years ago, I would have thought, if we can just apply some machine learning magic, we can figure out something really interesting to say to Alan so he'll know what he needs to do. It doesn't really work like that. I mean, now that I'm past that point, I realize that, you know, I have 30-plus years of experience working with my health and I'm still making the same mistakes. I had a seizure on Thursday at work, and that was pretty traumatic, and it was because I did not sleep enough the night before. So, can we get away from these health report cards? They're a drag. Even if you're doing well, it's almost always going to be negative. It's not sustainable. So this is the chance for I get to make fun of my wife, who totally punked me by putting her name on my card. Somehow, I don't know how she did it, but this says Jennifer Daniel underneath it. And I guess what I'm trying to get at here is that, you know, I've been playing around this data. You can tap into these APIs with JavaScript. You can, like, scrape it. You can pull it down. And what I don't want is another just unopinated, voiceless graph. What I want is someone that I recognize, someone I care about, or who cares about me. I need a little bit of human touch here. You know, when Jen says these things to me, like, drink juice or just chill, I'm like, okay, usually. And what I'm trying to do is avoid that way up there and probably before that giant spike up, I've been dosing insulin like crazy because I see it skyrocketing up, right? But often what will happen is I'll overdo it and it'll end up crashing and going low again. So, you know, just chill. Driving a car while low, not a good idea. I've done it. I would like to avoid doing it. The problem with these data sets and especially with diabetes, you get desensitized. You don't actually believe the data that you're looking at. And you know, I should know better, right? But I have still done it regardless. So when I pull up a view like this on my phone, it's a lot more compelling. Now, you can also tap into the Google Images API and pull up some really grim stuff. They're really dark images. If you take Safe Search off the API, you can get some really brutal car crash images. It works, though. I mean, it works for me. It's got to work for you. For me, seeing a car that looks just like my Prius, you know, it's...it resonated. But I also want to feel good, right? Now, let me talk about that reward system. It's a shame that you cannot hear the audio, but this is a dancing doge. So if I'm doing really well, I get to see the dancing doge. It's really awesome. It's natural language. It's like, you know, it's super easy. You're doing so great. No lows. No big deal. And this is the kind of stuff that I want to hear. I don't want to just see another faceless graph. I don't want to see something boring. I want to see dancing dogs, right? So someone was talking recently, or tweeting a shiftman talk recently. And he said something that really stuck out to me. I'm going to borrow it for this talk. And it was that, you know, code is a means to an end. And at the end, it's always people. And that really resonated, because really, you know, we're not designing... We talk about getting familiar with our data, knowing our data. I've heard that so many times in so many conferences, we know the data. Like, that's great. We know the data. But we need to know the people that we're designing for, too. That's it. Thank you.