Hey everybody, DrupalCon is pretty amazing. There's a couple of seats in the middle right there. If you guys all want to scoot in and make some room, stop being fire hyzers, Lee and Seth back there. All right, so this is rocking out and debugging Chrome developer tools. My name is Mike Herschel. I'm a friend and developer at Lullabot. If you haven't heard of Lullabot, we're a full service digital agency, all that good stuff. We have design, development, content strategy, Jeff Eaton, it's pretty awesome. We're all distributed. So, all right, I have to talk into the mic. I'm losing my train of thought right here already. This is gonna be bad. So this talk, I'm gonna give you a history behind this talk because this talk is the talk that I wanted two years ago. So, if anybody has some type of internet time machine to zip this back to me, it would be completely awesome. I'm getting some feedback. Thank you, Chris. So the backstory behind it is when I got brought into Lullabot, I got brought in for the sci-fi.com project and I'm gonna show it in a little bit and you're gonna see the comps and there's a lot of stuff moving around. When I first started comps for this, I was like, holy crap, this is gonna be slow. I need to understand how this works, how to fix it, how to troubleshoot it and where to go. And so, I did what I think is a pretty good job with that and I learned a lot of things along the way. And so, going forward right here, does everybody remember Firebug? Like, it was so awesome. Firebug came out in, I don't know, 2005, 2006-ish. And you started using it and it's just like your mind gets blown, you know? So it's kind of an inspector, you know? It was the original web inspector for Firefox. And so you'd click, you know, inspect element and you'd highlight the item and you could see the CSS properties in there. It was so, so awesome.  And it would look like this. And yeah, it was pretty messy. So, like, this whole session right here is, I have maybe like five slides. And it's all gonna be happening live. I have a couple websites loaded up. I'm gonna basically go through like the different tabs and dev tools. I'm gonna talk about some beginner stuff, some intermediate stuff, some advanced stuff and a lot of tricks. And it's pretty cool. And so in the spirit of doing it live, I'm gonna like mix things up right now. I am, I'm launching my Twitter app, right? So you can tweet me at my cursor. And the notifications should slide in and that's gonna like really screw me up a whole bunch. You can ask questions or you can heckle me and it's gonna be pretty awesome. Twitter handle's right there. And I don't know. It's gonna be pretty funny. So we'll see what happens.  I have stickers. So like demo, right? This is, I don't know if you have seen, Lullabot has VR headsets for our giveaways, like their Google Cardboard-type headsets. So this could be you. And we still have, I think, a number of them to give away at our booth so you can come hang out with us and stuff. So let's see if I have this work in here. Hey, hey, look at that. Twitter's coming in. So I have a, I'm gonna make fun of some Florida Drupal Camp stuff too. It's gonna be kinda cool. So like, let's, so, I don't know if these go away. Oh, here it comes, all right. So, all right, so let me just kinda walk through sci-fi right here, right? So as you scroll down sci-fi, a lot of things start moving and we're gonna talk, it's fairly smooth, like against all odds and we're gonna talk about that. Let's go into the developer tools. Who here's a front-end developer? Who here does, as a back-end developer? And who here's just like, hanging out? Got a couple of hangouts, yeah. That's pretty awesome. So to get into developer tools, you right click and you can just go to inspect. And so I'm gonna zoom in right here, I'm gonna hit Command plus, I'm gonna zoom in so you guys can actually kinda see what's going on right here and I can see too. So you have a number of tabs across the top and hopefully you guys work with this and you know this, right? You have the elements tab, some network tab, some console tabs, all this type of stuff. So we're gonna kinda work our way through, right? So if you're looking at an element right here, we're gonna start with some basic stuff. You see where my mouse is over here? You click this and you can select the element. And you select the element right here and you can modify the element by typing in here or whatever. And you can also modify the content. And if you modify, modifying the content is pretty important because we work with this content management system, right? And who here has editors that put in content that you just did not expect, you know? So a cool example of this that we accommodated for right here, you see where it says live now, battle dogs, whatever the hell battle dogs is? But so sometimes sci-fi has movies like Alien versus Chupacabra or something like that up there, right? And so well, how do you accommodate that while it's narrow, right? So well, to test it out, this is just one thing right here. You start typing, you know? And you can see kinda what happens. So what I have right here is a CSS ellipsis right here which can kinda gets bigger and smaller, it has some CSS calc. But that's kind of an example of where Chrome tools can kinda help you out by testing out content and stuff like that. Something else that you can do right here, that's pretty cool, is you can start dragging stuff around. You can click and drag it if it works here. And so you can kinda start moving stuff around as that goes around. And that will help you see how your content adapts and stuff like that. You can also, I'm gonna hit Command C, take a copy of it, go up one level and I'm gonna Command V and I'm gonna paste in a whole bunch of stuff right here. And you can easily see, you know, you can create your content within the CMS and then duplicate it within DevTools and make sure your CSS does not eff anything up. And that's pretty powerful. Something, when you're going into this type of stuff, you can click in here and you can start adding classes, you know, like background, red and all that type of stuff. And so that's pretty easy. This is where the majority of my work is, screwing with stuff, making sure it works. There's a couple of little tricks in here. So there's some new stuff that gets added. Let me kinda do a backstory right here. I was given a similar presentation to this at Drupal Camp Atlanta. And while I'm up on stage, my browser locks up, right? But I kinda roll with it and I'm like, you know, screw it, we're gonna happen. So I quit it and launched it and I had a new version of Chrome, like no joke right then. And like, so that is how quick this updates. I literally went through this a couple hours ago, like has anything changed? You know, luckily nothing has, so a couple hours hopefully we can do that, right? So a couple of new things that are in there. You can easily toggle classes now right here. So you can see all these CSS classes that were added by Modernizer onto the HTML limit. You can start toggling them on and toggling them off. That's kinda cool. You can do this before by double clicking within within the actual classes and start messing with them that way, but this is a lot easier. You can set hover states on stuff or so if I can right click on this and I can set it to hover and I can see what's gonna happen right here, right? And honestly, like right now nothing because that's it. But what's kinda cool is you can also right click and you can select focused, you know? And that's gonna make like, my coworker, Helen, are happy to test, you know, your accessibility and stuff like that. Does it give an indicator if it's in focus? You see this like little scroll into view thing right there?   You know? And it's like you can't find it and you're kinda setting the background of it to red and stuff. You can right click on it and you can scroll that into view. So I can like, I don't know, select this guy right here, go to scroll into view. And if it works, it would actually scroll down. Let me find someone to put it. Scroll into view. Yeah, so you can kinda see. You can see I've been messing with some CSS stuff there. But so that's kind of a nice, useful little tool right here. A couple other things that you can do. See, I'm gonna go into Florida Drupal Camp. So I worked on this, is animations, right? So I can click on this little icon right there and I click on the image. Is it the image or? So these bubbles right here are CSS animation. I'm gonna get into there. It might be on the, so we have our A or C. You can speed it up and slow it down and stuff like that. It gives you a little preview of it if I can get into it here. It might be on the wrong image here. Yeah, anyway. So it'll give you like a little filmstrip view as it's working down there. And it's kinda cool because you can go forward and you can actually see where it's being called. Or see what it's being done to. You can also do, you can also see your event listeners.  Does anybody ever like go through the whole thing like this and you gotta move your mouse and go back and forth?  Command Shift D goes back and forth. And what's funny about this is I went on Google's documentation website to figure out how to do this, right? It's not listed anywhere. And so I Googled it and of course it's on Stack Overflow. So that's kinda how I found out about that. So that's kinda neat. You can look at event listeners here. So you can see like right here, there's an event listener on this. You can also see an event listener on this right here which is kinda cool.  And what this does, this is pretty cool. Bam. Nice little Easter egg there. But it's kinda cool to be able to see to check your event listeners. And you can also go through, let me move this back down. I'm moving my mouse right here. And when I scroll right here, I'm adding and removing a CSS class to the header up here. Let's see if we can see this happening right here. You can see I'm adding the scroll down right there. If I'm going into someone else's code and I'm trying to figure out where that's coming from, what I can do is I should be able to break on attributes modification and scroll down. And it'll actually, you can kinda step through your jQuery stuff and figure out where it's coming which is kinda neat. Eventually this will come through. But something else that's kinda cool is if you're in a minified CSS or JavaScript, you can see these little brackets in the bottom left. You can click on this and it'll on minify it. It'll kinda do its best. Obviously it's not gonna change around to function names and stuff like that. But it will make it kinda nice. It works pretty well with CSS too. And at that point you can get in here and you can start just screwing with stuff. You know which is kinda cool. I have my little cheat sheet, no pad up here, everything I wanna cover, let me check. Another cool little trick that I have right here is if I'm looking for something, I'm trying to figure out what's changing. You can hold down the alt button and then click over here and it'll open up all the child items. You can see it's working pretty pretty here. Pretty hard here but it'll open up everything within there and that's kinda useful if you're lookin' to see what's turning purple as it's changing and stuff like that. Kinda cool stuff, right? Does anybody learn anything yet? Oh yeah. We're just like gettin' started. It's gonna get cool. I'm gonna get a drink of water. All right, so I actually have a favorite tab in Chrome Developer Tools. My favorite tab is the timeline tab. But I'm gonna make you wait for it. We're doin' the network tab right now. Yeah, I know. So the network tab's kinda cool. Let me kinda make this big for everybody. Someone, I don't think I've gotten heckled yet.  I'm gonna hit Command Dari right here and so you're gonna see a couple things. I have disable cache checked up here. So it's going to disable any type of browser caching goin' on. Within Developer Tools you can select throttling right here, so this is pretty cool.  All right, all right, screw you, Steven. He's right here. And yeah, close that out now. And so, see, you got me sidetracked here, buddy. Yeah, so thank you. So I'm talkin' about 3G, right? So you're out there. Has anybody like been in a situation and like you need to get something done and you're kind of in a hurry, you're rushin' or somethin' like that, but of course you have 3G signal, right? So you need to make sure you accommodate those types of situations for people. You know, I think there was a keynote about designing for emergencies or somethin' like that which I, unfortunately, I missed that, but I heard it was awesome. I'm gonna watch that on YouTube. But so this is a way to kind of do that, right? So you can look through the loading time right here, the film ship, and you can kind of see when stuff is loading and how it's going. You select your throttling and then you hit reload and it'll kind of do what you expect. As you scroll through here, you can see like the time to, you know, first paint. The time to first paint is like really how your website is judged for speed because it's more about your perceived speed, you know? And that's what makes things like BigPipe and like the new refresh list module pretty powerful because it really speeds up the perceived speed. You know, I don't care how it functions on the backend as long as I think it's fast, that's what I care about. You know, so let's just kind of look through here. So when you have a website, of course the website's put together if you're like a whole bunch of different files, right? A whole bunch of different assets. You have style sheets, JavaScripts, a bunch of images, maybe some fonts and some other stuff like that, right? So every single one of these is an HTTP request and you can kind of see it as it's coming in right here. I'm gonna make it smaller right here. So you can kind of see what we have right here. We have 166 requests. That's honestly a lot, you know? A lot of that is ad stuff coming down. You can filter that to domain www.scifi.com and you can see 51 of those are actually coming from the sci-fi domain. It has a lot of ad networks on there that's pulling down and a lot of tracking code. But you can kind of see that. You can see when the DOM content is loaded and you can see the page size right here. The page size is obviously super important. When we were working on this website, we were noticing that the content editors, this is before it launched, they were uploading PNGs for that large hero image. Those PNGs were like three megabytes each. So like, all right, well, how do you solve that? Honestly, the easiest way, what we did is we just limited the content type to accept JPEGs. You know? I mean, yeah. And so at that point, you know, instead of like a nine megabyte page download, you have in this case like a two megabyte page download, which honestly for a heavy website like this with a lot of images and stuff like that, isn't too crazy, you know? So you can keep an eye on that and you can keep an eye on your web page speed. You see where my mouse is up here where it says use large request rows. What's kinda cool is it'll show you the size difference between the normal page size and then the gzip page size. So when your website is being sent down over the wire, your server will typically gzip it up, which is basically like zip filing your web page as it's going down. And you wanna make sure that's happening, you know? So look at, if you don't see a discrepancy between these numbers right here for the text files, that's something for you to be aware of to look into. Something that Drupal does not do out of the box is gzip SVG files. So SVG is scalable vector graphics. And so if you have a big SVG file within your website, out of the box, Drupal's hdaccess file does not gzip that. You need to be able to identify that within your dev tools and fix that by adding the appropriate rules in there. So there's a bunch of cool stuff like that. You can filter, of course, by like CSS images. You can look at fonts right here.  And you can look at this type of stuff and you can see like if it's going through some type of content delivery system. And you can also see if it's being cashed by Varnish, which it really should be. So you can see the X of Varnish's cash right here. So that means this is being pulled out of Varnish right here. Which is awesome, that's what we want. But that's a cool way to kind of troubleshoot that. You can preview your different things as you're looking at them. You can look at cookies and timing and everything that you kind of expect right there. And yeah, so that's kind of the network tab. Any questions or anything that I'm missing here? Yeah, it's actually pretty straightforward. Up here you have a filter box. You type in domain. You see it kind of auto completes. And then you have all these domains that load up and just start typing. Yeah, so this has like obviously a whole bunch of like ad tracking and like user tracking and performance tracking and NSA tracking and you know. So yeah, it's pretty cool, huh? Like Chrome DevTools just sneaks stuff in there all the time, you know, this like cool little stuff that you don't even know. And you're like, huh, when did that get in there? You know, so that's kind of neat. Let me look through my cheat sheet right here. Make sure I'm not missing anything. Oh yeah. So there's a little checkbox up here that says preserve log that's pretty cool. So if you're doing some type of redirect, right?  You can actually preserve, you can preserve those HTTP requests in there by hitting the preserve log checkbox there. And that also functions for the console too. So like if you're doing a, I don't know, a web page that logs something and then redirects to something out, you check that box and then you have access to that type of stuff, it's pretty cool. Yeah, awesome. All right, so let's move over to what I, all right, so this is the eye candy one right here, right? So I'm gonna look at the layers. Let me move this over right here. Keep this above 650 because there's a break point right around there. And so I'm gonna go to the layers tab. And the layers tab is kinda cool because it actually gives you a visual representation of the layers of the web page. And I guess I should probably talk what a layer of a web page is right here. This goes down in. This takes a lot of CPU power as it's going, but ideally on the stuff on the right starts moving too. So the way that browsers work is that it downloads, of course, all your, it downloads all your HTML, all your assets and it builds the render tree. And the render tree is basically like the CSS and HTML put together. It creates what's called layers, right? And so the layers, the layering is called reflow or layout, right? And so after that the browser goes through the painting operation. The painting operation is when it's actually putting the pixels on the screen. And after that it goes through the compositing. It goes to compositing. And compositing is combining the layers and actually, you know, putting it up on the screen. What's kinda interesting about that is layout and painting are very expensive operations. Compositing is a cheaper operation because it's done on the GPU as opposed to the CPU.  So the way that you, the way that you do that is by creating individual layers out of the stuff that's moving around. To do that you can use the CSS will change property which is pretty new. Something that is a little bit more well supported and more of a hack is if you can promote it to its own layer by using like a CSS 3D transform. The one that I use on this website is back face visibility hidden.  And the layer you can move around, you can transform around, change its opacity in this very, very cheap on the CPU or on your computer which basically improves your frame rate, makes it so like my mom's computer running when there's millennium does not fall over and die. So, how do you troubleshoot that type of crap, right? Let's kinda look at this.  I'm gonna kinda reset this. I'm gonna set them all to back face visibility visible which is a default. You got an important thing. If I go to the layers tab right now you're gonna see there's one layer. Because everything's not split up. And what I'm also gonna do, something I'm gonna, you can go down into settings right here. I don't know, I'm sorry, I'm in the wrong place. You can go into show console. And if you go into show console which you have your console on the bottom right here there's a couple extra cool, I don't know, options listed down here. The one that is one of my favorite is rendering. So rendering is what I'm talking about right here. What I'm going to do is I'm gonna enable paint flashing and every time there's a repaint you're gonna see it's gonna flash green. So as I start moving down here the whole damn thing is green because it's repainting. And remember repainting is a very expensive operation. So if I go back, I'm gonna leave that, actually I'll leave that checked. And I'm gonna go back and I'm gonna uncheck the deoptimization that I did and now recheck this. And now when I scroll you can see it only does the repaints every once in a while when it shows and hides something. So that's the type of optimizations that you wanna look for. There's another cool thing right here. Show layer borders right here. So the orange ones are the ones you wanna look at and it's kinda cool just to look at and see how your browser is working right here. So you can see that this little div right here is inside its own layer. And the reason I have that inside its own layer is it does its own independent opacity change and all that type of stuff. So that's kind of a cool thing. You can have the show FPS meter up here. So as I'm scrolling up and down you can see what the frames per second is. You want your frames per second will max out at 60 and that's what you wanna shoot for. You wanna keep it above 30 and if anything's below 30 at that point start looking into it. For normal web pages that aren't moving stuff around this isn't that big of a deal but you start moving stuff around it obviously becomes a big deal. Has anybody ever gotten to one of those cliche parallax websites and you're scrolling and you see the background image and the background image is just like do, do, do, do, do like that, and it's just struggling? What that is, that's doing the repaint and the frames per second on that is so janky. So this is kind of a jank removing your jank right here. You know, right? So there's this check box right down here show scrolling performance issues.  And honestly, if anybody ever finds out, tell me, because I'm really interested in it, it's never... Cool, so it'll tell you that. I've never found that out. Thank you, Adam. Awesome, thank you. That's pretty cool. And then you can also emulate print media. You can emulate screen media and stuff like that, which is kind of neat. Absolutely not. So Adam Jimerson just told me what the stro scrolling Perf issues checkbox does. And so it'll put an orange highlight around layers that are overlap, or if it thinks there's gonna be some type of scrolling performance issue. So that's kind of neat. Let me look at my cheat sheet here to see what I'm missing. Oh, I know what I can get into. Mobile emulation. Does everybody see this little button up here? So if you hit this button, you can change common phones. And you can even edit this list of phones if you have something specific that you wanna test on in here. And what's really important to realize is this does not change rendering, your browser's rendering, or it does not emulate that. But what it will emulate is it'll emulate the screen size, it'll emulate the touch. And it will also send a different user agent, if you're doing user agent sniffing. And that's pretty interesting. Yeah, so that's pretty cool. If you go down here, there's a couple other options. You have obviously the throttling option. And there's also like a MIDI queries that it'll show you. And rulers, which I've never really had a decent use for, but it's still kinda cool that it's there, right? So there's a couple cool options in here that you can get down and dirty and do stuff, right? Pretty neat. I'm gonna make sure I'm not missing anything here. Any questions while I'm going through? Yeah, so the question is, did I give an example of how I did layers in the sci-fi? So I'll show that in a second right now. All right. So I'm hitting Escape. I'm hitting Escape on the keyboard to get rid of the console drawer there. So you're gonna see like right here, if you look at this, there's a whole bunch of different layers. So each of these layers are the stuff that's moving around. So let me make this big and minimize it right here so I can show you what's moving around. So as I start scrolling right here, what's happening is everything's position fixed, which means that it's fixed to like the top left corner of your viewport. So as I scroll down, you can see even though it's position fixed, it then starts using CSS2D transforms. And the CSS2D transforms start moving up and then other stuff at the same time is also changing opacity. So in order to make that very performant, I promote it to its own layer. And when I promote it to its own layer, I do that using back face visibility hidden on that parent div or container. Does that make sense? He says sure. Yeah, it's cool. All right, let's kind of get back down to it, right? So let's look at the timeline tab. So the timeline tab is kind of cool. I am going to start scrolling around. Well, I'm gonna hit the record button right here and I'm gonna start scrolling around and then I'm gonna hit finish and this will take a second here.  It's kind of cool. Let's take a look at it. So the first thing that you can see up to the top left is your frames per second right here. So the little red dots are potential scrolling performance problems right there. Oh, I clicked on you. All right, let me get back to where I need to be. Which is kind of interesting. You can see your CPU level, your CPU performance profiling going on right there. And you can actually, you should be able to, you can highlight into this and you can see what's taken up a lot of time. So I can see there's some angular stuff coming in here and you can actually track it down to see where it's going, which is kind of neat. If I did not have my painting optimizations in here, you would see a lot of green. The green within this is painting. And if you were to see that, we might be able to see a little bit in here. I think I see some right here. This painting, this is compositing. So compositing is what we want, right? Because compositing, if you remember, is what's on the GPU. So if I didn't have my optimizations in here, you would see a bunch of paint, you would see a bunch of painting in here and you would be able to track that down to see what layer is painting. It's kind of a backwards way of doing it. The easiest thing is by going through the paint flashing, that show paint flashing that I showed earlier, which is pretty neat. So when you're looking at these flame charts and stuff like that, what you really want to kind of look out for is the stuff that's taken a long way horizontal because that means it's taken up a longer time, right? And so you can click on these as it's going down and you should be able to kind of see what's happened. So this is just pulling in jQuery right here. There's ways to also black box jQuery, which I'm not gonna set up right now. If you go into your settings, black box, you can add a pattern in here and you can just type in jQuery and it'll kind of pass through there when you're trying to debug your JavaScript, which is kind of neat. Let's see. So you can go into Chrome flags and enable DevTools experiments. So let's kind of do this so you guys can kind of see this in action right here.  Man, I can really see, let me command plus this. There's enable developer experiments right here. So you can enable this and then what'll happen is within your DevTools under your settings, you'll have this tab right here for experiments. And this is where you enable the layers panel.  But what's cool is like this isn't at all. There's a secret in here. So if you press the shift button six times, one, two, three, four, five, six, it shows more stuff. You can't even like make that type of stuff up, right? So you get in there and start screwing around with stuff. Geez. Don't ask me, it probably involves some beer. But yeah. What's that? No, I haven't done it. So this is the same way you do developer tools in Android. Yeah, so if you tap times, you get developer options in Android. It's probably the same developer. That's why they chose six. Probably the same Google developer. I don't know, but yeah. So that's kind of neat, right? So let's kind of go through here and see what else that we have here. So you can do the screenshot similar to the loading screenshots on the timeline tab, which is kind of interesting. There's a new, this tab right here is security, right? So if you go to a site that has SSL, let's go to lobo.com because that's where I work. If the internet's working right here. It'll actually tell you about the certificate. I honestly don't really know. I'm guessing that'll help you kind of troubleshoot to make sure it's safe and stuff like that. And on top of that, I'm trying to think if I miss anything. So the console is obviously super important. Something that's kind of really interesting within the console is you see like this little equals equals dollar zero. You can type in, you can use dollar zero to refer to this element within your console. And if I click over here now, this one's dollar zero, but this one right here, you don't know it. It's also a dollar one. And you can kind of work your way through when you're doing debugging. It's kind of neat. And yeah, I believe so, yeah. Stay on that scene. No, it's the ones that you have selected. So like the last one that you have selected is like one. The one that you had selected before that is two. And stuff like that, if that makes sense. I don't know if I have too much else. Do I have any questions or any how-tos or anything? Go ahead. Yeah? No, no, no. All right, I'm gonna just repeat it since you're in the middle. So the question is how to enable the layers panel.  And when you go down to Chrome Flags, you're gonna wanna look for developer tools experiment. And you're gonna hit the enable button right under here. After you do that, you're gonna need to relaunch developer tools. Thanks, Matt Cleave. And after that, you're gonna go into your developer tools. You're gonna go into settings up here. From there, you're gonna go to the experiments tab and you're gonna check this box that says layers panel. And that's how to do it. Any other questions? Yeah, I should be able to do that. So if I select something in here, I should be able to do like dollar one with or something like that, but I forgot dollars zero. Honestly, probably not, I don't wanna. What's that? I think, I thought I was doing that. That's what I did. Let me do it on the, I had this website loaded too. Yeah, all right. I don't know why that didn't work on the other one. So there you go. Does that make sense? Yeah, it does. It's kind of neat. Go ahead. Oh really? So you said you can inject JavaScript real time? Yeah, something else that's kind of cool. You kind of just made me remember this right here. It's maybe not completely related. When you're getting into this, you have like a lot of like kind of sublime key combinations where you can hit like the command button have multiple cursors in here, which I don't know why this isn't working. You can do multiple cursors within your sources tab. So it should be able to do that and you know, type multiple places and stuff like that. Yeah, so what I'm doing is I'm holding down the command button and putting cursors wherever. And I also should be able to, I think hit like command D and do multiple selects and stuff like that. So if I want to select like everything that says form, which is probably going to be a bunch, let me unminify this right here. All right, I'm going to select URL. I'm going to hit command D and it's going to keep on going down all the URLs which I can then change. I'm typing here, but it's not doing it. But it would, you know, change that. Hopefully, maybe. Yeah, I haven't done that before. Like you can add stuff to your workspace, like add folder to workspace and stuff like that. And I've never gone through the whole, I've never gone through this workflow, but you can edit the files directly in here and use it as an IDE and basically use that as opposed to whatever your text editor is or your IDE is, which is kind of neat. Thanks. Questions? Go ahead. Oh gosh, I'm not the best at this honestly. Yeah. So what I generally do, let me try to find something that's changed in here. So what I generally try to do, if you right click on something, you can break it on attributes modification. Let me see if I can reload. If it comes up, what it'll do is it'll show you within jQuery where it stops. But you can also remember where I showed the black boxing earlier, you can black box jQuery and my understanding is it'll skip over that. And at that point, it'll go directly into the code that you authored. You can also skip over through the debugger and kind of work your way through that way too. Yeah, so I already have that right here. So I should be able to kind of keep on working right all the way through. It's not the best, what do you call it? The best showing of that, but it works when it works. When I get it to work, it works sometimes. More questions? Go ahead. So there's a cool way to do that. So you select something and you see over here, you can filter on stuff right here. So if I wanna see where this background color's coming from, it'll, first of all, you can type in color right here and it'll show your different options right here. You can expand this, click on this, pretty it right there and it'll actually tell you where it's coming from. Did he catch all that? What's that? Yeah, let me show you again. So basically I'm going to the computer tab over here, filtering based on, I don't know, something. I can see where it's coming through. I can click on this, which is gonna take me to the CSS file. And at that point, that's where it's at. What I clicked on is, I clicked on this little blue hyperlink right here. Oh, to purify it, I clicked on this little guy right here and it's already purified. But you see these little brackets on the bottom? That's what that button does. Anything else? Go ahead. Computer layout. Oh yeah, yeah, yeah, sorry. I mean, hold on. You're talking about this little, I think that takes you to the style within your styles tab. Or, here's to do it. Okay, neat. Honestly, I've never noticed that before, so thanks for teaching me something. Go ahead. That's kind of neat, yeah. So you can do like, it's like temporary CSS that you can put into here. Something else that's kind of cool within the elements tab is if you want to see what's behind an element, you can select it. And then you hit the H button on your keyboard and it'll actually hide it, temporary hide it. And it does that through the, it uses visibility hidden, so it'll still like exist in the flow of the page, but it'll just visually hide it. But that kind of reminded me of that. Select your element and hit the H button. And you can see it's adding like style. It's adding the web inspector hide shortcut right here. And that's basically pressed into H button. Go ahead. Yeah, I did a little bit earlier and it didn't work properly. Let me see if I can do it again. Maybe it'll work properly the second time. How much time do I have? Does anybody know? 11 minutes. Nice, I got plenty of time. I'm just gonna go to sci-fi. I think it'll still, it'll still, the break points will still exist if you refresh. Here we go. Live, live demos. Everybody needs to get off their phones. Stop tweeting. No, I don't think I am. I'm hoping I'm not throttling. Wouldn't that be funny? Yeah, no throttling. So within the animations, if you will, you can, basically you hit this little diamond thing up here and it's a fairly intuitive interface. You can slow stuff down, you can speed it up. And I think there's a little slider where you can kind of get into it and speed it up and stuff like that, which is kind of fun. Go ahead. I believe so, but I'm not exactly sure. Let's see if we can figure it out. So the question is, can we figure out the local changes? And I believe that is, man, I need to get on a webpage, right? So if I were on a webpage on the sources tab, I believe there's like a local modifications option somewhere in here and you can, that will go a long way to what you're looking for. I don't know exactly where that is. You have to set up a workspace, Adam says we have to set up a workspace first.  Yeah, yeah. Yeah, so that's a good question. So let me repeat the question here. So Chris doesn't get angry at me, he's coming up. Oh, can you, are you guys having trouble hearing? Oh yeah, so I'm gonna repeat the question. So basically, if you have a nested div that has a whole bunch of padding or margin, you don't know where that's coming from. How do you track that down? So what I typically do is, if you're in your elements, you should be able to hit your arrow buttons to kind of go down like that. And remember, you can hit the alt button to expand everything in a div. So you can go like that. I'm just using my arrow buttons. You go to the computer tab up here and you can kind of look through like that pretty quickly. Does that make sense? So you can see, we see some margin there. Yep. Yeah, and you can also edit these directly, but in a number here. So that's kind of neat. Question, over here. You should be able to, if you select the root element like the body tag, you should be able to hit control F and search for whatever you're kind of looking for. You can, if you're in your sources tab, there's a key combination. I think it's like, it might be alt shift F or command alt F, you can play around with it. And it will do a search of all your sources. So it'll search through your CSS files, your JavaScript files and stuff like that. That's pretty powerful. Go ahead. Yeah, I don't, I've never really got into that. Oh, nice. So basically, what this gentleman's saying is, you can audit your page in its current state, make changes and then run the audit again and it'll show the diff. That's pretty awesome. Thank you. I'll have to play around with that. In the back. I'm, I'm sorry, what was that? Oh, search all files. Yeah, so there, your key combination is, thank you right there. Command option F. Thank you. I never even, once again, there's a lot of hidden stuff in there. I knew the key combination, but I didn't know that option was listed right there. It's kind of cool. Go ahead, Derek. No.  Holy cow, you know. This is gonna be recorded. That's your blog post.   That's all right. Man, so, all right, so how do you find out more information? This is a good question. Thanks for asking, Derek. So, let's see if Twitter's working, right? There's this guy. Yeah, that's my daughter. She's much older now, but she's still super cute. All right, so my internet's not working. So, Paul Irish and Addy Azmani both work for Google, and they are developers on the Chrome Developer Team, and they are super awesome people. They're both my idols, and they tweet out stuff all the time, like little tips and tricks like this, right? So, and a personal note, I got really excited one time that kind of made my weekend. So, after we launched Sci-Fi, it was a Sunday morning, and I saw Paul Irish, who works for Google, was, he was critiquing some websites and doing audits of them. So, I tweeted them, and I said, hey, check out Sci-Fi.com, it just launched, and he tweeted back, he's like, well, mobile or desktop, and I said, desktops are all the cool stuff happens.  And then maybe about, maybe like five minutes later, he said, good jobs, good jobs avoiding the paint storm, good job, you know, and I'm like, yeah.  So, that was pretty awesome. Yeah, so, there's a lot of documentation on developers.google.com. A lot of the screenshots are really old because this stuff changes so often, but it'll give you an idea of what's possible and what's there and stuff like that. More questions, anything else? All right.


