data.bythebay.io: Alan McLean, Designing Visualizations of Health that Resonate With Users
everybody thanks for coming today looks like there's a lot of sessions pretty busy I'm glad you came to mind so today I'm going to be talking a lot about how I've adapted a process that worked really well in news the New York Times for and that was specifically for more exploratory visualizations and how I've adapted it for product experiences specifically in mobile which is a really different beast when you're visualizing data so i work at Fitbit and you know just quickly i'm going to recap how I got in a data visualization in the first place I actually when I started out as a student I really wanted to get into 3d I really wanted to do you know I saw the matrix and I was like that's what I'm gonna do for the rest of my life so I had this realization though in school is that to actually do that you need to be able to draw so I went to art school study printmaking and drawing for a couple years and a couple years later I realized I actually can't draw this isn't actually always a skill you can just acquire by doing more of it so that was kind of painful so I left art school but I did discover one of the thing and that was that it's actually lot easier when math draws for you at least for me and I fell into this crazy world of data visualization and generative art by people like Jared Tarbell Casey raised Joshua Davis just really wild generative stuff and when I saw this work I was just like this was me I was like I'm gonna do this for the rest of my life this is my new rest of the life thing that I'm going to do I was totally hooked of course it's kind of tough to be an artist and a coder not a lot of work at least back then eventually I you know I stuck on storytelling and ended up with the new york times and i ended up in the graphics department in a really interesting time it was a 2007 election cycle so here was a new amazing to me here visualization and graphics had a really natural home alongside massive stories I was able to see graphic scary entire stories and deliver huge impact and this is where I became really deeply passionate about visualization as a narrative to land as a way to communicate and ultimately I think it really still drives the process that I use now when I'm direct designing products and the kinds of stories we were tell in graphics would really vary sometimes it was more of a data-driven view for elections tracking swing states sometimes it was tracking detainees held in Guantanamo other times it was breaking news stories like hurricane sandy in New York destroying homes on Long Island and you know behind all these are is actually really different time scales for the kind of work you would do like this would be maybe a day or two whereas previous graphics would be you know maybe a couple weeks or something like snowfall this was a long-form visual story that had sort of visualizations accompanying the text and this is a really different role for graphics really here is just more of a device that helped guide the the story and be clear I don't I don't think that pretty snow is a visualization that's just a film clip from it anyway ultimately that led me to this conclusion that works really is really important in in news and that is that you need to be able to write the headline first so what exactly do I mean by writing the headline I mean that's the text above the graphic it's a piece of the story that communicate without the graphic to itself it's what people are going to tweet what people are going to talk about the headline describes the content of the visual form you've arrived it without the headline is just a line graph but when they join forces they immediately lower the cognition barrier the headline really is the hook it pulls you in it sets expectations about what you're looking at it also allows you to get away with really beautiful stuff like this and most importantly it forces you to edit down and figure out what the story actually is first really forces you to have a perspective on what's important you know oftentimes you'll end up with a lot of data and a lot of different things you're trying to say in a graphic and there's this you know as a visualization designer you kind of want to cram it all often in one place but if you write the headline first you just sit you're able to decide and determine what's important first it also puts you in a really strong position when you walk up to your editor at least in a new setting with this incredible idea that you've been working on and how it's going to have a huge impact on everybody who sees it so this is still from All the President's Men so the classic journalism newsroom setting that mean old guy there on the right he's an editor reporters or he's they actually yeah he's the executive editor so you'd approach this editor with a glimmer in your eye all excited about this amazing idea this graphic that you just sprung from your brilliance and this person would look at your sketch take a really deep breath and he would say something like this why should I care why should I care about this crazy graphic you showing me and he's not just referring to himself he's referring to a reader's perspective why should I stop what I'm doing and actually look at this thing so I mean really what I'm trying to say here is that editors are professional skeptics and I'd encouraged the data visualization designers to take up that critical perspective to become a skeptic about what you're showing people the editor is demanding because he knows a reader's patience is limited he grinds down visual flourish because even though he knows readers may appreciate it and we appreciate pretty looking graphics he understands the deeper moments of clarity insight resonate a lot longer lots of people saw this is especially I think communicates my point this was a visualization of was in pops I about Hiroshi manipular explosions and when you look at what the artist said he about this work and it became a little controversial at a time of course and he said I wanted to work the work to highlight not just the dropping of the atom bomb but the factors leading up to the event the event itself and the countries involved in the process so for me I don't see that there but I do see a really beautiful thing I might print on a band t-shirt and don't get me wrong aesthetically I love it but in some ways it's really insensitive to the topic and it doesn't really communicate a whole lot a really different take from the times from a long long time ago this is putting the combat deaths from three different conflicts in perspective world war two Vietnam Iraq this came out right during the time when there was just a lot of protest and anger about what was happening in Iraq so this graphic is the product of thinking deeply about context in relationships it's about writing the headline first it's not about visual forms this is a bar chart but it's a lot more powerful I I would argue and it's the resolve result of arriving at an opinion about what matters an opinion not necessarily in a news context opinion is a little bit troublesome but here I'm talking about opinion like what is the design perspective on what people want to know about this so really it's not enough to just show a vis and expect someone to get it or to care you have to have a really potent message and an opinion about what's interesting and so typically in a new setting the way you would do that is you would follow pretty typical date of this process and you know when I say typical I mean take a static data set analyze it sketch some forms refine and then publish out into the world gather the tweets and bask in its glory so for an example of how I when I first left news and I came into more of a product role at strava this was two or three years ago I'm going to use an example from race results from marathon this is a really good candidate for visualization because he knows a lot of data and when there's a lot of it and it's pretty granular you can probably do something pretty interesting with it of course we've got finished times profile info details second-by-second GPS data so i think there's potentially a candidate for an interesting product so we do sort of the obligatory analysis here take a really wide angle lens and make a basic histogram we're looking at finish times I see these kind of interesting spikes you know around the hour and half hour marks so to me that kind of looks like people have cut off times that they're shooting for that's kind of interesting so then maybe we keep we look at pace let's look at pace per mile this is every runner that I was able to gather data from from the Boston Marathon see these sort of undulating waves kind of fun also see this nice little separation so to me that says they're getting more tired at the end this will see these like big humps like it seems like everyone kind of getting is contoured the entire race which is kind of fun and when we actually look at the elevation profile you see the Heartbreak Hill is where that biggest undulation is but pace is really tough to work on there's a lot of variability it's hard to describe change exactly because you were talking about typically finished who finished first so let's try a little bump map or a bump chart sorting by rank obviously this is like totally you can't read it but I kind of see the beginnings of something interesting with these little dives up and down so let's highlight the top third we see all the fast people like pretty consistent right see these little outliers that's kind of fun owner what's going on there pretty conservative start maybe they went to the bathroom then we highlight the bottom third and you just see all this separation and I'm Mike Wallace that's kind of cool so you know this point in an explanatory or like a new setting we've got kind of enough to start experimenting and sketching and I don't exactly have a narrative or a story here but what I do have is kind of the beginnings enough to get sketching and started so i end up with something like this this is a product of like two or three days of sketching with that data you can select the people at the top for what you know in that histogram when they finished takes the runners and then i can compare their rank over time i'm not sure if you can see it because it's so blown out there so there's kind of like a compelling potential for an interesting idea here i can compare how i finished with the people around me like did they come up from behind or did were they crashing and burning i mean what happened the unfortunate realization i had after doing this product project was that explored to our data visualization is for me as the developer designer it's not really for your users it isn't scale the product experiences because it doesn't put the users needs first it makes them do a ton of work and we really need to avoid that especially when we're talking about a mobile context so we're going to tweak that typical date of this process a little bit more and we're going to talk about adding research and test user testing to the front and the end of it so a Fitbit what we're going to do is we're going to analyze this data come up some sketches and then ultimately we're going to test that opinion with respective groups to evaluate our hypothesis it's tricky designing visualizations on mobile we're dealing with a really different kind of reader if you think about how you use your phone now you've been conditioned for speed for utility not depth mobile is just all about getting in getting out as fast as possible you look at Twitter and Facebook you can jump between those abs in less than a minute and feel like you got something so that's kind of the reality that you're dealing with you're visualizing visualizing on mobile and then we talk about Fitbit talk about screens like this well now there's there's no evidence there's no deep deep analysis about what we're dealing with here it's entirely utility so you know if we design a data rich experience will start with the Fitbit at least we start with a real data first and decide from there what comparisons we want to make or trends we want to surface and the reason we start with the data first is because we're kind of dealing with this problem problem I mean I'm a designer but I would call the designer ideal and that typically looks like this here is a heart rate chart simple little line graph this is the thing that got signed off on before we put it in the app I didn't do this but I mean I think this is typically we're going to do if you give a designer sketch or Photoshop and I say hey do have data visualization design they're going to end up with this beautiful line like this it's going to actually look like this it's one look terrible and so my job is a data visualization designers to get into with the data first and try to make mistakes and inform the design sooner rather than later so a good example of where we did that was this new product called sedentary time if it bit the goals around sedentary time where was that it had to work on Fitbit devices so whatever form or abstraction we come up with has to work on a potentially black-and-white display needs to be really really positive fitbit's all about you know motivating you sadly with sedentary time like you're all sitting stationary you're all dying slowly in front of me so we want to celebrate success to get you out of your chair so we get sketching we get we've got the algorithm basically worked out we start sketching with some of this data just to see what we've got along X I've got minutes on why I've got hours and its color coded by sedentary and active time so i get i'm guessing that this is me asleep this is me awake so that's just like a basic like summer east at version of visualizing some data but is super boring right so we started playing around the idea of just visualizing sedentary time taking out all the active time so this is cumulative amount periods of sitting still it's kind of interesting it's also super people felt it was super negative what I should have prefaced this with is that we gather all Fitbit users data in the company or at least those it agreed to and we subject them to these terrible design sketches on a regular basis so if we're designing a product any work and Fitbit you're getting emails and designs like this in your inbox and people coming around her hanging you like me to ask tip like to tell me what you think about this so people felt this was kind of negative they didn't want to know how long they hadn't been doing anything they wanted to know when they had been doing something metabolism another sort of proxy into active or so sedentary time so we had this notion that if you were active enough during an hour maybe maybe not consecutive minutes but enough during the course of an hour maybe we give you a star so it's kind of cool i called this joy division chart kind of reminded me of the album cover but it's also pretty an analytical and kind of boring so on this idea about metabolism we start playing around with like hales take all these periods of time turn the minute little bubbles and show visualize them all like this will work fairly well on it on a mobile screen highlight like active periods and then if we want to get kind of have a little bit more fun with it what if these active moments sort of ate up all these the sedentary moments so make them a little hungry make him a little crazy so when I walked around and ask people what they thought about this they were like it's creepy I am scared of those bubbles and I don't want I don't want to see this on a regular basis so we scrapped that I was like I was like this is but this is it this is going to be my mark on the Fitbit design experience but no I didn't happen so we focus back on time and positivity back on stars everyone loves getting stars circle is not so great obviously that we're doing with variable hours in the day so we went with just half circle and so at the end of this way what I'm not actually showing is the many google forms and questions and emails that I'm sending people but in order to find out what actually resonates with people we've got to test it we've got to ask them how they feel and what they felt before and after these are the findings from testing and this is the ultimate end result it's not like crazy complicated visualization I know you get many of the people here used to dealing with huge data sets and we're dealing with huge data sets but we're not trying to tell users that we are and you know a mobile we're dealing with abstractions since we have so few pixels I think the one failing of this form is that it doesn't work so great in this kind of format so you know in some ways we have to adapt and hopefully we can iterate on it anyway that's that's what I've got for visualizing help there what you're showing on the screen a lot goes right yeah so we're d3 a web page oh I'm sorry so the question was these examples i was showing these data sketches don't maybe seem as much like data sketches there look like a lot of work is that basically work right right so I think in this case you have to embrace the ugliness and have to embrace the fact that the code that you write for these visualizations are complete throw away I mean you're not trying to scale or about complex abstractions or systems these are sketches in the truest form like paper on napkin embarrassing don't let anyone ever see that you wrote this stuff just JavaScript and HTML so per hour 250 steps would be considered at least oh I see those data sketches I usually wouldn't spend more than a couple days per day to sketch and so that I think the entire like product as a whole a couple months to maybe like three quarters of a year sure oh ok