0:00:17.280,0:00:18.840 JOHN ATHAYDE: All right. Thank you guys for[br]coming. 0:00:18.840,0:00:20.480 My name is John Athayde and 0:00:20.480,0:00:23.419 I'm gonna talk today about working better[br]together, 0:00:23.419,0:00:25.570 mixing lean UX with Agile development 0:00:25.570,0:00:27.380 and user-centered design. 0:00:27.380,0:00:29.539 Last time I was in Chicago to do 0:00:29.539,0:00:31.189 Rails stuff was in 2006. 0:00:31.189,0:00:33.960 That guy right there. A little less scruffy. 0:00:33.960,0:00:34.940 But somebody pointed out 0:00:34.940,0:00:35.900 last night that this looks like 0:00:35.900,0:00:40.519 it's the crew for Obi and Courtney's band[br]hanging out. 0:00:40.519,0:00:43.170 I come from an architecture background of[br]the building 0:00:43.170,0:00:46.190 variety, and a lot of the stuff I'm gonna 0:00:46.190,0:00:48.789 show you today comes from a couple different[br]places. 0:00:48.789,0:00:50.989 One is from my freelance work over the last 0:00:50.989,0:00:54.359 fifteen years, which is meticulous. A lot[br]of this 0:00:54.359,0:00:56.680 stuff is from the almost three years I spent 0:00:56.680,0:00:59.829 at LivingSocial heading up the internal UI[br]for all 0:00:59.829,0:01:02.519 of our internal apps. And then recently I've[br]been 0:01:02.519,0:01:04.319 doing work at a new start up called Cargo 0:01:04.319,0:01:07.320 Sense with Rich Kilmer and Bruce Williams. 0:01:07.320,0:01:09.820 I also wrote this book. It's a little out 0:01:09.820,0:01:12.170 of date, but there's some good stuff in it, 0:01:12.170,0:01:15.369 and Prag Prog has a forty percent off ticket 0:01:15.369,0:01:17.259 right now if you guys are interested in any 0:01:17.259,0:01:20.250 Rails or Ruby ebooks. 0:01:20.250,0:01:26.069 So. Experience matters. Experience is really[br]anything that you, 0:01:26.069,0:01:27.979 as a user, are going to see when you're 0:01:27.979,0:01:31.200 working with a tool, a book, anything. I mean, 0:01:31.200,0:01:33.700 go back to 1983, these were our two main 0:01:33.700,0:01:37.020 experiences that we had. So it's changed a[br]lot 0:01:37.020,0:01:40.319 since then, but it's still something that[br]you can 0:01:40.319,0:01:42.110 think of. There's a very big difference in[br]how 0:01:42.110,0:01:45.229 I'm gonna work with these two different platforms. 0:01:45.229,0:01:47.470 Experience is also something you see in everyday[br]life. 0:01:47.470,0:01:50.090 The one on the left, just not working as 0:01:50.090,0:01:52.420 well as the two on the right. You're gonna 0:01:52.420,0:01:55.569 turn it upside. What's going on? Think about[br]this, 0:01:55.569,0:01:57.259 too. You ever go to an ATM and you 0:01:57.259,0:01:59.759 just cannot get the sun angle right, and you 0:01:59.759,0:02:04.099 can't see the screen? That's a bad experience.[br]Or 0:02:04.099,0:02:08.190 doors. The handle would imply pull. Horizontal[br]bar kind 0:02:08.190,0:02:10.800 of implies push. But here, you have to put 0:02:10.800,0:02:11.910 a label on it. 0:02:11.910,0:02:13.580 Now, you can apply this to a lot of 0:02:13.580,0:02:16.890 things you've probably worked on, where it's[br]so unintelligible 0:02:16.890,0:02:19.870 that it has to be overly labeled and overly 0:02:19.870,0:02:22.790 documented. Because the experience is not[br]clear. 0:02:22.790,0:02:26.230 And this is always a fun one, you know. 0:02:26.230,0:02:30.379 But why do exterior doors go out? Well, Chicago, 0:02:30.379,0:02:36.000 Illinois, in fact, Iroquois Theater. 1903,[br]600 people died 0:02:36.000,0:02:37.950 in a fire, because they tried to get out 0:02:37.950,0:02:41.109 of a building. The doors opened in, and they 0:02:41.109,0:02:43.390 crammed up against the doors and couldn't[br]get out. 0:02:43.390,0:02:45.959 We're gonna talk about that here in a little 0:02:45.959,0:02:48.319 bit. But that's something to think about why[br]those 0:02:48.319,0:02:51.310 doors work that way. Why is that experience[br]that 0:02:51.310,0:02:52.209 way. 0:02:52.209,0:02:55.349 So, when we talk about UX, what is UX? 0:02:55.349,0:02:57.870 We're gonna define that real quick. It was[br]created 0:02:57.870,0:03:01.790 in the early 1980s usability broadly, to refer[br]to 0:03:01.790,0:03:04.909 what was a number of vague and subjective[br]attributes 0:03:04.909,0:03:09.129 of a product. And it's user-friendly characteristics[br]is what 0:03:09.129,0:03:11.249 they call them. 0:03:11.249,0:03:13.840 And this marked the beginning of a shift,[br]from 0:03:13.840,0:03:16.629 a phase that we're focused on the features[br]into 0:03:16.629,0:03:18.760 a term that was becoming more concerned with[br]the 0:03:18.760,0:03:22.120 various facets of how people worked with those[br]features. 0:03:22.120,0:03:26.450 So the International Standards Organization,[br]ISO, this is in 0:03:26.450,0:03:30.439 ISO 9241, is that usability is the effectiveness,[br]efficiency 0:03:30.439,0:03:34.139 and satisfaction with which specified users[br]achieve specified goals 0:03:34.139,0:03:36.290 in particular environments. 0:03:36.290,0:03:39.709 Pretty dry. Pretty generic. Jakob Nielsen[br]gives us a 0:03:39.709,0:03:41.879 nice little five point thing. You can love[br]or 0:03:41.879,0:03:44.189 hate Jakob Nielsen, but he is kind of one 0:03:44.189,0:03:47.670 of the big human factors guys of software[br]development. 0:03:47.670,0:03:50.620 So he says that it is the promptness with 0:03:50.620,0:03:54.219 which users learn something, the efficiency[br]that they attain 0:03:54.219,0:03:56.639 making use of it, how easy it is for 0:03:56.639,0:04:00.200 them to remember how to use it, how error-prone 0:04:00.200,0:04:03.269 that is, and then the level of satisfaction[br]they 0:04:03.269,0:04:06.150 attain from using the system. 0:04:06.150,0:04:07.879 And so it comes back to, a lot of 0:04:07.879,0:04:10.019 these things are applied because they're the[br]experience of 0:04:10.019,0:04:16.209 many years. And many mistakes. 0:04:16.209,0:04:19.399 So going back to the Iroquois Theater fire,[br]architectural 0:04:19.399,0:04:22.540 building codes changed a lot in the early[br]1900s. 0:04:22.540,0:04:25.500 They actually started to come into, really[br]started to 0:04:25.500,0:04:28.200 be happening between the San Francisco earthquake[br]and events 0:04:28.200,0:04:30.880 like this. You really started to see them[br]say, 0:04:30.880,0:04:32.880 you know, we should say that you legally have 0:04:32.880,0:04:34.880 to build a building this way. So now you'll 0:04:34.880,0:04:37.760 notice any commercial building, the exterior[br]door will open 0:04:37.760,0:04:40.410 out, or it will break away. 0:04:40.410,0:04:43.500 So, you'll notice on revolving doors that[br]you can 0:04:43.500,0:04:45.190 actually kind of break away. Like, if you[br]cram 0:04:45.190,0:04:47.290 into a revolving door, those doors will give[br]with 0:04:47.290,0:04:49.100 enough force. 0:04:49.100,0:04:51.510 So that's, you know, over time we've learned[br]these 0:04:51.510,0:04:53.640 things. We've applied them, and they make[br]the experience 0:04:53.640,0:04:56.430 better and safer for everybody. 0:04:56.430,0:05:00.570 So, let's get into looking at designs specifically[br]around 0:05:00.570,0:05:03.540 software. So there's various processes and[br]methods, and I 0:05:03.540,0:05:05.060 want to kind of compare and contrast some[br]stuff 0:05:05.060,0:05:07.590 for you real quick. The first is waterfall,[br]which 0:05:07.590,0:05:09.890 I'm sure most of you have heard or experienced 0:05:09.890,0:05:15.540 at some point. Large deliverable documents,[br]excessive documentation. 0:05:15.540,0:05:17.980 But this comes from projects in engineering,[br]like, in 0:05:17.980,0:05:21.220 traditional engineering and architecture,[br]where the design is finished 0:05:21.220,0:05:27.310 and approved before you start building it.[br]And, this 0:05:27.310,0:05:31.060 is something from a project management tool,[br]like Microsoft 0:05:31.060,0:05:33.710 Project or something like that. It's called[br]a Gant 0:05:33.710,0:05:36.310 chart. The red is the critical path. Things[br]that 0:05:36.310,0:05:38.560 have to happen in a certain order and have 0:05:38.560,0:05:40.270 to be finished before the next step can be 0:05:40.270,0:05:40.790 completed. 0:05:40.790,0:05:43.440 Now, any delay in there can really mess up 0:05:43.440,0:05:47.580 the whole timeline of a project. And, this[br]is 0:05:47.580,0:05:50.960 what typical waterfall processes look like. 0:05:50.960,0:05:53.340 You define the problem, you come up with a 0:05:53.340,0:05:55.680 design that solves that problem, then you[br]build that 0:05:55.680,0:05:58.590 design, you test that, and you deploy it.[br]And 0:05:58.590,0:06:01.120 this is usually the entire enchilada. We are[br]not 0:06:01.120,0:06:04.280 even gonna go into like, this is, you, shrink 0:06:04.280,0:06:06.160 this down really small and it is kind of, 0:06:06.160,0:06:08.360 in a way, agile, but we're gonna not even 0:06:08.360,0:06:10.270 bother talking to engineers. We're going to[br]go spend 0:06:10.270,0:06:12.520 six months writing up requirements. 0:06:12.520,0:06:14.460 Then the design engineer, the design guys[br]are gonna 0:06:14.460,0:06:16.250 go for three months and work up all these 0:06:16.250,0:06:18.460 designs and have a 300 page document that[br]they 0:06:18.460,0:06:21.940 turn over to engineering, who then builds[br]that. 0:06:21.940,0:06:24.540 So, you know, that's just one of these little 0:06:24.540,0:06:26.690 things here. And that can take a long time. 0:06:26.690,0:06:29.230 And while you're doing this work, the business[br]and 0:06:29.230,0:06:32.930 the world is changing. So the likelihood of[br]you 0:06:32.930,0:06:36.210 building the wrong thing and being two years[br]behind 0:06:36.210,0:06:39.130 the power curve in this process is high. And 0:06:39.130,0:06:40.920 it all comes down to, this was all about 0:06:40.920,0:06:41.160 deliverables. 0:06:41.160,0:06:42.290 So it has, if I was running a design 0:06:42.290,0:06:45.220 agency, I want to maximize the deliverables,[br]because that's 0:06:45.220,0:06:47.050 maximizing the amount of time I'm gonna be[br]spending 0:06:47.050,0:06:52.300 working on building this stuff for people.[br]Wire frames, 0:06:52.300,0:06:54.560 big, you'll see these documents where they[br]have the 0:06:54.560,0:06:57.050 whole screen laid out and everything is specified[br]by 0:06:57.050,0:06:59.320 pixel, and instead they could have just made[br]a 0:06:59.320,0:07:01.990 prototype and, and had been testing it already.[br]Instead 0:07:01.990,0:07:03.750 of having to say, well, this is twenty-one[br]pixel 0:07:03.750,0:07:07.020 Verdana. No. Go. Just put in CSS. Build it. 0:07:07.020,0:07:07.860 Go. 0:07:07.860,0:07:11.730 You'll hear people fight against that they're[br]not waterfall, 0:07:11.730,0:07:14.570 and the developers will say, hey, we're agile.[br]Well, 0:07:14.570,0:07:17.500 the developers may be agile, but each cylo[br]is 0:07:17.500,0:07:19.440 still throwing things over the wall, or over[br]the 0:07:19.440,0:07:21.270 trenches as some people will call it. 0:07:21.270,0:07:23.250 So, within product, they are kind of churning[br]on 0:07:23.250,0:07:25.750 their stuff. And then they go talk to design 0:07:25.750,0:07:27.470 and they have a hand off. And then design 0:07:27.470,0:07:29.840 works on their stuff in an iterative fashion.[br]But 0:07:29.840,0:07:35.110 they're not iterating together. So this is[br]still waterfall. 0:07:35.110,0:07:38.390 Product talks to customers, and the developers[br]don't get 0:07:38.390,0:07:40.180 to talk to customers. Now there's, when you[br]start 0:07:40.180,0:07:42.270 having all those separations, you know you've[br]got a 0:07:42.270,0:07:43.620 problem. 0:07:43.620,0:07:47.430 So, instead of relying on this, like, mythical[br]design 0:07:47.430,0:07:49.120 hero to come in and say here is the 0:07:49.120,0:07:52.360 solution that will solve all your ills, we're[br]gonna 0:07:52.360,0:07:57.600 start talking about the misappropriated but[br]adequately named lean 0:07:57.600,0:08:01.640 UX. So it's really about design facilitation[br]as opposed 0:08:01.640,0:08:04.920 to, here's my beautiful design that you will[br]build. 0:08:04.920,0:08:08.320 So, when we talk about lean UX, it's really 0:08:08.320,0:08:11.440 a three part process. It involves design thinking.[br]It 0:08:11.440,0:08:15.970 involves agile, and in the traditional agile[br]manifesto mentality, 0:08:15.970,0:08:18.580 and it pulls heavily on the lean startup book 0:08:18.580,0:08:21.380 from a couple years back. So design thinking[br]came 0:08:21.380,0:08:24.380 out of a idea, which is a big product 0:08:24.380,0:08:26.760 ideation. I hate that word, but it's what[br]they 0:08:26.760,0:08:28.460 do. They come up, they create products. 0:08:28.460,0:08:30.720 And the CEO came up with that. And it's 0:08:30.720,0:08:34.828 innovating, based on direct observation, about[br]what people want 0:08:34.828,0:08:38.659 and need. So, instead of going in and actually, 0:08:38.659,0:08:41.450 like, thinking and saying, what if, what if?[br]They 0:08:41.450,0:08:43.529 actually go and start talking to real people[br]and 0:08:43.529,0:08:45.540 finding out what they want, finding out what[br]they 0:08:45.540,0:08:47.670 need, and then coming up with solutions that[br]fit 0:08:47.670,0:08:51.300 those problems. And, they use sensibilities[br]and methods to 0:08:51.300,0:08:54.209 match these needs with something that's actually[br]a viable 0:08:54.209,0:08:56.930 market product. 0:08:56.930,0:08:59.899 Part two of that's agile. Melissa Perry posted[br]this 0:08:59.899,0:09:02.680 a couple days ago. She's a big UX person. 0:09:02.680,0:09:05.029 And I think this is probably, when every manager 0:09:05.029,0:09:07.269 says agile, what every developer thinks is[br]going to 0:09:07.269,0:09:10.560 happen. And it's the, that was your training.[br]And 0:09:10.560,0:09:12.339 pretty much whenever I hear some manager say[br]this 0:09:12.339,0:09:13.709 and it's obvious that they don't really know[br]what 0:09:13.709,0:09:15.680 they're talking about, I kind of just feel[br]like 0:09:15.680,0:09:18.720 this, and it's just. No. We're not gonna do 0:09:18.720,0:09:19.449 that. 0:09:19.449,0:09:22.660 So agile should be. Everyone pretty familiar[br]with this? 0:09:22.660,0:09:25.540 Or at least have heard about it before? This 0:09:25.540,0:09:28.129 is from 2001. And it really talks about these 0:09:28.129,0:09:32.060 four principles. And it's really in response[br]to the 0:09:32.060,0:09:34.040 software development of the time and how things[br]were 0:09:34.040,0:09:37.199 being built. But I think it really applies[br]a 0:09:37.199,0:09:40.029 lot more to kind of orienteering. And I'm[br]talking 0:09:40.029,0:09:43.439 about map-reading and land navigation when[br]I talk about 0:09:43.439,0:09:43.839 orienteering. 0:09:43.839,0:09:46.579 So, the good old boy scout method, you know, 0:09:46.579,0:09:49.129 with sitting there and trying to figure out[br]how 0:09:49.129,0:09:50.540 you're gonna get from point a to point b. 0:09:50.540,0:09:52.259 So, in orienteering, the first thing you need[br]to 0:09:52.259,0:09:54.170 do is find out where you are. Then you 0:09:54.170,0:09:56.629 shoot an azimuth and choose your target. You[br]say, 0:09:56.629,0:09:58.389 this is the angle I'm gonna go to get 0:09:58.389,0:09:59.670 there, and there's a target that I am going 0:09:59.670,0:10:02.800 to walk to. You move to that target and 0:10:02.800,0:10:04.459 you repeat. And you keep doing this. 0:10:04.459,0:10:06.110 And it's not just about getting yourself from[br]point 0:10:06.110,0:10:08.079 a to point b, but it's about leading a 0:10:08.079,0:10:11.050 group of people all in the same direction[br]and 0:10:11.050,0:10:14.259 sometimes doing complex things. So, when you[br]talk about 0:10:14.259,0:10:16.860 agile, Dave Thomas sums it up this way. You 0:10:16.860,0:10:18.399 find out where you are. You take a small 0:10:18.399,0:10:21.410 step towards your goal. You adjust your understanding[br]based 0:10:21.410,0:10:24.870 on what you learned, and you repeat. 0:10:24.870,0:10:26.970 Which also comes down to the lean startup[br]mentality 0:10:26.970,0:10:30.370 of build, measure, learn. And you're gonna[br]repeat that 0:10:30.370,0:10:32.509 process. So it's not the measure in the sense 0:10:32.509,0:10:34.790 of, which of these forty blue shades is the 0:10:34.790,0:10:37.749 right button, but measure in the bigger sense[br]of, 0:10:37.749,0:10:40.180 is this, when we have a design idea, we're 0:10:40.180,0:10:43.149 gonna try and solve this problem. Does this[br]actually 0:10:43.149,0:10:45.079 solve the problem or not? And we're gonna[br]measure 0:10:45.079,0:10:49.759 the efficacy with which it solves that problem. 0:10:49.759,0:10:52.350 So this is kind of the UX process inside 0:10:52.350,0:10:57.300 lean, and this can really be applied, it's,[br]it's, 0:10:57.300,0:10:59.730 to the whole thing, cause it's not that design 0:10:59.730,0:11:05.740 is separate from development. Everybody's[br]working together. Everybody's involved. 0:11:05.740,0:11:07.740 So instead of having your designer go off[br]and 0:11:07.740,0:11:10.649 come up with something, designers, developers,[br]product people are 0:11:10.649,0:11:14.120 all working together through these steps. 0:11:14.120,0:11:15.519 So we're gonna come up with a concept, we're 0:11:15.519,0:11:17.149 gonna do a really quick prototype, just get[br]the 0:11:17.149,0:11:18.800 idea enough that we can work with it and 0:11:18.800,0:11:21.149 show somebody, and we're gonna validate it,[br]and then 0:11:21.149,0:11:23.089 we're gonna learn from that and we're gonna[br]repeat 0:11:23.089,0:11:24.939 the process. 0:11:24.939,0:11:27.689 So the formal definition of lean UX here is 0:11:27.689,0:11:30.759 from the lean UX book, and you know it's 0:11:30.759,0:11:32.430 trying to bring the true nature of a product 0:11:32.430,0:11:35.680 to light faster. And there's a couple tools[br]that 0:11:35.680,0:11:37.759 really assist in this space to help us with 0:11:37.759,0:11:39.399 that. One of them is personas. 0:11:39.399,0:11:41.499 So you can have personas that are kind of 0:11:41.499,0:11:43.319 formal, like on the left, or you really, really 0:11:43.319,0:11:46.899 kind of laid back like on the right. And, 0:11:46.899,0:11:49.439 this is really along the lines of BDD. So 0:11:49.439,0:11:51.999 if you're doing, you know, as a user, the 0:11:51.999,0:11:54.059 system admin, we'll give him a name. Give[br]her 0:11:54.059,0:11:54.589 a name. 0:11:54.589,0:11:56.680 Go ahead and make that a person, pin them 0:11:56.680,0:11:58.170 up on the wall, talk about them like a 0:11:58.170,0:12:00.269 real person. It really takes it out of this 0:12:00.269,0:12:04.369 theoretical, you know, well here's a, you[br]know, Q&A 0:12:04.369,0:12:07.189 admin that's doing blah blah blah. Give them[br]a 0:12:07.189,0:12:09.619 name, a personality, and it lets you care[br]about 0:12:09.619,0:12:12.860 them in a different way than this theoretical[br]person. 0:12:12.860,0:12:14.949 You can also have a little more, like, formal 0:12:14.949,0:12:16.709 documents. These were things that we wrote[br]up when 0:12:16.709,0:12:19.730 we did customer support. We rebuilt their[br]system at 0:12:19.730,0:12:22.240 Living Social. So we didn't draw up something,[br]but 0:12:22.240,0:12:24.240 we came up with, kind of, like, here's the, 0:12:24.240,0:12:25.459 the point. So we want to talk about, and, 0:12:25.459,0:12:27.249 you know, it's the name, what's the name of 0:12:27.249,0:12:31.029 the person. Like, the title. Cause there's[br]a lot 0:12:31.029,0:12:32.959 of, in, in bigger companies, a lot of titles 0:12:32.959,0:12:36.670 start to really define roles effectively. 0:12:36.670,0:12:40.990 The duties, the goals, the fears, the aspirations.[br]You 0:12:40.990,0:12:43.040 know, what are their computer skills. It really[br]matters. 0:12:43.040,0:12:45.389 Cause if you're dealing with experts, you're[br]gonna build 0:12:45.389,0:12:46.699 a different system than if you're dealing[br]with a 0:12:46.699,0:12:47.509 computer novice. 0:12:47.509,0:12:50.600 Means of communication. How do they like to[br]talk. 0:12:50.600,0:12:52.220 Do they use IM. Are they are email? Would 0:12:52.220,0:12:53.749 they rather pick up the phone and call you? 0:12:53.749,0:12:56.389 Again, it's gonna effect the way you design[br]the 0:12:56.389,0:12:57.490 system. 0:12:57.490,0:13:00.350 And instead of sitting there and making big[br]documents, 0:13:00.350,0:13:01.860 you break out paper or you break out the 0:13:01.860,0:13:04.970 whiteboard. This is a flow diagram for a project 0:13:04.970,0:13:07.009 I was working on at home. And, took me 0:13:07.009,0:13:08.660 ten minutes to sketch it out and kind of 0:13:08.660,0:13:10.389 figure out the flows of what I wanted to 0:13:10.389,0:13:14.740 do. This was for reviewing creating materials. 0:13:14.740,0:13:16.519 This is something we did for email. We were 0:13:16.519,0:13:20.519 handling multi-city emails at Living Social.[br]That is the 0:13:20.519,0:13:22.800 design. We took that, we went right to code. 0:13:22.800,0:13:26.149 You do a lot of sketching. I prefer to 0:13:26.149,0:13:28.800 use architectural trace paper. This twelve[br]inch roll of 0:13:28.800,0:13:31.350 fifty yards long. You can lay it over another 0:13:31.350,0:13:33.110 sheet, very easily, like you see here. That's[br]one 0:13:33.110,0:13:35.509 sheet laid over another. So I can get elements 0:13:35.509,0:13:37.170 that are repeating very quickly. If I want[br]a 0:13:37.170,0:13:39.089 modal I just draw the modal and then, boom, 0:13:39.089,0:13:40.569 there you go. You can talk about it. 0:13:40.569,0:13:41.759 So, then I can pin these up on the 0:13:41.759,0:13:43.569 wall or they can sit there on the table 0:13:43.569,0:13:45.709 and just talk about what's going on. And it's 0:13:45.709,0:13:48.529 not, I don't like this font. I really don't 0:13:48.529,0:13:51.160 like that green or, you know, is this gonna 0:13:51.160,0:13:53.179 be this big? No, it's just a sketch. And 0:13:53.179,0:13:55.699 you can hand the pen to the person. Everybody 0:13:55.699,0:13:57.550 can scribble. 0:13:57.550,0:13:59.119 Ryan Singer, I think, has a lot of great 0:13:59.119,0:14:01.610 examples of where they even do copy and it's 0:14:01.610,0:14:05.129 little, just, lines. It's, there's no formality[br]to it. 0:14:05.129,0:14:06.679 It's, this is a block of copy. This is 0:14:06.679,0:14:08.949 a headline and it's a squiggle. And that's[br]great 0:14:08.949,0:14:11.029 because you don't feel like, oh I need to 0:14:11.029,0:14:13.230 be an artist. 0:14:13.230,0:14:15.879 So, applying these things, I've done this[br]a couple 0:14:15.879,0:14:17.360 different ways and we didn't know what we[br]were 0:14:17.360,0:14:20.110 doing. One of these things that we did a 0:14:20.110,0:14:21.809 lot with the info ether days is that we 0:14:21.809,0:14:24.269 did working in parallel. So, our first client[br]meeting 0:14:24.269,0:14:26.319 would go something, you know, like this. We'd[br]all 0:14:26.319,0:14:28.809 be in the room together with the client, and 0:14:28.809,0:14:31.160 I'd be sitting there working on flows while[br]somebody 0:14:31.160,0:14:33.839 like Rich or Chad were actually pulling out[br]domain 0:14:33.839,0:14:37.119 objects, and actually teaching the customer,[br]you can say 0:14:37.119,0:14:38.679 model. We actually wouldn't sit there and[br]try and 0:14:38.679,0:14:39.850 make up a new language for them. 0:14:39.850,0:14:41.319 We'd teach them what a model was, we'd teach 0:14:41.319,0:14:43.369 them what the domain meant. And we'd actually[br]get 0:14:43.369,0:14:45.449 them into our head space. And so we'd come 0:14:45.449,0:14:48.809 out and build and we'd have usability and[br]functionality. 0:14:48.809,0:14:50.920 They already were committing to the Git repo,[br]and 0:14:50.920,0:14:52.100 we had a bunch of sketches either on a 0:14:52.100,0:14:54.759 whiteboard or on paper about how that flow[br]is 0:14:54.759,0:14:56.990 gonna work. Sometimes we even had diagrams[br]of page 0:14:56.990,0:14:57.660 layout. 0:14:57.660,0:15:02.179 So it's really about sketching and building[br]simultaneously. These 0:15:02.179,0:15:04.809 are some sharets I did for the State Decoded, 0:15:04.809,0:15:08.689 which is a, a Night Foundation opening government[br]project. 0:15:08.689,0:15:09.939 These little things on the left are an inch 0:15:09.939,0:15:11.749 square. I was trying to come up with some 0:15:11.749,0:15:14.619 early ideas of how the, the main landing page 0:15:14.619,0:15:17.369 would look, would lay out. And so just, there's 0:15:17.369,0:15:20.110 very little detail there. It's like, maybe[br]copy here. 0:15:20.110,0:15:22.189 Maybe headline here. Here's a feature images.[br]Here's some 0:15:22.189,0:15:25.100 other images. And, you know, I'd like, I liked 0:15:25.100,0:15:26.410 the third one I did, so then I developed 0:15:26.410,0:15:27.629 that a little better. But you can see it's 0:15:27.629,0:15:31.339 literally squiggles. There is nothing there[br]of copy outside 0:15:31.339,0:15:33.089 of the name. 0:15:33.089,0:15:34.800 And then that goes, and I took that into 0:15:34.800,0:15:36.740 photoshop to get something a little more formal,[br]cause 0:15:36.740,0:15:39.189 I didn't have any brand build around it yet. 0:15:39.189,0:15:41.759 Any, any, you know, kind of vibe. And so 0:15:41.759,0:15:43.149 we took that and did this and then this 0:15:43.149,0:15:45.360 went to build out. While this was happening,[br]while 0:15:45.360,0:15:47.480 the Jquith who's now running the Open Data[br]Institute 0:15:47.480,0:15:50.679 was building this code in PHP, with no idea 0:15:50.679,0:15:52.779 of how my frontend was gonna look. And we 0:15:52.779,0:15:54.429 married them up later. But we knew the functionality. 0:15:54.429,0:15:57.720 We had agreed upon how things were gonna work. 0:15:57.720,0:16:01.929 And, so sometimes this comes down to prototyping,[br]and 0:16:01.929,0:16:04.769 looking at things from a big picture level.[br]And 0:16:04.769,0:16:06.319 a couple of things you can do. If you 0:16:06.319,0:16:09.369 don't know your end users, one good way to 0:16:09.369,0:16:11.579 learn really fast is to do what's called a 0:16:11.579,0:16:14.889 mental model. Indie Young is a UX person.[br]She 0:16:14.889,0:16:18.540 was at Adaptive Path for a long time and 0:16:18.540,0:16:22.019 now she's out consulting. And it's really[br]about identifying, 0:16:22.019,0:16:26.369 like, this would be somebody's morning mental[br]model. Prototypical 0:16:26.369,0:16:27.259 morning. 0:16:27.259,0:16:29.050 Excuse me. 0:16:29.050,0:16:33.319 So. It's, it's drawn organizing factor to[br]figure out 0:16:33.319,0:16:35.559 what the users are doing before you type any 0:16:35.559,0:16:38.350 code. Or before you even draw on the design 0:16:38.350,0:16:42.079 mock-up. And it's a visualization of your[br]research data. 0:16:42.079,0:16:43.600 So if you know what's going on, you don't 0:16:43.600,0:16:45.559 need this. But if you have no idea what's 0:16:45.559,0:16:48.239 going on and you really don't know your users, 0:16:48.239,0:16:50.100 or you, you're on a system that's been around 0:16:50.100,0:16:51.790 for awhile and people are complaining that[br]it doesn't 0:16:51.790,0:16:54.670 solve their needs anymore, this is a great[br]exercise 0:16:54.670,0:16:58.230 to find out what those needs are. 0:16:58.230,0:17:00.519 You can also do stuff with, just kind of 0:17:00.519,0:17:02.910 big picture ideas. When I first started doing[br]the 0:17:02.910,0:17:06.079 design at Living Social for our internal tools,[br]they 0:17:06.079,0:17:07.429 kind of said, just come up with, you know, 0:17:07.429,0:17:09.199 combine all these things together, go talk[br]to people. 0:17:09.199,0:17:11.819 Come up with kind of like, an ideal world. 0:17:11.819,0:17:13.559 And so I put together about six mock-ups that 0:17:13.559,0:17:15.569 were about at this level, and I took them 0:17:15.569,0:17:17.569 and we presented them to Aaron Batalion, who[br]was 0:17:17.569,0:17:21.640 the CTO. And engineering was already moving[br]towards, we 0:17:21.640,0:17:23.490 had already started breaking up our monolithic[br]app at 0:17:23.490,0:17:25.980 the time, and they were moving towards a service-based 0:17:25.980,0:17:27.648 architecture. So we kind of had an idea of 0:17:27.648,0:17:30.010 what we were doing, but we hadn't really finalized 0:17:30.010,0:17:30.870 it yet. 0:17:30.870,0:17:33.750 And Aaron Batalion just looked at me very[br]seriously 0:17:33.750,0:17:35.330 and said, you do realize that's eighteen months[br]of 0:17:35.330,0:17:38.190 work. Like, what I had put into six screens. 0:17:38.190,0:17:40.940 And, so yeah. But what was great about this 0:17:40.940,0:17:43.630 was we had an idea of what could happen. 0:17:43.630,0:17:45.019 So then we were able to talk about that. 0:17:45.019,0:17:47.340 Pull things out, break things apart, and things[br]evolved 0:17:47.340,0:17:49.330 from this. And over time we started working[br]on 0:17:49.330,0:17:52.649 different projects solving different problems.[br]Like, this was our 0:17:52.649,0:17:55.720 scheduler prototype that we built. 0:17:55.720,0:17:57.169 And you start putting these in front of people. 0:17:57.169,0:17:59.029 So we went down to our actual people that 0:17:59.029,0:18:02.100 were scheduling deals and we did usability[br]testing. Now, 0:18:02.100,0:18:04.330 usability testing is hard, because you often[br]can end 0:18:04.330,0:18:06.450 up in this situation where you're trying to[br]be 0:18:06.450,0:18:08.299 all chipper about it and the person's just,[br]like, 0:18:08.299,0:18:10.690 this is awful. This is horrible. It's great.[br]I 0:18:10.690,0:18:12.440 love it. Yeah, that's wonderful. 0:18:12.440,0:18:15.860 So we started recording things with Silverback.[br]And with 0:18:15.860,0:18:17.429 Silverback, what you do is you end up getting 0:18:17.429,0:18:19.250 a screen like this. And so this is one 0:18:19.250,0:18:21.549 of our live tests we did, with Jean O'Reilly 0:18:21.549,0:18:25.000 who is one of our senior scheduling people.[br]And 0:18:25.000,0:18:27.460 basically, instead of all of engineering sitting,[br]that was 0:18:27.460,0:18:29.240 working on this project sitting around her,[br]making her 0:18:29.240,0:18:31.419 feel uncomfortable, we had one person talking[br]through some 0:18:31.419,0:18:34.289 stuff with her. Just getting first impressions.[br]How would 0:18:34.289,0:18:37.250 you do this? Very leading questions. You,[br]you want 0:18:37.250,0:18:38.370 the door wide open. 0:18:38.370,0:18:40.929 But, you basically get all her clicks, and[br]you 0:18:40.929,0:18:43.860 can see how often she's doing select all and 0:18:43.860,0:18:45.919 things like that. But it's really interesting[br]to see 0:18:45.919,0:18:48.320 how somebody starts interacting with something[br]they haven't seen 0:18:48.320,0:18:51.200 before. And this records her video down in[br]the 0:18:51.200,0:18:53.399 bottom with the, from just the camera on the 0:18:53.399,0:18:55.140 mac, and you also get audio. 0:18:55.140,0:18:57.059 So we could then sit there and review these. 0:18:57.059,0:18:59.000 Each one was a twenty, thirty minute session,[br]working 0:18:59.000,0:19:02.620 through various questions. And we took those[br]back and 0:19:02.620,0:19:06.019 then iterated on things. 0:19:06.019,0:19:09.010 Sometimes you're working in such a big problem[br]that 0:19:09.010,0:19:10.740 you have to kind of do the rewrite. So 0:19:10.740,0:19:12.960 this was our customer support tool that we[br]rebuilt. 0:19:12.960,0:19:14.890 It was originally Sales Force. They were working[br]in 0:19:14.890,0:19:17.519 Sales Force. This is backed by Sales Force.[br]But 0:19:17.519,0:19:19.640 this is a backbone project on top of a 0:19:19.640,0:19:22.929 Rails app, and it's super complex. And it's[br]two 0:19:22.929,0:19:25.140 screens. So they have two nineteen inch monitors,[br]this 0:19:25.140,0:19:27.330 is the left and this is the right. 0:19:27.330,0:19:29.649 Now, all these things that we were doing,[br]we 0:19:29.649,0:19:31.429 had done so much shadowing. We knew all these 0:19:31.429,0:19:34.750 pain points, all these things they hated,[br]but building 0:19:34.750,0:19:36.380 all this, again, this is one of those took 0:19:36.380,0:19:38.440 a year to kind of get to this point. 0:19:38.440,0:19:39.779 So what we started doing is that we went 0:19:39.779,0:19:42.899 in and fixed the pain points when we could. 0:19:42.899,0:19:45.090 Instead of waiting to build that perfect screen,[br]we 0:19:45.090,0:19:47.250 went on the production system and fixed that[br]one 0:19:47.250,0:19:50.169 little interaction that was driving them nuts,[br]and then 0:19:50.169,0:19:51.450 we'd go and do the next one and go 0:19:51.450,0:19:53.140 and do the next one at the same time, 0:19:53.140,0:19:55.010 while we're building. 0:19:55.010,0:19:56.470 And so this is really comes down to kind 0:19:56.470,0:19:58.850 of a, a better way of doing things is 0:19:58.850,0:20:02.029 almost, I call just in time. So you start 0:20:02.029,0:20:05.620 with a big-picture design process. Then you[br]apply that 0:20:05.620,0:20:09.019 design. You codify it into a living styleguide.[br]So 0:20:09.019,0:20:11.889 this is a code styleguide, not a print document. 0:20:11.889,0:20:13.830 And you revise as you go. 0:20:13.830,0:20:16.230 So, with the just in time kind of project, 0:20:16.230,0:20:18.970 you know, UX joins at some point. It may 0:20:18.970,0:20:21.190 be the very beginning, it may not be. And, 0:20:21.190,0:20:22.409 you know, you're starting there. You just[br]kind of 0:20:22.409,0:20:24.240 get your legs, get a feel for where you 0:20:24.240,0:20:26.409 are, and you do it in a really intense 0:20:26.409,0:20:28.500 design push at the beginning. You do a big 0:20:28.500,0:20:30.649 spike. You get your overall design stuff happening.[br]You 0:20:30.649,0:20:33.159 get your design language established. And[br]you are right 0:20:33.159,0:20:34.789 in on tickets. 0:20:34.789,0:20:37.200 And, so some of that stuff we did, we 0:20:37.200,0:20:39.330 built at Living Social for our internal lab,[br]something 0:20:39.330,0:20:41.960 called Wilde. If any of you say Ed Lang's 0:20:41.960,0:20:45.139 lightning talk before lunch, they, he was[br]talking about 0:20:45.139,0:20:49.029 the system they used for the, the customer[br]facing 0:20:49.029,0:20:51.380 side. This is all the internal tool stuff. 0:20:51.380,0:20:52.769 So we built this as a Ruby gem that 0:20:52.769,0:20:55.309 people could pull down and install, and it[br]immediately 0:20:55.309,0:20:56.720 gave them all of the set up parts to 0:20:56.720,0:20:58.590 build apps with. 0:20:58.590,0:21:00.950 So instead of having to worry about, do I 0:21:00.950,0:21:02.649 put this here, do I put that there? They 0:21:02.649,0:21:05.330 immediately had kind of a framework for an[br]interface 0:21:05.330,0:21:09.510 to build their applications. It also had built-in[br]documentation. 0:21:09.510,0:21:10.600 So all of this stuff they could go in 0:21:10.600,0:21:12.940 and find out how to use these different things. 0:21:12.940,0:21:14.500 We took parts of Bootstrap, we took parts[br]of 0:21:14.500,0:21:16.429 Compass and Bourbon, and we kind of brought[br]all 0:21:16.429,0:21:18.559 of this together into a big scss framework[br]with 0:21:18.559,0:21:20.299 our own design elements. 0:21:20.299,0:21:22.500 So, some of these, like, this is very much 0:21:22.500,0:21:26.840 derivative of the Bootstrap styles for alerts.[br]As well 0:21:26.840,0:21:28.649 as some of the buttons. We would change up 0:21:28.649,0:21:30.200 and make, we did some different things with[br]buttons, 0:21:30.200,0:21:32.419 but a lot of this stuff is very derivative, 0:21:32.419,0:21:34.070 cause we were taking things and saying we[br]like 0:21:34.070,0:21:36.970 these pieces but we don't want the whole enchilada. 0:21:36.970,0:21:40.070 And as you're going, new design elements come[br]up. 0:21:40.070,0:21:42.480 So about a year after we first built Wilde, 0:21:42.480,0:21:45.510 we built this timeline element for our sales[br]staff. 0:21:45.510,0:21:47.100 And this is actually a UI built on top 0:21:47.100,0:21:49.590 of Sales Force, believe it or not. This is 0:21:49.590,0:21:51.470 completely backed by Sales Force. 0:21:51.470,0:21:53.610 But this timeline element, we were able to[br]extract 0:21:53.610,0:21:55.500 out the CSS and html and make it available 0:21:55.500,0:21:58.190 for people building other apps. So now if[br]somebody 0:21:58.190,0:22:00.370 in another app wanted a timeline, they could[br]pull 0:22:00.370,0:22:01.799 this code in and they didn't have to go 0:22:01.799,0:22:03.169 and reinvent it. 0:22:03.169,0:22:04.950 This also helps because users who are used[br]to 0:22:04.950,0:22:07.490 one style, if they switch to another app,[br]it's 0:22:07.490,0:22:08.980 not a whole different world. It's not a whole 0:22:08.980,0:22:12.669 new interaction paradigm. 0:22:12.669,0:22:14.190 I've done a lot of consulting, and so a 0:22:14.190,0:22:17.549 lot of these clients are these kind of long-running 0:22:17.549,0:22:21.029 projects. I've worked on one banking client,[br]for example, 0:22:21.029,0:22:25.429 since 2008. All on their internal tools. 0:22:25.429,0:22:27.250 And what happens is, we've done a lot of 0:22:27.250,0:22:29.620 these kind of big picture design things with[br]them, 0:22:29.620,0:22:32.250 but it always comes down to little interactions.[br]So 0:22:32.250,0:22:35.139 instead of sitting there and saying, let's[br]go rebuild 0:22:35.139,0:22:36.990 our document manager, we say we're just gonna[br]sketch 0:22:36.990,0:22:39.320 what documents look like. Here's two states[br]of a 0:22:39.320,0:22:41.450 document, and now we're gonna build that. 0:22:41.450,0:22:43.039 And so this is the kind of deliverable that 0:22:43.039,0:22:45.120 they get. It takes me five to ten minutes. 0:22:45.120,0:22:47.960 I sketch it out. I send it over. They 0:22:47.960,0:22:51.029 build it. I come back in and style it. 0:22:51.029,0:22:52.909 And this helps, when you have that living[br]style 0:22:52.909,0:22:55.460 guide, we break everything up into scss files,[br]and 0:22:55.460,0:22:57.320 we do a big import and merge it all 0:22:57.320,0:23:00.429 together. So we now have all these components.[br]So 0:23:00.429,0:23:02.690 things that are used everywhere become components.[br]Things that 0:23:02.690,0:23:05.809 are one-offs get placed in areas. 0:23:05.809,0:23:07.260 And then you have variables and you have a 0:23:07.260,0:23:08.559 whole bunch of stuff. So some of this stuff, 0:23:08.559,0:23:10.990 again, is derivative from Bootstrap. Some[br]of it's derivative 0:23:10.990,0:23:13.630 from Compass. We kind of shifted now to being 0:23:13.630,0:23:17.179 reliant upon Compass because we've realized[br]we were including 0:23:17.179,0:23:19.649 ninety-five percent of it. So we stopped,[br]kind of, 0:23:19.649,0:23:21.289 chicken and egg and just said, we'll take[br]the 0:23:21.289,0:23:24.760 whole thing. 0:23:24.760,0:23:28.850 My current situation is Cargo Sense. And I'm[br]working 0:23:28.850,0:23:30.720 with Rich Kilmer and Bruce Williams, and I[br]call 0:23:30.720,0:23:34.750 this the mad dash. This is, Cargo Sense is 0:23:34.750,0:23:38.159 a logistics company. We're taking off the[br]shelf node 0:23:38.159,0:23:40.990 variable tech sensors, which are bluetooth[br]four, and we've 0:23:40.990,0:23:43.779 got an iPad app written in Ruby Motion. And 0:23:43.779,0:23:44.899 then we have a web application. 0:23:44.899,0:23:47.779 And so we use the data in logistics shipping 0:23:47.779,0:23:52.200 to detect takeoff and landing press, with[br]pressure changes, 0:23:52.200,0:23:54.070 and we use data to figure out temperature[br]excursions. 0:23:54.070,0:23:57.450 So, pharmaceutical needs to keep insulin within[br]this temperature 0:23:57.450,0:23:59.380 range, and then we can tell if it's been 0:23:59.380,0:24:01.380 out for five minutes, we raise an alert. Things 0:24:01.380,0:24:02.830 of that nature. 0:24:02.830,0:24:05.220 So this is the story of a shipment. This 0:24:05.220,0:24:07.250 is a timeline, again. You know, so it's a 0:24:07.250,0:24:09.049 very, it's, some of these design elements,[br]you've, you, 0:24:09.049,0:24:11.120 you created ten years ago. You're gonna be[br]like, 0:24:11.120,0:24:12.509 yeah, I did this. So we can reuse that 0:24:12.509,0:24:14.250 kind of concept. 0:24:14.250,0:24:17.399 But it's these simple four parts again. Big[br]picture 0:24:17.399,0:24:19.710 design. We came up with an overall brand,[br]look, 0:24:19.710,0:24:22.389 and feel. We started applying it and we codified 0:24:22.389,0:24:24.210 it into a living styleguide. In this case[br]it's 0:24:24.210,0:24:26.870 called Kevlar and not Wilde. And we revise[br]as 0:24:26.870,0:24:27.429 we go. 0:24:27.429,0:24:29.330 Most of our things, this is a Bower package, 0:24:29.330,0:24:31.809 instead of a Ruby gem, because we're working[br]in 0:24:31.809,0:24:33.960 Angular. But it supports, I mean, you could[br]use 0:24:33.960,0:24:36.370 it to support anything. 0:24:36.370,0:24:38.070 And a lot of these things, these are designs 0:24:38.070,0:24:41.570 that, these are relatively high-fidelity sketches.[br]These go over 0:24:41.570,0:24:44.409 to Bruce or Rich. They comment on them, and 0:24:44.409,0:24:46.659 then, if we need to for marketing purposes[br]or 0:24:46.659,0:24:48.320 things before we have built that we're gonna[br]go 0:24:48.320,0:24:52.850 for sales purposes, I'll do these kind of[br]mockups. 0:24:52.850,0:24:54.320 So a lot of this stuff is coming down 0:24:54.320,0:24:57.639 to really fast and really, just, kind of,[br]seat 0:24:57.639,0:25:00.250 of your pants pulling stuff off. But when[br]you 0:25:00.250,0:25:01.940 have a small team, you can do that. And 0:25:01.940,0:25:03.470 a lot of these design elements, like some[br]of 0:25:03.470,0:25:05.009 these things, like the, the right hand side[br]or 0:25:05.009,0:25:07.779 the header were definitely, you know, Bruce[br]at three 0:25:07.779,0:25:09.809 in the morning saying, I'm making an executive[br]decision. 0:25:09.809,0:25:10.809 This is what it's gonna be. 0:25:10.809,0:25:12.799 Now, Bruce happens to be a very talented designer 0:25:12.799,0:25:15.330 as well as a full-stack developer, so that[br]definitely 0:25:15.330,0:25:18.500 helps the situation. But you can do a lot 0:25:18.500,0:25:20.330 of these things where there's not this formal,[br]well, 0:25:20.330,0:25:22.720 we're following lean UX. It's just kind of,[br]you're, 0:25:22.720,0:25:24.750 this is, we're kind of using these principles[br]to 0:25:24.750,0:25:26.250 make a better process. 0:25:26.250,0:25:30.759 So, what are the issues with all of this? 0:25:30.759,0:25:33.529 One of the issues is called design drift.[br]Design 0:25:33.529,0:25:35.970 drift is something that happens over time[br]with any 0:25:35.970,0:25:38.480 kind of creative endeavor. You start off,[br]this is 0:25:38.480,0:25:40.409 one of our early designs we did at the 0:25:40.409,0:25:42.320 top, and then here's the customer support[br]tool at 0:25:42.320,0:25:43.159 the bottom. 0:25:43.159,0:25:46.830 So we started off with a fixed-width, with[br]margins, 0:25:46.830,0:25:50.450 you know, tall header, and we started realizing[br]that 0:25:50.450,0:25:53.029 people were maximizing their screens and having[br]huge, wide 0:25:53.029,0:25:55.519 columns, and we were not effectively using[br]the space 0:25:55.519,0:25:56.320 allotted. 0:25:56.320,0:25:58.080 So we went to pushing everything out to the 0:25:58.080,0:26:02.049 side, and filling the whole thing up. And[br]we 0:26:02.049,0:26:04.460 really shrunk the header down super small,[br]and we 0:26:04.460,0:26:06.840 collapsed a lot of things away. These are[br]expert 0:26:06.840,0:26:09.970 users. We can do training. We don't have to 0:26:09.970,0:26:13.929 have them understand it right out the gate. 0:26:13.929,0:26:15.440 Another problem you're gonna hit is if you're[br]working 0:26:15.440,0:26:17.889 with a traditional UX or design team, and[br]they're 0:26:17.889,0:26:20.340 used to having design deliverables and throwing[br]things over 0:26:20.340,0:26:23.460 the wall to you, you're gonna have frustration.[br]Ladders 0:26:23.460,0:26:27.929 dot com, when they rolled out this, the, the 0:26:27.929,0:26:30.669 head showed up to this on his desk. His 0:26:30.669,0:26:33.500 designers had had a meeting and wrote down[br]what 0:26:33.500,0:26:35.600 they were pissed off about, and this is it. 0:26:35.600,0:26:38.570 And it's too many projects, devs making bad[br]design 0:26:38.570,0:26:41.200 decisions, no time to actually come up with[br]concepts 0:26:41.200,0:26:44.919 and ideas, and when we do nobody builds them. 0:26:44.919,0:26:46.320 We come up with a great experience and then 0:26:46.320,0:26:48.519 you don't build it or it never ships. All 0:26:48.519,0:26:51.120 these things are problems that I've heard[br]and sometimes 0:26:51.120,0:26:52.389 I've said. 0:26:52.389,0:26:54.279 And so some of the solutions are really, like, 0:26:54.279,0:26:56.110 you know, celebrate releases. Like, if you[br]do a 0:26:56.110,0:26:58.899 release on Friday, get the designers involved,[br]get them 0:26:58.899,0:27:00.789 to push. Get them to go hit the enter 0:27:00.789,0:27:03.929 key, you know. Do whatever. Have balloons.[br]Whatever you 0:27:03.929,0:27:05.299 want to do, you know, that, that works for 0:27:05.299,0:27:07.590 your team. And make time to dream. 0:27:07.590,0:27:10.370 I know this sounds really, like, fluffy and[br]whatever, 0:27:10.370,0:27:12.309 but really have time to go and be able 0:27:12.309,0:27:15.389 to spitball and say what if and what happens 0:27:15.389,0:27:17.269 when I say this, or what happens when a 0:27:17.269,0:27:18.940 user does this or, you know, wouldn't it be 0:27:18.940,0:27:21.419 cool if the whole system was, you know, purple 0:27:21.419,0:27:24.500 instead of red. Whatever. 0:27:24.500,0:27:26.590 Kind of figure that out. 0:27:26.590,0:27:29.490 Another issue is, if your project management[br]office or 0:27:29.490,0:27:31.659 your product people aren't on board, it will[br]fail. 0:27:31.659,0:27:34.820 It will fail hard. It will fail in glorious 0:27:34.820,0:27:37.919 fashion, because it's difficult to see in[br]the dark. 0:27:37.919,0:27:40.299 And what ends up happening is that PMO is 0:27:40.299,0:27:42.070 thinking, we're agile, so we have to work[br]in 0:27:42.070,0:27:44.220 sprints and we're gonna do SCRUM, or we're[br]gonna 0:27:44.220,0:27:46.600 - and they get so focused on this process 0:27:46.600,0:27:48.070 that they've created. 0:27:48.070,0:27:50.200 So we're gonna build this complex thing, but[br]we're 0:27:50.200,0:27:52.480 just gonna wing it. Or, you know, I want 0:27:52.480,0:27:53.850 you to focus so I'm only gonna tell you 0:27:53.850,0:27:56.830 what we're working on this sprint. And then[br]the 0:27:56.830,0:27:59.299 biggest lie in software development, we're[br]not gonna tackle 0:27:59.299,0:28:01.080 that until phase two. 0:28:01.080,0:28:04.269 And you end up with this. So you don't 0:28:04.269,0:28:05.940 know where you're going. You end up wandering[br]all 0:28:05.940,0:28:07.710 over the place. it's like forty years in the 0:28:07.710,0:28:11.279 desert. And instead of saying, hey, we're[br]gonna try 0:28:11.279,0:28:13.409 and go to this point and we might kind 0:28:13.409,0:28:14.820 of do this on the way, but that's what 0:28:14.820,0:28:16.570 we're trying to get to, they just say, no, 0:28:16.570,0:28:18.330 no, we're just gonna make these, these few[br]steps 0:28:18.330,0:28:21.419 here. Without any big vision, it's really[br]hard to 0:28:21.419,0:28:25.370 get everybody rolling in the same direction. 0:28:25.370,0:28:28.049 Another problem is forgetting the users. We[br]said user-centered 0:28:28.049,0:28:30.980 design. So how do you deal with, you know, 0:28:30.980,0:28:32.330 your users. And how do you bring them in. 0:28:32.330,0:28:34.330 And lots of times, when you first shadow somebody 0:28:34.330,0:28:36.409 working on a system, you go ahead and you 0:28:36.409,0:28:39.149 have that moment where, Cary Elwes in the[br]Princess 0:28:39.149,0:28:42.039 Bride says, Dear god, what is that thing? 0:28:42.039,0:28:44.620 And it ends up being, you have to watch 0:28:44.620,0:28:46.250 out for that great rewrite. Cause you're like,[br]I 0:28:46.250,0:28:48.070 can rebuild this whole system. The design's[br]gonna be 0:28:48.070,0:28:53.519 amazing. And you're, it's eighteen months[br]of work. So, 0:28:53.519,0:28:55.950 what we talked about earlier. This is the[br]modification 0:28:55.950,0:28:58.110 of the just in time project. 0:28:58.110,0:29:00.480 So we do existing system fixes at the same 0:29:00.480,0:29:03.409 time that we're doing big design fixes on[br]the, 0:29:03.409,0:29:04.870 the new system that we're gonna roll out to 0:29:04.870,0:29:06.970 replace or things that are gonna roll out[br]in 0:29:06.970,0:29:09.080 time. We go in and just make code fixes, 0:29:09.080,0:29:10.350 real time. 0:29:10.350,0:29:11.779 Just pair up. Sit down with the, you've got 0:29:11.779,0:29:13.570 a developer and a designer, and you sit down 0:29:13.570,0:29:15.610 and you say, that's ugly. And the designer's[br]literally 0:29:15.610,0:29:18.549 typing in css and changing stuff, and the[br]developer's 0:29:18.549,0:29:20.720 doing support on Ruby methods or things of[br]that 0:29:20.720,0:29:22.350 nature that need to change in order to make 0:29:22.350,0:29:24.580 something work better. 0:29:24.580,0:29:27.440 Here's a good example of that. We took. This 0:29:27.440,0:29:29.070 was a screen out of our admin system, the 0:29:29.070,0:29:31.149 right hand part and it originally was a very 0:29:31.149,0:29:33.940 complex system for turning on or off somebody's[br]email 0:29:33.940,0:29:37.200 subscriptions. And we stole some css from[br]somewhere that 0:29:37.200,0:29:38.899 basically made it look like an IE, like this 0:29:38.899,0:29:42.740 little checkbox. Little toggle. And this was[br]a mockup. 0:29:42.740,0:29:44.679 But we took that little piece, built that[br]in 0:29:44.679,0:29:47.840 code, and deployed it into production. And[br]it was, 0:29:47.840,0:29:50.120 like, oh my gosh. It's great. We, we understand. 0:29:50.120,0:29:53.330 We can see it, visually, what's happening[br]now. 0:29:53.330,0:29:55.809 So, this is something that's important that[br]you need 0:29:55.809,0:29:58.429 to involve subject matter experts. If you[br]have these 0:29:58.429,0:30:00.049 users, you need to go find them. If they're 0:30:00.049,0:30:01.440 in, in your office, you just need to go 0:30:01.440,0:30:03.919 sit next to them. What is the problem? Why 0:30:03.919,0:30:06.220 are you upset? What's your pain point? What[br]makes 0:30:06.220,0:30:07.279 your life miserable? 0:30:07.279,0:30:09.139 And if it's something where you're doing,[br]like Living 0:30:09.139,0:30:12.179 Social, we had customers outside and inside.[br]So we 0:30:12.179,0:30:13.629 would go to customer support, say what are[br]your 0:30:13.629,0:30:15.960 top ten complaints that you're receiving.[br]What's the stuff 0:30:15.960,0:30:17.580 you spend all the time on. 0:30:17.580,0:30:19.309 Is it people can't find information? Are they[br]having 0:30:19.309,0:30:21.159 a hard time with their credit card? What's,[br]what's 0:30:21.159,0:30:23.919 going on. Take that back to engineering. Here's[br]some 0:30:23.919,0:30:25.519 quick wins. And people will go ahead and knock 0:30:25.519,0:30:28.610 those things out. 0:30:28.610,0:30:30.539 Another thing to talk about is that user testing 0:30:30.539,0:30:32.940 is hard. In all of these systems, the one 0:30:32.940,0:30:35.179 thing I've always failed with is that it's[br]really 0:30:35.179,0:30:37.490 hard to formalize user testing and make it[br]part 0:30:37.490,0:30:40.159 of your testing. So, often, I'll end up with 0:30:40.159,0:30:41.950 this, you know, this great thing that we've[br]run, 0:30:41.950,0:30:43.080 and then we go and do a user test 0:30:43.080,0:30:44.340 after two months. 0:30:44.340,0:30:46.990 Ideally, you're doing a very small user test[br]every 0:30:46.990,0:30:49.690 week. One, two people. Not much. And the easiest 0:30:49.690,0:30:51.710 way to do this is to go guerrilla. And 0:30:51.710,0:30:53.129 you can do this anywhere. You can do this 0:30:53.129,0:30:54.799 at a Starbucks. You can get somebody that,[br]you're 0:30:54.799,0:30:56.289 sitting there, if you're working on something[br]and it's 0:30:56.289,0:30:58.070 like, hey I wonder about this interaction. 0:30:58.070,0:31:02.720 Hey, what do you think about this? And leading 0:31:02.720,0:31:04.950 questions, again. What are your leading questions.[br]What would 0:31:04.950,0:31:07.460 you do here? How would you do that? 0:31:07.460,0:31:11.120 Multiple devices, you always get issues with.[br]Responsive design, 0:31:11.120,0:31:13.340 right. You have to plan time for this, because 0:31:13.340,0:31:17.080 now it's not just an iPhone. These are just 0:31:17.080,0:31:20.659 this Samsung Galaxy sizes. Do you even have[br]all 0:31:20.659,0:31:25.590 of these? What, and this is, ten pixels here, 0:31:25.590,0:31:27.940 ten pixels there, really can start to break[br]designs. 0:31:27.940,0:31:29.450 So you gotta determine your break points.[br]You gotta, 0:31:29.450,0:31:31.279 you have to make this part of your process. 0:31:31.279,0:31:33.590 You have to say, OK, we're gonna handle responses, 0:31:33.590,0:31:35.259 and we built this feature, and now we're gonna 0:31:35.259,0:31:36.539 take two weeks and make sure it works on 0:31:36.539,0:31:38.090 this, these devices. 0:31:38.090,0:31:39.139 And you can emulate a lot of this in 0:31:39.139,0:31:41.669 Chrome now, which is great, but, you still[br]gotta 0:31:41.669,0:31:44.259 plan for it. It just doesn't happen. 0:31:44.259,0:31:47.149 So, what should we do? How do we take 0:31:47.149,0:31:50.470 all these projects and these issues? And this[br]is 0:31:50.470,0:31:53.879 kind of my, my charge to you here. First, 0:31:53.879,0:31:56.570 you need to gear up, and it's pretty simple. 0:31:56.570,0:31:59.249 Raid the office supply stash, and that's about[br]it. 0:31:59.249,0:32:02.279 Get a whiteboard, get a table. You got your 0:32:02.279,0:32:04.600 phone in your pocket. This is all you really 0:32:04.600,0:32:07.039 need. 0:32:07.039,0:32:10.210 Stop using agile. Start thinking about agility.[br]Dave Thomas 0:32:10.210,0:32:12.330 has a great, great article here that he just 0:32:12.330,0:32:15.440 posted about a couple weeks ago. Agile is[br]so 0:32:15.440,0:32:19.409 abused and so buzz word-y now, that you say 0:32:19.409,0:32:21.830 it, and managers who don't understand better[br]are like, 0:32:21.830,0:32:23.350 oh, that means we don't have to worry about 0:32:23.350,0:32:23.970 documentation. Great. 0:32:23.970,0:32:26.499 No, no, no. That's not. We, we're gonna work 0:32:26.499,0:32:29.610 in an agile fashion. Oh, no, no, no, no. 0:32:29.610,0:32:31.759 You gotta just say agility. Stop using agile.[br]Just 0:32:31.759,0:32:34.740 drop it from your vocabulary. 0:32:34.740,0:32:36.909 Measure everything. If you don't even know[br]what you're 0:32:36.909,0:32:39.090 gonna measure, just put Google Analytics on[br]it and 0:32:39.090,0:32:41.389 turn all the switches on. Just get data in 0:32:41.389,0:32:43.200 there. Because you're gonna go back and say,[br]what 0:32:43.200,0:32:44.879 were people clicking on? What were the paths[br]they 0:32:44.879,0:32:47.529 were taking through the system? And, especially[br]if you're 0:32:47.529,0:32:50.519 doing e-commerce, you can start seeing, checking,[br]like, figure 0:32:50.519,0:32:51.950 out your checkout flow and then you can document 0:32:51.950,0:32:53.999 that. Cause then you can go through and say, 0:32:53.999,0:32:56.499 hey, we get thirty percent abandonment on[br]this step. 0:32:56.499,0:32:57.940 Let's go back and look at that. What's going 0:32:57.940,0:32:59.039 on? 0:32:59.039,0:33:02.110 Love your users. Often, I know we get frustrated. 0:33:02.110,0:33:03.860 Cause we're like, they just don't get it,[br]blah, 0:33:03.860,0:33:06.090 blah, blah. Oh my god. You know, my parents 0:33:06.090,0:33:08.740 can't even do this. What's wrong with them?[br]And 0:33:08.740,0:33:10.429 it's really about you're, you know, we're[br]trying to 0:33:10.429,0:33:12.090 serve them. We're trying to make their lives[br]better 0:33:12.090,0:33:13.710 with the tools we build. 0:33:13.710,0:33:16.389 So, in doing that, we want to secure quick 0:33:16.389,0:33:18.090 wins. Whenever you can secure a quick win,[br]you 0:33:18.090,0:33:19.610 can build something fast, you can do it at 0:33:19.610,0:33:20.830 night when you go home and you've got ten 0:33:20.830,0:33:22.629 minutes and it's something you know you can[br]ship, 0:33:22.629,0:33:25.179 do it. Ship it. Get it out the door. 0:33:25.179,0:33:27.769 No more silos. Get rid of design as a 0:33:27.769,0:33:30.090 team. Get rid of engineering as a team. Everybody's 0:33:30.090,0:33:34.389 on build. Project managers. Everybody is on[br]one team. 0:33:34.389,0:33:35.700 And if you have a product, get that, get 0:33:35.700,0:33:37.600 a micro team. And it's made up of all 0:33:37.600,0:33:40.539 these people. Sometimes these roles are not[br]clearly defined. 0:33:40.539,0:33:42.090 Sometimes an engineer is also your product[br]and your 0:33:42.090,0:33:43.620 project manager. 0:33:43.620,0:33:46.649 I argue often that everybody should be QA,[br]but 0:33:46.649,0:33:48.789 sometimes you need a formal QA person who's[br]really 0:33:48.789,0:33:51.600 an expert at doing Selenium or something like[br]that 0:33:51.600,0:33:53.570 and can drive those automated tests. 0:33:53.570,0:33:58.450 But design, frontend, engineers. Everybody[br]sitting together, working together, 0:33:58.450,0:34:02.080 even if you're remote. Collaborating every[br]single day. Developers 0:34:02.080,0:34:04.590 are not excluded from design meetings. Designers[br]are part 0:34:04.590,0:34:07.230 of retrospectives. 0:34:07.230,0:34:09.879 Pull request workflow. Bruce and I do this[br]at 0:34:09.879,0:34:13.050 Cargo, since we start off empty pull requests,[br]to 0:34:13.050,0:34:16.480 discuss big ideas. And you start pushing against[br]the 0:34:16.480,0:34:18.649 pull request with that branch. And then if[br]it's 0:34:18.649,0:34:21.460 good, we pull it in. If it'd bad, we 0:34:21.460,0:34:22.569 leave it out. 0:34:22.569,0:34:26.179 Reusable design solutions. If you've got something[br]that you're, 0:34:26.179,0:34:30.079 you're generating, if you can reuse it, do[br]so. 0:34:30.079,0:34:33.918 Developers, learn UX. It's not scary. It's[br]not this, 0:34:33.918,0:34:35.859 like, I have to use photoshop. Go read some 0:34:35.859,0:34:38.079 books on usability. Defensive Design for the[br]Web by 0:34:38.079,0:34:40.149 37Signals is over ten years old, and every[br]single 0:34:40.149,0:34:42.780 word of it is still very applicable. Most[br]of 0:34:42.780,0:34:46.619 Jakon Neilsen's stuff. Rock, It's Not Rocket[br]Surgery, I 0:34:46.619,0:34:48.619 think. Steve Krug is a great author. Just[br]go 0:34:48.619,0:34:50.020 read some of these books. 0:34:50.020,0:34:53.309 You build things that work. You should know[br]why 0:34:53.309,0:34:54.929 they work, how they work, and how they work 0:34:54.929,0:34:58.750 efficiently. Likewise, go get your designers[br]to learn how 0:34:58.750,0:35:01.960 to code. If your designer doesn't understand[br]html and 0:35:01.960,0:35:03.730 css, at least, how can they possibly design[br]for 0:35:03.730,0:35:06.470 that medium? It's like a print designer not[br]understand 0:35:06.470,0:35:09.020 what happens when the ink hits the paper.[br]You 0:35:09.020,0:35:10.780 would not, it would not happen. Designers[br]need to. 0:35:10.780,0:35:12.579 They don't have to do the code, they need 0:35:12.579,0:35:16.680 to understand the code, though. 0:35:16.680,0:35:18.339 And forgive. Ann Patchett has a book called[br]the 0:35:18.339,0:35:20.750 Get Away Car. It's a practical memoir about[br]writing, 0:35:20.750,0:35:22.410 which is funny. I didn't realize David was[br]gonna 0:35:22.410,0:35:23.700 do this whole thing on writing when I, I 0:35:23.700,0:35:26.859 pulled this. My wife sent me this quote that 0:35:26.859,0:35:30.410 Andrew Sullivan pulled out, but the real short[br]of 0:35:30.410,0:35:33.069 it is, I'm just gonna read this real quick. 0:35:33.069,0:35:34.660 "Stop here for a few breaths and think about 0:35:34.660,0:35:36.220 this, because it's the key to making art and 0:35:36.220,0:35:38.950 very possibly the key to finding any semblance[br]of 0:35:38.950,0:35:41.210 happiness in life. Every time I have to set 0:35:41.210,0:35:43.329 out to translate the book, or story, or hopelessly 0:35:43.329,0:35:45.950 long essay that exists in such brilliant detail[br]on 0:35:45.950,0:35:47.730 the big screen of my limbic system onto a 0:35:47.730,0:35:49.839 piece of paper, I grieve for my own lack 0:35:49.839,0:35:53.359 of talent and intelligence. Every single time.[br]Were I 0:35:53.359,0:35:55.640 smarter, more gifted, I could pin down a closer 0:35:55.640,0:35:57.970 facsimile of the wonders that I see. I believe 0:35:57.970,0:36:00.250 that, more than anything else, the grief of[br]constantly 0:36:00.250,0:36:02.290 having to face down our own inadequacies is[br]what 0:36:02.290,0:36:05.740 keeps people from being writers. Forgiveness,[br]therefore, is key. 0:36:05.740,0:36:07.530 I can't write the book I want to write, 0:36:07.530,0:36:08.940 but I can and will write the book I 0:36:08.940,0:36:11.309 am capable of writing. Again and again, throughout[br]the 0:36:11.309,0:36:13.300 course of my life, I will forgive myself." 0:36:13.300,0:36:14.900 This doesn't just apply to you. This applies[br]to 0:36:14.900,0:36:17.950 your coworkers. This applies to your interactions[br]with everybody. 0:36:17.950,0:36:21.510 So build the app you can build today. Because 0:36:21.510,0:36:22.760 you can sit there and say, this process is 0:36:22.760,0:36:24.700 too hard. This is too complex. We'll never[br]get 0:36:24.700,0:36:27.829 this done. It's gotta start from somewhere. 0:36:27.829,0:36:30.460 And so, please try and climb the mountain.[br]I 0:36:30.460,0:36:32.190 know it's not easy, but you'll eventually[br]get there, 0:36:32.190,0:36:34.290 and it will be a better world for it. 0:36:34.290,0:36:37.990 Thank you very much, and. Appreciate it.