In this episode, you're going to learn how to create the conditions within an organization where service design can thrive. Even if that organization is traditional, regulated, and not very open to change. Here's the guest for this episode. Let the show begin. Hi, this is Angela, and this is a service design show, episode 111. Hi, I'm Marc, and welcome to the service design show. This show is all about empowering you with the most effective skills and strategies so you can design services that win the hearts of people and business. And the guest in this episode is someone who's definitely been doing that. The guest is Angela Obias-Tuban. Angela currently works in one of the largest banks of the Philippines, and in this episode, they're going to explore what it takes to embed a design way of working in a tough context like a bank. Some of the things you'll hear in this episode are how you can use design research to actually better understand the people around you and the things they need so you can tailor the offering you have to that and how something like quarterly reflections can help you to shape a design culture. So at the end of this episode, you'll walk away with some very practical advice that will help you to embed service design in basically any organization, even if it's as tough as a bank. If you're new to this channel, welcome and make sure you click that subscribe button because we bring a new video to help you level up your service design skills at least once a week. And I know that a lot of new people are coming here, so don't forget to click that subscribe and that bell icon. For now, sit back, relax and enjoy the conversation with Angela. Welcome to the show, Angela. Hi, Marc. Really nice to have you on. Again, somebody finally from a part of the world where it's really hard to find a lot of service designers. I'm sure there are many, but yeah, once again, I'm happy to have found you through Lauren in this case. Angela, so I gave a hint like you're in a part of the world, which is not the US. It's not Europe. Where are you? What do you do? Yeah, so I'm speaking to you from Metro Manila in the Philippines. So it's in Southeast Asia. Yeah. And what I do is I'm officially called a design strategy lead, which essentially means I oversee user research and analytics and also in part of planning for digital products and services for one of the Philippines' largest banks, Metro Bank. Again, a bank, just as Lauren said. Yeah, we are getting into the financial institutions in the latest last few episodes, but it's an interesting field. Angela, I haven't prepared you for this set of questions, but the people who are listening to the podcast now, what's coming by now is going to be a 60 second rapid fire. And just answer as quickly as you can. OK, OK, OK, OK. So first question, what's always in your fridge? Milk. OK, a lot of soy milk. OK, OK. Which books are you reading, if any? Right now, I'm brushing up on the field study handbook by Jan Chipsi. Yes, legendary. Which superpower would you like to have? Oh, my God, probably flying. I think I would like to get out of traffic. Maybe, you know, maybe one day. What did you want to become when you were a kid? Oh, I wanted to be a business person. I felt like my mom was a business person, so I wanted to be like her. I didn't even know what she did. She was just a business person. Yeah, you wanted to be like your mom, which is always a good ambition. A final question. What is your first memory of service design? My first memory of service design. Oh, um, um, probably an ideal video. I'm fairly sure it would have been an ideal video talking about service prototyping and trying to build. Like a rough prototype, maybe with boxes and trying to prototype a service. Yeah, uh, good idea has done a lot of good work for our field. So I'm not surprised I haven't had anyone from IDO on the show yet. Somehow, not sure how that happened, but maybe we need to, we need to change it. So the theme of this episode is going to be something related to how to design services that are useful, that work in an environment, which has a lot of traditions, regulations, heritage, so not the most easy environment to really practice service design and thrive as a designer. And I think you'll be able to shed some light on how you're dealing in that situation and, um, and give us some insights on how to create useful services. Right? Yeah, I hope so. I hope so. I'm sure we'll be, um, we'll get to some point, but when we were discussing this episode, um, you told me that this is a topic which is there to your heart. And I, I really liked, um, why that was. Can you give us a little bit of background, like, what is your first memory of background, like, why did you get into this and why is this important to you? Yeah, um, so I really started out my working life as a market research person. And through that job, I was able to see the power of listening to users and customers and listening to their needs, um, and trying to apply that to improve businesses and marketing, because that's mostly what market research deals with. It's mostly about advertising and brand, um, you know, product placement, packaging, but then, um, there was a particular point in my life. At that time, I was working for a media conglomerate and I was probably of over a decade ago here, like here in the Philippines and around 2009 and with, uh, I don't know if you want to, it's not fine. That's fine. Yeah. Okay. So in around 2009, I think that was the time that Facebook and like and video streaming was starting to become popular here in the Philippines. And we were doing focus groups to understand how people were handling that. And I was thinking, you know, I could witness that people couldn't remember what they were watching or they couldn't relate what they were doing on Facebook, for example, or on social media or in digital platforms in a, in a focus group setting, I feel like you had to watch them do it. So I was trying to pretty much influence our team to do more behavioral research. And that's, that's one part of it. It was trying to understand that, oh, look, when, when you are actually trying to plan and understand interactive services or interactive platforms, doing the classic, you know, survey or focus group doesn't really apply anymore. So I started reading up about all of those things. And that's how I started discovering, you know, ideal and all of the writing on it. And aside from that, not just ideal, but also again, as I mentioned earlier, Jan Chipchase who, who was doing a lot of work then with, with mobile phones and eventually mobile wallets. So that's, that's one of the things that sort of got me into, into that. And then the other thing that sort of pushed me, I think into this direction was so after having realized that, we were trying to help the company plan. And it really wasn't just, you know, when people start, when, when companies, very traditional companies start realizing that things are changing, they don't necessarily know how to adapt. And it's not just an adaptation of the actual thing that they're delivering. It's actually the whole operating model and the whole business model that they have to look into. And that's when I realized that even as a research person, I could only surface the insights. But I was always so frustrated about the solutioning. And then what I, what I realized from all of the ideal and all of the, you know, all of the design sort of, what was that, what was the trendy term for it before? I think before it was so interaction design. It wasn't even, it wasn't even UX yet in the olden days. And there's like human factors. They were more embedded in the planning teams. They were more embedded in the ideation work. So that's where I wanted to be. I wanted to be, I realized that I will always be frustrated, no matter how much I understand people, if I'm not actually part of the planning and design. And that's how I jumped ship into sort of a design discipline. Yeah, totally. And I think that's a big frustration, even if you're in the ideation stage and prototyping stage, that ultimately we want to impact the lives of people. We want to impact businesses. And that's also what I liked about your background story that you said, we need better services. Like a lot of services are broken, right? And that's what I got from your story so far, that's the thing that drives you deep down. Yeah, because at that time, again, having come from research, there was this one project I even had which was this whole year of focus groups trying to understand the Filipino, trying to understand people in our country and what they need and what they're looking for. And then you can see that it was so difficult for businesses to sort of plan what to do next or what to do with that information. So I realized I wanted to be part of shaping that. I wanted to be, I have this personal mission. It used to be, I think on my website, this is not up anymore, but that I really wanted to just create better products and services for people in our country. Because a lot of the services here in our country, like that's to say transport, we have some of the worst traffic I think in the world. We have very little public transportation. So just that's just a sample, but then it trickles down to a lot of things that the people in our country, because we are an emerging market, have just accepted to be, you know, to be, yeah, we just accepted that to be reality, but, you know, things could be better. And that's the thing I hope that is driving a lot of the people who are watching or listening these episodes that's somewhere deep down. We just feel an obligation to the rest of the people around us that we need to create a world where there is less frustration about services, where services are more consistent, reliable. Yeah, so I think a lot of people should be able to relate to your story. And I haven't been to the Philippines, but I can imagine that the challenges around services there are a different than over here in the Netherlands, for instance, but still deep down, I think we share the same passion. Now, you're working right now in an environment which has a long heritage. Let's keep it at that. What have you identified as some of the things that are holding us back from not being able to deliver on those services that we would like to deliver on? So have you, maybe not just in the bank, but in the systems around us in general? One of the things is, I think, you know, the world, as you mentioned, many people who are probably watching this series already care about wanting to improve services. And I think the world doesn't lack people who mean well, people who want to do better by other people. But the problem is really literacy, or at least in my experience, that's one of the things. And there's a lack of practical advice, because in the recent years, you know, design, like capital D, capital D design and design thinking has been quite popular. And I think that's also why, you know, many of us have, have roped now in large corporations, because there has been a big uptake about the value of design. However, not a lot of people are well versed in terms of applying it in an operational way. People understand the theory behind it, and people understand the value, at least in what I've seen. But actually applying it is the challenge. And as you mentioned, especially if I work in a company with a quite a long standing heritage, it already has a built in culture and a way of working. So that's really part of the challenge of doing it. Yeah, so sometimes misconceptions about design, sometimes just not knowing how to translate this into practice, forms of existing ways of working, which fight against new ways of working, right? Are there any other things that you feel are sort of holding, yeah, holding us back or holding the current existing nonworking systems in place? Yeah, so as I started to mention, of course, there's inertia. There's just the way that things are. And this applies to, I think many, I mean, many teams that I've seen, not just necessarily where I'm currently working at, but, you know, as I mentioned in my example earlier, the common thinking is if it broke, don't fix it. So if the business seems okay, or if the products seem okay, then there isn't much of a push to change how people are doing things. And, yeah, again, I started out in research and analytics or research and analysis, and I'm very big on metrics and measures. And one of the challenges that I've seen is that it's also a reshaping of what's the business values and is trying to measure. Because what happens is, if you really follow LitVay, so LitVay and my older corporation, like let's say on TV, on TV or like for TV businesses, the only thing that matters are ratings.  But, you know, because of the onset of LitVay digital platforms or, you know, the change in the notion of ownership, like I don't have to own a TV anymore. I don't have to own a DVD. How does that then change your business? Because the business, as it exists, has always been optimized for that measure and not for the new things that have happened. So for me, that's one of the things. It's people getting stuck in a way of working that is actually meant for something that is much older, for let's say a world that is much older. And I think that especially now with the quarantine and the pandemic, that's really surfaced that.  So that's one of the things I think that is also the problem. Yeah, and I think you hit an interesting point. There are like measurements and measuring that has been a topic on the show often. And what gets measured gets done. And as long as we keep focusing on things that might have become less relevant and still keep optimizing our services and organizations around those outcomes, then it's really hard to change that. I think it's also really challenging to bring in new reliable metrics that are accepted by organizations. But yeah, I think that's one of the assignments that we have as a community to educate the people who are in the positions within organizations to start considering other measures. And I think if I can add, I think the metrics around services are quite difficult because some of them are qualitative. That's one of the challenges that I've seen in my work, that sometimes the way that you measure the value of the service, it takes a bit of processing because there's always, of course, time. There's time, there's cost. Those are the more basic things. But that's a pain point that people have along or across how they use the service that's not always easily measured. People can sometimes measure it by severity or the lack of severity or lack of severe problems. But it doesn't always accurately capture what you're trying to design for. There's a different way of measuring success around service-oriented businesses than around product-oriented businesses. I'm curious in your experience from the last few years, have you what have you done to overcome some of these challenges like inertial, like this measurement challenge or like there are misconceptions around service, around design in general. Can you share a few stories with us? Sure. They're not always pretty. A lot of them are things that I learned because I didn't do them properly the first time. Exactly. Which are the best stories? Yeah. Okay. So, for me, one of the things that I think I had to learn, so actually prior to joining, prior to joining the bank, the bank that I'm working at, Metro Bank, I was prior to do independent consulting and I actually worked with a lot of startups. So prior to that, I was very much used to a culture where I was primarily working with engineers and designers on a day-to-day basis. And then one of the challenges that I prepared for coming into the bank was being in an environment where not everybody is quite, let's say, equipped with a type of information that they would need to actually do the things that they wanted to do. A lot of people. Like what? Yeah. So one of the things, for example, is MVP. Just the concept of, oh, I don't want to talk about this, the concept of agile or agility and being lean because you write like a lot of, you know, even in service design, a lot of the design disciplines, it's all about prototyping and trying to get something out into the world to learn. And that is very hard for people who have worked in environments where you really have to push a polished thing out into the world or a polished, let's say, service.  So one example is, there are so many, but one example is we've tried to get them into certain frameworks and one of the things that I think I had to learn was repetition.  We work in, we work in the field where we design behavior and I guess I had forgotten that you can't just say or, you know, you can't just announce something and then expect people to run with it. You really have to, you really have to equip them and help them operationalize what they want to do or what you want them to do. So one of the challenges, for example, let's say something simple like testing, testing a prototype. I realized, you know, people want to do prototype testing, but it isn't enough that you do a walkthrough. So I started with doing a walkthrough with everybody. I would have a walkthrough with everyone who was part of, who would be part of watching the prototype test, but then I realized after the first run that they were so used to market research because in market research, everyone who was an observer really literally just watches. And they're not really part of it. They're not engaged. So I had to do a second run of walkthrough where I already demanded that we do a practice run and then also that every single person has a role. So that way we also controlled the number of people attending prototype testing and they also needed to be an active participant.  We have to really be part of it. So that was one of the things. But with that, we also needed to have templates. Well, yeah, I think just to touch upon what you are saying, a lot of our work is also empathizing with the people we are working with and trying to understand from their perspective on what we're doing and their environment, like what's going on, what are their monthly or quarterly targets and coming from that position translates that into our design process. I think that's one of the most common mistakes I'm seeing designers and service designers make is just slap on the design process until every challenge they see and be super user focused. But forget the people who need to help you and you need to collaborate with to actually make this work. So there is, I hope it's changing, but it feels like you're also saying the same thing, right? Empathy for the people, not just for the end users, but the people who you're working with. I agree with that because one of the things that I actually tried and am learning is that the design work that we do happens in various levels. So there's the organizational level that we're trying to design, which is as you mentioned, it's about empathizing with the people that are also trying to make this happen because you want them to be able to do it. You want them to be able to also apply it to their own goals because it's not just, let's say, it's not just my job to understand customers and then apply it into my work. It's actually everybody's job and everyone has to be part of it. So there's the cultural and organizational layers and then there's also helping them understand the process of it, like actually how to do it. So I've done various things for those levels. Like for example, for the cultural layer, I can give, I have two very specific things that I think have worked for me. One, so the broadest thing that I can think of is I actually made, I made a people framework for our team. And this is a lot of people I know are not found to force-track. And I'm not saying that we should all force-track, but what I've learned to do, and this comes from my job as a research person as a qualitative researcher, is the force-track can sometimes help you surface if your people metrics are actually incentivizing the correct behavior. Yeah, I need that example. What do you mean? Okay, so for example, what you can do, I've done this in the various teams that I've joined, that are really engaging the different managers and to ask them to rank their team from their most valuable to the least. But that's not the importance. The ranking is important. And actually, a lot of managers usually refuse to give me an answer, but I try to tell them that I don't care about the rank. What I care about is their reasons behind it. Yes. So I try to ask them about each of the reasons why one person is better than the other. And we surface that to make a performance assessment framework. So for example, for engineers, I think he's the most straightforward. So for engineers, one of the managers said he values one person over another. And then when I asked him why, he said, oh, because although one of them is amazing at math, which is critical for code, the other person, which he ranked higher, had cleaner code and was a better team player, he was able to have such well organized documentation of how he worked, that he was also a good senior to other people, which was more valuable to him than someone who could just, you know, brute force, and crunch a lot of numbers to sort of do a lot of things. So having said that though, it really goes to show what the manager values in a team. And if you take that example, and then you apply it to the various disciplines that make up a team that designs a service, hopefully, you know, you can end up coming, you can end up with a framework that captures what you value as an organization. So for example, in our team, we always say that we value scrappiness, because we even if you work in a bank, we want to be able to still take lean.  We're trying to replicate that, but within a very structured, it within a very structured and rigid environment, and we have some progress. But, you know, we had to, I had to take that scrappiness and see how does that, how is that sort of, how is that translated into behavior. So for the different members of our team, who is actually scrappier than another. So that's one of the things that sort of helped, helped me communicate to the other managers that I worked with about what type of behavior we should incentivize in our team, and what type of behavior we really are looking for. So that's one of the things on a broad cultural level that has worked for me. And that's interesting because you're applying basically design research onto the internal process. Yeah, but not so much on the end users, but on the people. Yeah, and that's quite interesting because you're taking somebody like a manager as a sort of the end user or consumer of this information. And then you're doing, using design research, the things that we know and do to surface the type of information that will help decision makers make more informed, embedded decisions that help to create, well, yeah, to improve team performance. Yeah, things they value. Because it really is about, as you mentioned earlier, it really is about shaping, you know, the work that we do, you know, service design is really about shaping people's interactions. And usually, you know, it isn't, I mean, I work in a field where it's kind of focused on digital, but even in a world where you're designing digital interfaces, behind the scenes, there are so many things that are run and done by people. Exactly.  I don't want to be disrespectful to, you know, to the things that they have actually measured and done well. But it's sort of incorporating that into, you know, I don't want to say newer because it's not that new. It's sort of incorporating that into a different way of working. And I don't know, it's sort of a cheat. It's a cheat on my end. I know the other thing is evangelization. I'm not a very good evangelist. I don't, I still struggle on that end of the whole design thing. I know that some people are very good at it, the whole presentation of innovation. And I'm not, that's not my core strength. But because I'm a, I'm a research person, that's sort of where I attack it. I like that. Where you're more comfortable. Yeah, yeah, yeah. Yeah, sort of what people value in a, let's say in a team or how they measure a person. So that's the sort of where I apply. Yeah, as you mentioned, me applying my design research into, into internal team members. So, yeah, which is, I think, a really good development for the design discipline to applying it to the people around us. With services, I think it's, I've made quite a few videos by now where I think what a message is that it's really hard to design a service. The best we can do is to design the environment in which services emerge. And then it becomes a really interesting discipline as we're not so much designing the artifact in between quotes of a service, but we're designing the stage where the performance sort of has to happen on the moment. And then it makes a lot of sense to, yeah, think about the people around us as the design material. So we talked about, you talked about inertia, management, literacy, any, any other useful things that you have found in your practice again to overcome these challenges? Yeah, so that's, I guess, though the people framework is more about again the cultural layer. The other, the other thing is doing regular, I mean, so again, there's also about the actual work itself. So that is sort of trying to build a sort of culture that prepped people for what we want to do, but then there's also equipping them on a day-to-day basis. There are two things that I found that really worked. One of them being, one of the things that I had to learn the hard way was not templatizing things. And I actually, I have to give credit to one of my teammates who used to be like a business analyst and process engineer. She made me realize that not everyone can look at a document and make a template out of it. So sometimes we have to be really literal. So one of the things that I thought, that I thought was kind of easy to do was I made a presentation for us, for every release. So I was thinking, okay, for every release that we're trying to put out into the world, we have to be very clear about what insights went into it, what's the scope of what we're doing, what's the goal, who are we trying to serve, what are the learnings about the internal processes that also went into this particular phase. And I was trying to do, I was trying to model the usage of it. So every time we had like release planning, I would also do, I would show it.  But there was like, there was barely any update on it.  So I realized I had to strip it down, make it an official template, give it to people, and then sort of, sort of requiring it has to sort of track whether people were doing it.   Yeah, you're really used to working with these templates that like you have, not even templates, but, you know, trying to, a general framework and then trying to fill it in. So I kind of assumed that most people would be able to do that. But then I realized that even for, let's say, defining things, people really need to have something to follow. Especially, yeah, especially when it's about like designing an experience. It's very vain to people. So when you say they need something to follow, what is that? What did you eventually, how did you, how did your approach change? Yeah, so I ended up creating templates for people, and then also having walkthroughs for those. So rather than, again, before I thought I should just model the behavior, like if I model the behavior, people will naturally also see that the value in it that, oh, okay, that seems to be working well. I will apply it into my own work. And then, and then I realized that doesn't really work all the time. So I had to simplify, I had to also break down the documents that I made. And then I had to simplify it, make it like a template with actual definitions, and then also how to answer it. So for example, for creating a roadmap, I had to make a sample. Yeah, one, okay, what is in, what is in a first release? In a first release, there should like, you should have a theme or a goal, a clear audience. And then what are, let's say, the user benefits within that first phase. So I had to be quite literal about it. But yeah, I mean, that at least showed an improvement because people had something to follow. I remember that when I was creating templates at our service design studio, we usually at the back of the template, we just have a manual. Like one, one page, one side would be, when it would be physical, one side would be the template and the other one, the backside would just have arrows and annotations and start here. And I recognize also what you're saying, especially if you want to have people outside of the design mindset, using these kind of tools, they need a little bit of, what is it, examples, guidance, that's the right word. Yeah, yeah. Yeah, it was, I think, because again, because in the years prior to something into this type of environment, I was used to working with a lot of engineers and engineers are so, you know, rabid about learning. They really, like the whole, you know, the whole open sourcing and local sales, you know, they're all self taught or many of them are taught. So they're very active in terms of trying to sort of adapt these things. But then yeah, I had to remember that for people who are very used to how they work really sort of had to push them a little. And the other, the other example that I think I have of something that works is I started introducing quarterly team retrospectives. Because there were, you know, within a project there are retrospectives. But I wanted the team sort of have a view of how we were working together and treat ourselves as not a product, but to treat ourselves as something that was also growing and iterating. So for example, I just had this anecdote on why I think it's really important. In one of the presentations that I gave, you know, there was a presentation, I think it was a research presentation.  And I didn't even, during my presentation, think of it because it was just, you know, for me it was just part of the process. You try to look at the work that you did. And then, you know, you have to improve yourself. You have to see the things that you were not doing very well. So I wanted to be very transparent about that. But again, to people who were working in corporate all their lives, that was, I realized it was quite unheard of and was unheard of to actually stand up in front of a group of people who were, you know, driving the business and actually say, I didn't do this well. And that's when I realized I had to get the team used to it. But it was like a muscle. I guess it's like a muscle. You have to get people to be using that, that transparency muscle. But it's okay. Like how are we gonna, how are we going to adapt a mindset where we can test things if we, we can't be honest with ourselves about things that aren't working, you know, within us or, you know, about how we ourselves work together. So yeah, that was one of the things that I tried to introduce. I kept it at a quarterly pace because I didn't want to sort of bombard everyone on a monthly basis. With, you know, having to reflect on how we were. What did you do in these reflections? Which questions were you asking? So I just, I actually just tried to follow one of the things that I learned from a Scrum Master that I worked with many years ago, where it was very, I liked his way because it was very kind. You try to look at your own habits and your own output and behavior and you ask yourself, so what did I do well and what could I have done better? So he mentioned that specifically because he didn't want any finger pointing that doing a retrospective wasn't about pointing out other people's faults.  I realized that that was the problem. Most people are afraid. I don't want to be cheesy and say, oh, I know people shouldn't raise failure. It's actually not the failure. It's the learning that's important. But if you don't put yourself in a position where you reflect on things that you didn't do well, then how are you going to improve yourself? And, you know, to be honest, like the first few, the first two quarters were a challenge. It was a lot of patting ourselves on the back and then still kind of blaming other people until I think it's a third run that we did. We really didn't do well that quarter. We didn't work well together as a team. I just went straight to what we can improve about ourselves. And I also tried to be snappier about it. I followed, I have to look for the link for that. But it was a process where you do one, two, like one, two, five, you do one minute with yourself, two minutes with a partner, where you talk about the key things that you wrote when you were, you know, doing the self-reflection and then five minutes with a group where you each talk about one of the, you talk about the themes that came up from your discussion. And then you try to talk about it as a group. And then because we were also getting bigger as a team by that time, so we needed to have a snappier dynamic. And then from there we wanted to be actionable. So after we surfaced all the things that we didn't do well as a team, I tried to ask the team to force rank, but to choose what they feel are the most critical things to work on for the next quarter so that we can track it. Because usually, you know, you'd come up with like 20 things that we can prove on. But you know, realistically, the whole team can't work on all of that. So we just have to be, we had to be very specific about, hey, as a team, what are the three things that we're going to commit to practicing in the next three months? And it was great because some of the younger team members really got into it in the, like in the, in the stages that we were doing it, where they weren't even trying to make acronyms for some of the principles that I wanted to try for the next quarter. So it was good because at least you really got like a team dynamic going about things that the team wanted to be better at. And especially if you're in an, if you're working in an environment, which is different and has different habits, different ways of working, and you're used to in a design context. For one, it's really good to recognize what the things are that you take for granted as a designer, for instance, the openness about failures and scrappiness. And I think a lot of us don't even realize that this is, this is different than most people are used to. So that's step one. And step two is then thinking about, okay, how can we improve? How can we grow? What can we learn from this and this critical thinking and reflective mindset, which is also part of the design mindset, but you have to apply it to yourself and to the context that you're working on. So that's, yeah, I can totally see that work and especially when the team is growing and you have some values that you want to adhere to. Yeah. Yeah. If you, if you had to summarize and give maybe people who are listening or watching right now, some quick tips on how to tackle these challenges, what would be like the key takeaways for you that you'd share with other people? Well, I guess this might be really vague, but I guess the theme for me is really, our work is about making services work for people. And that just, that doesn't just mean the end customers that we serve. Because yes, I mean, that's one part of the discipline. It's trying to map the experience of the customers that we serve and trying to understand how the services that we build line up to that. But there is also much to be said about understanding the processes and the people that actually make the service run. And my, I think my favorite tip is learn from, like one of the things I'm reading about Lean is that they have a thing called GembaWalk. What is it? Gemba, G-E-N-B-A. It's a GembaWalk, which means going to the place. So the people who made the Lean manufacturing or the Lean processes, like the beginnings of Six Sigma, they were saying that for you to understand a process of how something is being done, it isn't enough that you, it isn't enough that you try to like understand it or like do desk research. You really have to go to the place and watch the people who are doing it. And I think that it's really beautiful because he also says you have to go there ask why. So it's about, it's really, I mean, for me, like even, I think that was, I mean, the whole Lean manufacturing thing was what, 40, 50 years ago or probably 60 years ago. But even then, even then that was a principle. It was about observing the process of how something is done, but asking why. So that you are able to then sort of, you know, make solutions even for the people who are in the team. Because sometimes again, sometimes it's not straightforward. Sometimes it's not a straightforward to tell them, oh, we need to do prototype testing. We cannot expect them to, yeah, we cannot expect them to get into our world, right? We, we have to get into their world and then move from that place. At least I think that's some more effective approach. Agree. If you can't ram design down their throat. Yeah. Yeah. That's, you know, and the, the, the thing is we're not, we, we don't feel like ramming design down their throat. We, we're just so excited about design that we want to share this passion with everyone. We're so in love with it. And we forget that sometimes other people have other things that they need to worry about rather than falling in love with design. Angela, that was really interesting to hear some of your experiences. If people want to continue this conversation with you, can they reach out? And if so, how? Sure. I'm on Facebook. I actually have a Facebook page that I curated sort of all of my experience design related work there. It's my name, Angelo B.S. Subban, UX Research. It's in the show notes. Yeah. Tweets. Yeah. You can also tweet. My, you know, to find me on Twitter, my handle is yellow ice Don't ask. I was a teenager when I made it. So I kept it. Okay. So either Facebook or Twitter, and I'm making sure that all the links are in the episode, the description. Awesome. I learned a lot. You articulated some of the things that I think we need to articulate more often around the design, the discipline of service design. So thank you. Thank you for sharing that, Angela. Thank you so much, Mark, and I'm just so happy that you have this initiative happening in the world. I think it's such a great thing to be able to, like for me, to be able to listen to other service designers as well about, you know, the work, like actually how they do their work is incredibly useful because it's so hard to find practical advice on how to do our work. Thank you. Happy to hear that you're enjoying it as well. That's, that's nice. Thanks, Angela. I really want to thank Angela for sharing her experiences with us. And I hope that you enjoyed this episode and found some very useful and practical advice in it. If you know somebody who needs to see this episode, grab the link and share that with them. That way you'll help to grow the service design show family. And that helps me to invite more guests like Angela here on this show for you. If you'd like to get more practical advice on how to design services that win the hearts of people and business, make sure you check out this video because we're going to continue over there. See ya.


