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