Hey fam, Raif Derrazy here, and I am in San Francisco at the moment for the annual Hope Collaboratory meeting. HopeCab is something that I'm a part of. It stands for Community Advisory Board. I'm one of the co-chairs for that. And the whole purpose of the HopeCab is for members of the community to be able to come together and work with members of the scientific and research community who are working towards an HIV cure for us to come together, exchange information, exchange knowledge, communicate with each other, and then for the community members to be able to go back to the community and kind of relay that information in a way that is understandable by the LA person. And then the scientists and researchers hopefully walk away with a better understanding of the community and what our concerns and issues and things like that are that that might be able to help and contribute in their research as well. So it's really coming together, bridging those together, mixing them up and seeing what comes out of it. Hopefully something good. We met for a session. It was a room with some art installations placed in the room, and then we kind of split up and basically meditated on this art for 10 minutes, and it was related to HIV. And then at the end we filled out like a questionnaire about what we picked up from it, what was our reactions, how did we feel about it, and then had like a group discussion about it. It was really cool. And then we all got together the Hope Cab, which I'm a part of, and then also the scientists, the researchers, everybody into one big room, and we all had this like molding clay to work with. And so we each kind of just created something out of this molding clay that we were inspired to based on HIV, HIV cure, HIV cure research. So as an aside, there are many modalities that researchers and scientists are exploring towards an HIV cure. There's more than one attack angle, basically. And the one that Hope focuses on is block, lock, and excise. It's blocked by ART, ARVs. It's the medicine that blocks it so that it's basically frozen, stuck in its place, and it gets locked like that in the cell. It's not able to replicate in free flow in the blood and infect other cells and stuff. So it's locked and blocked by ART. The goal is with an HIV cure that we can remove the medicine component, the ART or the ARVs, and it will stay blocked and locked in the cells no matter what. Basically, at that point, you're functionally cured. The third and final step, which isn't necessarily has to happen, because block and lock could do the job all on its own, because you're functionally cured at that point. But if we're able to excise, meaning remove the virus from the cells, then that would be the final stage in the block, lock, excise. Modality, which is what HOPECAB is fixated on, in which the scientists who work with HOPECAB are working towards. And excise would mean pulling out specifically the HIV virus and nothing else. It's like with a scalpel and precision cutting out just the DNA. But like I said, even without that, if the virus is blocked and locked in the cell, unable to replicate, you are functionally cured at that point. You'll make sure that the information communicates both ways bi-directionally between the scientists and our community members who are joining us at this conference. So it's really exciting to be with you all today and to have so many people in the same room going to be making together. Okay, everybody. Welcome. Knowledge is always partial, blur, diaphanous, refracted and incomplete to us. There is no solid answer. Parallax is a key notion that really drives this work on care. That is that when you come from different perspectives, you see different things. So in this diagram, you can see that if you're looking at the object, or in our case, it would be data, if you're looking from B4A and B4B, you actually see two different things. Stigma that still exists and is very well alive and kicking around HIV. And we see it 40 years later with the MPVX slash monkeypox. It seems like we're 40 years down the line and the same racism, homophobes, and discrimination that we saw at the beginning of the HIV epidemic, which happened with SARS-CoV-2, where was discrimination for the against Asian communities. We're seeing it with monkeypox. So stigma is well and alive and kicking and we feel that the arts and bringing together scientists and communities is a really powerful way for all of us to change those narratives. You would sort of automatically put your science mind to it and sort of think about answers. But once you have to start doing this with your hands, it's a total different activity and mindset. And I think it's really amazing how fast you change and actually start to enjoy to think with your hands. And so I'm a chromatin biologist and I admire the beautiful curl chain that usually the DNA is rolled around chromatin. And for me, HIV is sort of a disruption in that curl chain. But I have never tried to build it myself and I've never appreciated how difficult it actually is to build it beautifully symmetrical. So I'm at all how what nature has done and I think I'm really grateful to have that experience now to try to think with my hands and come to no conclusions. Thank you. There's a sort of metaphor of the problem that the scientists are facing. You're not working with something like stone where once you have established something, it stays unchanging. This clay is malleable and as we are working with it, it itself is changing. It seems to me a metaphor for the evolutionary processes that are going on with the virus itself and also with the way the immune system is responding to the virus. It's very hard to get something absolutely firm out of it. So the malleability of this material is a metaphor for the scientific problem that you're working on. I did manage to pull a couple of people aside to talk about what they created, who they are, what they do and what inspired them to create these little sculptures that they did. So check that out right now. This one here. This one, okay. Can you tell us what we're looking at? Yeah, it's kind of a guy being excised from the South DNA like a metaphor for the freedom, which is the idea of a cure. And what are you doing? I'm a postdoc researching the HIV reservoirs and now we are about to start approaching with a spironolactone treatment. Oh, yeah. What is that? What is that? Spironolactone. It's one of the candidates to silencing HIV. So this is the scientific part. And I also, my mother lived with HIV, so I had this emotional connection with this also. And it's a mixed thing for me. The scientific and the emotional connection. And that's it. Thank you. Hello, here I'm just, I'm not like an artist, but I like to do this activity. But here I just try to, these two together, all these two together, because I'm trying to show this life cycle with a human being thinking about how to find the cure with HIV and the sign of HIV and DNA here. And here in the complexity of the cell and all the complexity of the HIV cure research. I'm an ID physician and I'm working in the clinical research center and in lab too. Okay, awesome. Thank you so much. Okay, can you point out which one you created? So I created three pieces. Okay. The first one is this. It's a live protected by a medicine. The second one is this little gentleman here. It's an aspirinolactone pill holding and locking the HIV inside the DNA. Can you, that word, spiral? Spirinolactone is a drug. It's a drug that we are studying to see if we can perform this kind of activity. Protecting from HIV to multiply. Okay. And I realize that I'm the most un-talented person on earth. It's true. That's why I made medicine. I mean, I studied medicine. And can you tell me a little bit about what you do? Yeah, I'm an ID physician. I work at the University of Sao Paulo and we do collaborate within the Hope Collaboratory in the clinical track of our research. So it's been exciting and I'm looking forward to the next follow, the next few years. Yeah. And hopefully we're going to come up with something exciting as well. Yes, I hope so. Excited? Yep. Okay. Thank you so much. Tell me your name? Ashley. Ashley. Okay. Show me which one you made. That guy. Okay. Tell me about that. So when I thought of like a representation of lock and lock, I kind of thought of, in the concept of lock, like something being captured or in jail. Mm-hmm. But it's kind of hard to make a jail out of play. So I made a net out of it. It looks like, yeah, I was going to say. And it's captured the virion and it's kind of like. So it's the HIV in there? Yeah, this is the HIV virion. Virion. Can you tell me what that, because I never heard that term before. That's like a single HIV particle. So more than one is virus? Yeah. And why is virion? Yeah. How do I, you just learned that for the first time in my life? That's great. People use them interchangeably. HIV virion. Okay, love it. But since this guy is by himself. Yeah, that's what I made. Yay. Thank you. And what do you do? I'm a scientist at Gladstone. Okay. So I study both HIV cure research, but I also study HIV transmission. How we can either block it, particularly in women, because they are a very underrepresented population that hasn't been studied. Yeah. Basically how different agents work with it, the female reproductive tract that we can use to block HIV. Interesting. Transmission. Okay. Thank you. So show me what you created. Well, in the comments I made earlier, I said that this working with this material is a metaphor for the scientific problem. Because we're working with viruses and with a human and new system which are evolving. And I was trying to represent a virus which is inside cells. But the whole process is we're gathering insights. Slowly we're trying to understand it. But as my piece has actually shown, the system that I was observing has now already changed and evolved into something different. And that's the problem. And that's kind of the hallmark of HIV. That's the scientific problem that the virus is mutating. The human new system is adapting to the virus. And so the task for scientists is to try and understand the processes as they're changing. And tell us a little bit about what you do. I'm retired now. Back in 1963, I graduated from university in the UK with a degree partner in physiology. But I'm dazzled by how much scientists now are able to do in this field of physiology and biochemistry. I'm just dazzled by the precision of their understanding and the power of the tools they have these days. Well, thank you, Richard. Appreciate it. Thank you. What's your name, first of all? My name is Zichong. I'm in Manling Aus Lab at the Gleisten Institute. And I work in the RF1, research focused one for hope, Collaboratory. Awesome. And this is my artwork. It's a bit nice, very simple. But it's a very deep meaning. Because once HIV got into the cells, as it is rolling the dice, it can choose whether to make new viruses or become sleepy, become dormant. So, in chronically infected patients, most, all of the viruses are dormant. But still, yes, they are dormant, but they still have to take their drugs all over their lives. It's because the dormant virus in their sleep, they are still rolling the dice. They are still trying to figure out whether to activate or not. So, most viruses are dormant? Most, if not all, viruses in chronically infected patients are dormant. That's mind-blowing. I've never heard that before. Yeah. And so, it's just, even though it's just a few that become active, it's enough. It's enough. For the virus to... For the virus to rekindle a whole blown infection. That's why people have to take their drugs all over their lives. Yeah. So, part of my work is to find a way to lower the chance of the virus to become reactivated. Basically, make the number smaller on each side of the dice. Yeah. Because... Is that a permanent change? We hope to achieve a permanent change. We achieve this by changing the way the proteins wrap around the virus DNA. Because once HIV got into the human cells and put its DNA in the human DNA, it's become part of the human DNA. And the cells will be like, this is part of our cells. It's rapidly using proteins. But we are trying to modify how the cells wrap around the HIV DNA to lower the chance of reactivation. Very interesting. Yes. What got you into this field of research? I got into the field of research 12 years ago. Before that, I was from China. I got a master's degree in China studying shrimp viruses. But I got interested in HIV because I had some extensive interactions with HIV-infected people in China while doing volume hearing works. So they are... At that time, 12 years ago, maybe same as now, there's still a lot of sort of stigma and political environment. And more difficulties for those people in China than in the U.S. I came to the U.S. because the U.S. has the best medical research facility. But we are trying to figure out a way to cure HIV for all people in the world, especially in China and other developing countries. So it has to be affordable. Okay, thank you so much. Thank you so much. Nice to meet you. This is Pauline. And so tell me about CARE. What is CARE? What does it stand for? So CARE stands for Community Arts Integrated Research and we're part of the Community Engagement section of the HOPE project. It's been so exciting today having everybody make art. And all these pieces have their own stories. It's fantastic. And you brought together I'm a community member, co-chair of our HOPE, and then there's scientists here and researchers and... And CAB members and graduate students and scientists. Such a mix, yeah. And so what are you hoping doing this is going to help achieve for the greater mission of finding the CARE? Well, the CARE program is really focused on creating educational curriculum on how we might present the CARE that HOPE is working on. So we're really trying to find out how is the CARE going to be taken up by people living with HIV and community and public. And so talking to everybody and getting information from everybody is what we're trying to do. And we're using the arts to be that spiritual communication. And you know what I noticed when we were talking about some of these pieces and people reflecting on what their takeaway was is that some people had like aha moments just in working with the clay just in kind of reflecting on certain pieces. And I feel like we often say like in the shower we have these aha moments. And I think scientists and researchers need that just as much as everyone.  This is like, does that? Absolutely. No, you're spot on. All right, well, thank you. Thank you, Paul. Hello. My name is Pisse Veruja. I come from Brazil. I'm Paul. Me, I'm not an artist. I think everyone here has come along. So, but I had a great concept that are some broken handcuffs to evidence the process, the multiple process of HIV criminalization. Actually, it's a process that go beyond the criminalization of HIV transmission but concerns to the criminalization of people or against people that lives with HIV. So, I made some broken handcuffs to show what I have been facing for so many times. And I also did this bump. Yes. Yes, the red ribbon. Yes. Yes, that's it. I made this red ribbon to remember us about the importance of being together of uniting communities, scientists, and political politicians to build together strategies to fill this HIV. I'm a transpologist. I'm not an anthropologist. And to tell us what transpologist is. Transpology is a person. Maybe you know I'm a person for social anthropology but I have been studying transgender and travesty people for a while. Transgender in what? Travesty. Travesty is a Brazilian identity which is a distant identity. Feminine, distant identity. You may know as a trans woman here but it's very much specific and perhaps worldwide it is translated as travestite but we cannot translate travesty because it's something rational and very specific about our political social reality. I'm Sara. Sara, nice to meet you. Nice to meet you. Nice to meet you. Nice to meet you. Hi. Okay, so tell me what you created today. Well, I did create the uterus and my rationale is that most of the HIV Q research is still today done on cisgender men but there will be no cure unless we include more women. And so this uterus represents the cisgender women that we need to target in order to. And I think especially in the U.S. people forget how many women are affected by HIV in the world. Yeah, actually more than half of people with HIV in the world are female. Yeah, I would say most people I talk to don't realize, have no idea. Yeah, that's because the face of the epidemics in the U.S. especially like in California is driven by gay men which you know it's unique but it's not the whole story. No, not at all. So. And so what do you do? I'm a virologist. I do HIV research and I am interested in sex and gender difference and I strongly believe that there will be no cure unless all genders are included in our discussions. Thank you so much, sir. Of course, thank you. All right, tell me your name? Davy. Davy. Nice to meet you, Davy. Nice to meet you, I'm Brian. Nice to meet you, Dave. Yeah, thanks. So tell me what you created today. So today I created a little sperm. And it's all about we have to recognize that there's all different parts of the body and it turns out that the male genital tract is one of the prime reservoirs for HIV because immune surveillance doesn't happen there. So immune cells can't get in there to knock out the virus. I did not know that. I bet a lot of people didn't know that. And what do you do? So I am a physician and a scientist and a virologist and working on trying to cure HIV every day. Very cool. Thank you, David. Thank you. So I hope you thought that was cool. I learned some things. I hope you learned some things too. And now we're getting ready to go to the Gladstone Research Institute. This is where the labs are. This is where they do the work, where they do the research and the science. So I'll show you what I can. And yeah, let's go.