 Good afternoon everyone. Good to see y'all. Is anybody tired? I'm a little tired. I think I got almost four hours of sleep, but I'm here. I'm excited. I'm really... this is a topic I really care about and I get excited talking about, so I'm glad that you guys showed up and we'll get to work on something together here. The title is You. Yes. You. Need to sketch and that kind of comes around from all the interactions I've had with people over the years that are not designers and that are designers and just realizing there's a need to communicate things visually. So we're going to do a little bit of that today. My name is Joshua Wold. I work at a company called XWP. We do a lot of development work for different companies and different clients and my role in the company has been to try to communicate confusing things in a simple way, whether it's working with our developers and architects as a designer or a product owner to interact with the client and just make a lot of things that could be confusing more simple. I live in Coeur d'Alene, Idaho and I just like to show pictures because I think it's awesome there. In my opinion, one of the most beautiful places on earth. There's my little family. This is old. She's now over a year and she has opinions about life, but I just left it up there. There's the lake town I live in and I want to figure out a little bit about you guys. Raise your hand if you are... I'll start off with a... if you have a label of designer of some sort. Perfect. Developer. Perfect. How about equivalent of a project manager and then small business owner and anyone working in a web development type company and then raise your hand if I didn't get you at all. Okay, awesome. That kind of gives me a sense of where we stand on things. We're going to do three things today. I'd like to give a little bit of a talk ahead of time to give the context for what I'm talking about, why sketching matters, then I'll do a sketch live to kind of show what I'm intending and then we'll do some sketches together. I've got three examples today we can do, but if we start getting a little tired or bored we're just going to quit it too. So we'll kind of just see how it's going if the exercises are going well we'll do more. All right, so this workshop is for someone who is a... two broad categories, designers and non-designers. I want people to be encouraged to communicate in a visual way. So I work with developers all day long and they are sharing with me really good ideas that need to be written into user stories or acceptance criteria, etc. and that the client needs to understand. So I'll often write up a quick sketch to say, hey, developer of mine, friend of mine, is this what you were thinking? And he'll go, no, that's not what I meant at all. And that tells me in the two minutes I spent on my sketch that I misunderstood and I need to fix something and I'll go, oh yeah, you're right, that's good. So I have my definition of what sketching is because I just want to set a baseline. It's sketching is drawing wiggly lines, wobbly circles, arrows and squiggles and squares on paper with pen. That's my definition and it's not supposed to be art. Although I am a designer that's not the point of this workshop. So I've got a couple of things that I've been able to do. I like to share stories. That's me in Idaho and I was working remotely last year with a client in that part of Australia, don't know where that is, and then a medical worker in that part of Australia. And as we're working on a project, we had, by the way, my voice just cracked, I got sick on the way here and the worst signage pressure was landing on the last plane coming down. So it gave me a lost my voice, it's recovering. I had a website I was working on with our team and with the client and we wanted to have a portal on the website. You can see up there a pretty portal and when you click on the portal you go to log in to the backend. When you go log in you get to see a bunch of tools in the portal and get to use them for this if you're a customer of this website. But one of the most important tools is this analytic tool. If you click on that you go to another login and then you've got a login with a separate username and password and then you get to go to the analytics. This is actually what 90% of their customers actually cared about this page. Do you see how many steps that took? So I was in a meeting with the client and with our team and we were talking about this problem and for an hour myself and our developers were just trying to share with the client why we thought those steps would be concerning and they weren't they weren't too technical so it wasn't their fault they weren't quite getting the problems we were explaining. Between the hour-long meeting and I had a short window of 10 minutes to the next meeting I made the sketch because I wanted to explain what the problem was. I showed the sketch to the client and I said here's what's about to happen. If we created the way that we're talking you got to go through all these steps to finally get to this page. She saw it she goes oh well that's stupid of course we're not going to do that and she just took out two of the steps immediately. And this kind of a 10 minute sketch and a conversation probably saved us hours of story writing, development time, testing time, design time and that's why something like this can be so important and you can see here this is not a beautiful artistic piece this is ugly quick messy lines. I'm not changed afterward this is what I used live. Last year we built a house no yeah this year it finished it finished this year it was it was long it was quite a process and this is the neighborhood where all the houses were going up and my wife had had our second child she was at the time like two weeks old when we went into the builder to meet and we're tired if we haven't slept and we're draining all the things in the house all the decisions we have to make in two days for everything and one of the decisions we made was on the back porch looking into the back porch across the mountains I live in Idaho I love mountains I get to look out and see the sunset over my backyard so we want two windows back there and what we want are three foot by six foot so that's this tall this wide and this tall that's what we said and we thought that was pretty clear when we went to actually see the house getting built my wife and I walk in and I'm less perceptive I wasn't really worried I was just looking around and she immediately walks right up to the windows and she starts getting very concerned because this is what she was expecting she thought we were going to get this beautiful view looking over the mountains there's a view and that's what we got what had happened is I had actually signed off on three foot six inches by three foot six inches so I signed off on a decimal instead of a dash and I'd like to use this example of had I just been able to see a quick sketch of what the backs that's out of the house would have been instead of a foreground had I just seen something we would have immediately known something was wrong and we would have called it out and then the builder they were very kind they went and fixed it they had to do all this stuff so this is a non-development example of why sketching can really help this to me is one of the most important lines in sketching it's beautiful and it's perfect it's just a squiggly line and then this do you guys think that that'd be that hard to make well it's just a couple little shapes so if you can do that then you can do something like this you can create a web page you can create buttons you can create arrows you can create elements on a page and in my sketching these are the only required tools a pen and a paper so that's what you guys have today because that's that's all we need to use and if you can use those tools maybe here's a couple little ways you could change a button you could do stuff like that but that's really all you need in terms of most sketching just a couple of shapes and then you could do something like this you could say clients of mine I have a home page and I need to call the action to link off to an about page and that's it this is stuff that just conveys a ton of information because you and I could sit there and talk all day about what we want to build but the moment we do this we can get on the same page and there's actually a sketch on paper just to prove that I actually do use paper at times so I'm going to work through this walk through this one a little bit faster but last year I was getting to work on some things in Gutenberg some different projects and Mattias had brought up a block that needed to be created and so this is I'm going to intentionally jump into something a little more than basic sketching just to show where you can take it so I looked at the user story I looked at I took a screenshot of what he was asking for and then I just went ahead and printed the sketch I said I think this is what we're talking about and you can go check the github ticket it's there now I said I think we want to have this and this and this and then we got some feedback and I actually then took it to the design process which you can see there that's still not that complicated I'm just looking at a few elements and suggesting something and then from there you can actually see we took it all the way to a full clickable prototype but once again this was based on a very simple sketch and you know that that's beautiful I don't stuff like this another example that I love is in a WordPress today there you have the ability to save drafts in the customizer and it kind of started back a year and a half ago with several developers talking back and forth and at one point I got pulled in to try to talk about it and then it went back and forth this was the first sketch I was given and this one's a little more confusing than most but from there I took it to this and then I took it to this and it got a little messy after that and then it kept going and it kept going and finally we'll see it kept going we thought we had something but we decided to cancel that and start over and it kept going and finally we just stopped all that went back to a simple sketch because we've gotten so far into the process it was taking hours to make any changes so I just went back to this so for me as a designer and working with developers and project managers and clients no matter what type of work I'm doing I'm always coming back to those very simple sketches and so I'm going to do now if I can get the the test point worked earlier we'll see switch to the iPad I'm going to do an example of sketching live and I'm doing it on the iPad for two reasons one you can see the screen and two I just I think it's cool all right so here's an example that I'm going to sketch of that this could actually come up pretty quickly from a client I've got a flow and I've not done this yet so I'm doing this live I'm really just thinking out loud I've got a flow that a client needs that I'm working with a publisher this is a native example who's using Microsoft Word so that's that's Word and they're writing all their articles in Word and then they're pasting into Word Press and they're pressing the little format button and then they paste into there and then they add their featured image and they add their metadata and then they submit it for review so that's their current process what I've just done there is in a couple of seconds started to identify what that could look like and now we can talk about what their current process looks like I can obviously do more detail and then what I could say is well instead of doing that what if we did this what if Word Press could be your first source of authoring and then you press submit for review and then what if there was a way that the editor could redline it which is actually a ticket being discussed today what if there was a comment system over like Google Docs where you could comment and redline the text and so once again this is something that needs a lot more discussion we actually would need to figure out what this means could be a lot of discussion but we can just quickly think out loud and play with what that looks like I'll try pulling back into the iPad here all right to the Mac think we're good perfect that worked okay so that's all out of the way now we get to go to the fun part what I'd like to do is have everybody take pen and paper and we're going to only spend I think three minutes and I want you to tell me what the place you slept in last night looked like if you slept at all so top down isometric whatever the view is just showing what that looks like and let's spend a couple minutes doing that Brian and Jonathan go through and grab a couple from you guys and show them up here also if you've never done sketching before by any chance go ahead and raise your hand because I really want to see that all right do we have one right here who's never done sketching I want to see that right behind him okay well let's see here thank you perfect should I if I have anyone talk should I have them liked or does it matter for the audio perfect so Jonathan if you want to just show them two down I want to I think this is awesome okay I'm going to take a picture and let's plug into here we'll get it yeah all right so tell me about your room last night though basically there are two chambers separated by a door yeah and the bathroom and four beds so were you here here right there that's the bathroom oh that was the bathroom that's the bed that was your bed yes so is this a huge room here yeah nice okay it seems pretty cool get a place to sleep I like to call out that you know if you haven't been sketching before like I totally like this I know you're talking about here this is your conveying to me what happened and we can have a story about it all right let's see what else we got I think I need to switch this rotate this perfect oh so who was this I want to hear about that that those beds look pretty small I think oh whatever we're going to see it sideways um John I'm going to take the mic over to him so the full-size beds or twin beds what are those this is two bed so two beds yeah closet on the right on the left and the window on the right I'm always curious to see what I'm going to get because um one time I went to a conference and it was past midnight when I finally got into my room and there's three other guys I've never met before all sleeping and I had the choice to climb in bed with the guy on the single bed by himself or sleep on the windowsill uh I chose the windowsill I laid in there and so that was that was the most unique one I had slept in let's see here okay so who was this one I'm going to bring the mic over thank you yeah tell me about this room I try to why don't you tell me what you've seen with this room I know there's no what colors that painting is oh there's some rocks some rocks okay cool um I see some cool lamps and is this looking out across the patio yeah yeah and um this room looks small is it uh I'm not sure any it's kind of huge I like the room better than mine yes that it looks the same as my hotel room so same as your hotel room point square hotel or something that's not okay but it's similar it's along the right there is a bathroom and I have the bed there and I have the view on the right to say I was in Amsterdam and um I think the beds in America tend to be bigger than Europe based on my experience the last couple of times and I was surprised the bed literally was about my size and my feet got to hang over a little bit um but that was okay I still felt good I was tired thank you thank you let's see and a couple more here all right who is this yeah I'll pass this right here so how did you sleep last night uh I slept well yep that's my bedroom I don't see live here yeah all right that that is good yeah that's um a lot of curves you see the the it's loft oh yes yeah uh and huge bed so the first night that I got here it was 95 degrees that day one of my co-workers told me it was going to be in the 60s all week so I packed my winter coat I packed a sweater I packed everything warm for the conference I everything to keep warm and it was 95 degrees and the first night I had no AC so I actually there was my room was very stuffy so I actually slept on the tiny little couch out in the living room and then the next day actually I have an amazing Airbnb host that came in and installed an AC the next day so I've been sleeping very good since then I think we have one more here we got a couple of views okay this one's on the water who goes this one perfect right there thank you thank you so much yeah so it's actually a houseboat a hotel yes and yeah it's on the water and there is the top down the room it has three beds one two one big double bed and two smaller ones and there are two windows and here's a shower and then in the bathroom so one of my friends has been trying to convince me that this is the way to go how is it do you like it yeah the view is spectacular it's really nice it has all this atmosphere but it's totally stable and I don't know if it's a fake houseboat it's on the water it doesn't move at all it doesn't move at all I don't know what they did it with I imagine that would be a good thing for most people to not have this way but that's really cool thank you I'm gonna switch back to this I just like this exercise because it's a way to tell stories it's a way to just show how things went what we're what we're doing and convey how your room might have been I want to do this example of and if you need any more paper just raise your hand and we'll help you out but I want to do another example let's sketch a product homepage if you have a product that you actually work on or an imaginary product or product you like to be better just sketch out what that homepage might look like and here's some things that you can include in the homepage really all you're trying to do if you imagine that I'm your developer that you're about to hire or I'm your client you're trying to work for what do you want to convey to me to make sure we get on the same page so spend a couple minutes doing that if you're done and you would like to volunteer yourself perfect, Jonathan, Ryan you're gonna grab a couple let's see what we got here I'm gonna start off by saying what I think this is and then maybe you can correct me if I'm wrong how does that sound okay my impressions of it perfect so let's get that screen shot all right all right so up on the top left let me zoom in a little bit there we go we've got a big logo the biggest one possible we want to make that as big as we can that's great we've got a drop-down nav a couple of items up there login and then out to blog posts a word about who we are and then we've got what is intended I guess as the fold for what the screen would probably show right yeah cool and then about us section probably a photo of who I am all the teams of the teams okay perfect so the teams in the photo and then a phone number and with this what if this is your imaginary company what do you guys do I didn't fault about it it would just be a basic website or yeah team I don't know what team yeah so um yeah this is if I'm going to be a developer for your site or we're going to talk about it I can have a conversation with you because I know what you're thinking I know at least what your basic idea is yeah yeah so for me this is really helpful I get a sense really quickly of okay he thinks the whole page will link off to these places we think that we're gonna have to have this kind of information and then from here after just a few minutes we can then maybe sketch out what the another page would look like how all the pages flow together so thank you that's cool oh thank you that's perfect all right we've got it looks like we're selling something and who is this one here perfect right back there Jonathan oh perfect okay so we're selling something I've seen some social media on the top my shopping cart a couple of called actions so two of them what would be the story behind having two just secondary and primary yeah it's just more like depending on any special offers or you know view the category or find out something like it doesn't have to be a product yeah hero area it could be a video it could be something about you know see our story or something like that it doesn't always have to be a product yeah and then your latest products probably a carousel or you know featured products or something yeah yeah and then that's kind of cool just calling out a discount or some kind of a upsell right there on the home page yeah just like build the email list and in case I was not gonna buy straight away they may want halting first and yeah throw in the newsletter or whatever awesome and then video some testimonials yep and they're all three star so happy customers it's good they didn't have time to be five stars no that was good they're working quick um and then below just some I guess some additional widgets are probably it's like just like a regular footer with any like you have usual payment gateway logos another feed and a map showing where they're located some some medication links for all the the boring pages like the terms of conditions and awesome all those bits so for you do you feel that you've kind of been able to convey what you're thinking at least at a high level to talk to someone about it yeah as the first draft if someone explains that that's how I would maybe put it down to paper and then that can be tweaked into version two three four etc awesome and obviously and I think in the context of web development because it's what I do you can apply this out of areas but the great thing about this is we've not brought in specialists yet they absolutely are needed I am part of a team of specialists but right now we're just having a high level discussion about what's needed and we can just quickly figure out what we're thinking and what we're not thinking and if you do this for more pages you can start to pull things together a little bit faster um let's see I've got a couple more I think oh let's go let's grab two more awesome thank you all right let's see no that's that's perfect all right that is cute I like that it's a widget and a very happy person selling a widget yes and then below we have features of the widgets and then I'm assuming if it's seasonal you're kind of highlighting why it's seasonal or why it's great and a special offer that's awesome I love the little illustration on there any if you were trying to convey to me what was important anything that you would add or say hey we need to be thinking about this for making this website and just make it simple a single call to action and show images with a little bit of text yep and what you've done there is the final product will probably change a hundred percent but in the beginning you're telling me hey this is the basic direction I'm thinking of taking with this that's awesome all right and we've got one more here I think no we've got two more all right we've got it looks like a of real product or the potential to be a real product x9 the only fire extinguisher you'll ever need for your classroom $399 or something yep that's a price all right so let's see the features it's got a quick grip release a safety valve a seal of arrival approval approval and quality construction there's something else that is awesome so you're calling out all those features the best fire extinguisher I ever had amazing job to save me from a fiery death five stars I have to get out on five stars this this is really cool this feels like some of those amazon reviews I've seen um I'm liking it right now but uh it's like yeah it worked or didn't work anyway that that is I would probably be interested in buying this if it was cheap enough any let's go any thoughts on it yeah the first thing you thought of that is cool all right well and then one more all right we've got here um and yes and this is a two-column home page yes what do we have here what do we have here um not a very creative but very common product section on a page like not yet what I had to work on yes it's just the middle section so title of the product like clear view of the price um clear view of like short review like what people think of it the stars and then maybe a short explanation but if people want to read more they can extend it this is actually I've come across this example a lot of times with clients where we have a product page and we're not quite sure the details of it and I've um I had a potential client come to me and he was just sharing how it was not converting at all um and he'd gotten feedback that the photos weren't working the thumbnails weren't usable they couldn't select the proper options and um being able to show something like this and talk through something like this it doesn't take any energy to throw it away and try another idea um and that's I love doing simple things like this to just quickly convey ideas thank you for sharing yeah come in so and there will be some some upsells in the bottom like below the cta that they can just go to other related products maybe a test model and yep and then I'm guessing those are thumbnails to potentially increase the size of the other photo above it yeah or details or show it from another like side or yeah just click on it and what I get inspired by by seeing all these examples is um designers are often used to doing this and so they continue to try to express themselves a little bit better I always try to walk the line between too much detail and too little because if I go too little the client doesn't want to see it if I do go too much they think oh um he's already decided everything for me so there's it takes up practice but what I love also is when non-designers give me things like this they're not um they don't think oh only the designer could touch that only the designer could do this this really is a simple thing that anybody can do and I've had team members of mine um it clicked one day they're like oh this isn't anything special I can totally just do this and I've had some folks say well I did a sketch but it's not that good and I see it and I'm like no this is perfect this is exactly what I'm talking about we can now I can figure out what's in your head so let's switch over to the Mac thank you and I want to do this one more example and then I want to take a little bit time to to ask some questions to kind of chat about what I like to do um so let's spend a few more minutes and this one um by the way if you want to do another example go for it this is just my suggestion um let's go through this flow so a couple of web pages a couple pages with arrows or however you want to express something like this flow for a service based company um the if I come to the home page and then if I were to want to read more information about your service and then maybe look at some more pages go sign up and then maybe what that sign up looks like what would you want from me and what might that look like so it's like a few minutes to do that and I want us to volunteer thank you let's do maybe five or six and I see one over here let's see here all right um with this one we've got and who do we have for this one perfect with this one we've got a service based company and we're going through the whole flow um maybe talk with her briefly what you're thinking of this so the visitor gets to the home page there is they read all all about it they keep on finding out more details that takes them to the sales page with all the the various copy benefits and features of the service and that's number two yes I forgot to number the rest of them oh okay they then go on to the sign up form or whatever process it is to to sign up for the service takes them to a thank you page which then results in an email which then triggers some sort of an onboarding sequence whether it's with emails or some crm for the service provider to then follow up with the client depending on what kind of service it is the onboarding sequence can be tailored to online or offline service or software or whatever it is that's it yeah um what's really cool about something like this is we could start to figure out all the pieces that might need to be involved in this website obviously there's more discussions more sketches but then a whole list of you could say here's all the things I might start to need and then if you're doing development you could break it out with different tasks you could add descriptions to those and very quickly you can make sure no big pieces are missed because I've been in projects uh there was one recently where um we had estimated out everything we taken care of everything but there was one important little piece about exporting and importing the database and kind of been looked over a little bit and that ended up requiring some special work from our team that we hadn't quite done about ahead of time and obviously you can't catch everything but sometimes if you can lay all this out you can figure things out ahead of time all right let's see the next one is this one and there we go it's the idea would be counter service-based company does accessibility reviews for websites so you read something brief about why accessibility is important some statistics that can can be catchy then you span you go to like you want to see more information you get a sidebar with a number of arguments that give you more detailed information show services and stuff like that and you get on each page you get a speak icon that allows you to activate a kind of browser reading like experience yeah just to know how that page leads to some of that kind of frequency and then it goes sign a code to action you go to the code to action again you get another page that shows you how you can allows you to select a number of fields like the number of pages that you want to review what kind of review you want to get for kind of accessibility you are checking what kind of requirements that accessibility might have like what kind of institutional low and again you can speak that up the real feel that you have to feel is the email to sign up again a quote or getting contact with someone from marketing but you can speak that so that you can actually while you're you're doing the awarding you're also showing people how you can speak a page that contains information but not just information and forms so on the forum page if i know a little bit about maybe any legal requirements or my audience i could say which ones i'm interested in not interested in yeah okay and is this something that that you guys do does this exist or no so i just needed that like this sounds cool i would be interested in this and part of it is even the educational aspect of it because maybe i haven't thought of the audio part of it so having an icon there like oh okay makes you realize what what your web page might sound like red but that's really cool um i also been thinking of features so that you could go further to show other examples of what the web page feels like it looks like with other accessibility needs yeah you could have a toggle it's like colorblind stuff like that to show you a person which is not colorblind how it looks to someone which is colorblind stuff like that yep i used to design with it really 678 point font because i thought it was cool and then i started having well i've always had some eye problems i started having eye strain looking at the monitor and now i really i push for bigger font sizes and everything i make um because it's just actually easier for me to see like that's just the reality before i didn't i could see tiny things and now it's harder so i'm now more aware and appreciative because i've been cognizant of a very small need there awesome thank you okay we've got a service that um i think my son would love to have monster begun it's in beta we've got we've had some testers so who do we have for this one oh yeah it's still a prototype service clearly yes um so yeah you can call for help or you could use the option for no thank you i prefer to be eaten obviously you want to ask a bit of information about the size of the monster and what it eats and then you can call for help at which point you are given that reassuring notice that monster begun will be within 30 minutes but of course you can cancel the service and click here to eat and and then i think finally we have um the usual gtp i'll notice at the bottom i like the size really that is perfect i love that um and with your monster um how how's your uh user testing going they were developing the evolving so that was in the we have no data perfect that was cool thank you for sharing and i see another let's see this one here all right we got a homepage awesome no yeah um yeah it's classical homepage um users coming to the to the homepage want to know more about the company something else uh who are the guys i'm i will working with so going for more about us to a detailed page with a big image of two guys or yeah um writing stuff about them a lot of images yeah everybody loves images and they want to um keep in touch with email or social media and the poor clients um press the button for the email so they have to accept the gtpr and all the stuff yes and maybe we will ever write them a newsletter or something like this if we are allowed to do this yeah it is interesting how um six months ago this uh some companies have been doing it properly all along and six months ago this whole cookies gtpr sign-up thing was not a real big conversation it's changed how i've gotten emails yes it's another email from us yeah i i totally love this because you you could see how much news about uh you got in in the whole year so just get rid of a few of them yes and really it to me it's become a way of um just recognizing how much is going on around me and maybe having a little bit more control over it so i'd appreciate it and we've got one more here right it is this phone full of an electrician's website so you start on the ad and yeah go ahead so um yeah it's just basically um service service um website so these guys um they do a lot of like google ad and stuff like that so most probably it would be an an ad then page where um the potential customers arrives i mean they're not potential because they're looking for like an emergency you know so the electrician available so he finds the information and then the calls then so he sees a phone number and then he calls right away so he doesn't do much more on the website but he gets the job done and he's happy and then he goes back to the website and the last box uh he leaves a review uh on like google reviews and local directory websites to leave a review so that information has to be on the website i had um recently when i built my house um it's a new house it's out on the prairie meaning um creatures used to live there and i've displaced their lives and i got a knock on the door from a guy who does pass the control etc he handed me a flyer um i actually appreciated it because i thought just in case uh but i was on a conference call so i'm like oh thank you and i took it and i lost the flyer um we went on vacation we come back and um we're we've been gone a week we're in our whole meeting uh lunch and you see a bunch of little nostropes off in the corner and um my life is not afraid of much at all she is actually not not very many things bother her in life but for some reason she does have a phobia of mice and i could see in her eyes that it was very important that this be taken care of immediately so i remember that flyer i tried to find it i couldn't find it so then i googled it and i saw three or four websites and i'm in a hurry it's friday i'm trying to get things to take care of as quickly as possible and i checked out three or four of them horrible websites the design was awful so that i'm like well i'm not interested because if they don't have a good website i'm not maybe they would do a good job so i found one the website was amazing i called he called back in two minutes and said he would be at my house anytime that day and he showed up he took care of us he took care of our problem we think we'll see long term and one of the things that i clicked on was a google ad i saw that ad and i was desperate i had to work very quickly and he ended up taking care of my problems so now we are on his subscription service because i don't want to deal with mice anymore i did plenty throwing up so the reason i like to show all these examples is this really is just a way for us to be able to talk about the same thing and it's not hard it does it's it's conveying information and of course when you need to actually get into the details it's great to you know do read user research do design make sure the development is thought of but before all of that if you have more people just having these kind of conversations just showing what they're thinking you can solve a lot of problems you can get a lot of things out of the way and oh i thought you were building this but you actually want this and this perfect let's talk about that um so i am i'm going to switch back to the other one um i'm going to jump to questions in a minute because i want to chat for a bit but um something often gets asked for myself i do like to draw on a digital device with a pen because i when i'm doing web development web design and when i'm sharing talking to people um it's easier for me to keep it digital to be able to erase and move stuff around cut and paste so these are some of the things that i like to use um i'd be any device within with any tablet or laptop or phone that allows for a stylus is perfect if you want to go digital it does not matter which one because we're not talking art here we're just talking sketchy so anything out there is fine um i personally i like the iPad i use that a lot um i i use the pen on the iPad as quick it's responsive and i can even hop into a zoom conference call and i can share i don't think i put it on here but you can share your iPad live on the zoom call and sketch and actually do mockups while your client or your other team members watching and they can even annotate over the top of it if they want to um so that uh i work in a remote company that gives me a lot of opportunity to get close to a whiteboard situation which is the optimal you and i being in a room together whiteboard is the best way to do it second best there's tools that allow you to do it i've also had a lot of times team members they'll just do this they'll draw on paper and they'll hold this up to the webcam and just show me what they're thinking and that's fine too um so yeah these are tools that i like to use and if you're going beyond sketching there's a lot of great things out there uh figma um adobe xd envision there's now envision studio there's a lot of cool options available um and then this is my email so you're welcome to email me i'd love to know if there's any questions because often what comes up people are curious about tools they're curious about um what house getting fits into their workflows etc so yeah any questions if not that's okay too but i'm curious yeah so if i have the mic perfect uh so how do we go about um educating our clients to do this stuff with us like sketch for us for example or you know show a sketch on a paper on the webcam or what are some like good i don't know practices um so far what i've found is um and clients have had a relationship with over a couple months they see me doing sketches and if they're not designers at first they're intimidated so i will intentionally um make my sketches ugly and simple if i were to come in with this beautiful rendering right off the bat they would be so intimidated they would never sketch but if i keep it really messy and like what you guys have been doing today we're not trying to make these perfect so this isn't the perfect answer but if over time you are showing this and you're intentionally being quick and messy and even using your non-dominant hand for example um that and uh something the guys from basecamp say is using a marker is a way to not get into the details a big thick marker um then i've had a couple of clients that they finally came out and they showed me a sketch of theirs they were very shy about it they weren't sure i'm like this is perfect um so it's kind of just that relationship i encourage a little bit and even with some of my team members that do this i'd love to see it they showed me the first one i tell them it is great because it is and then often they start doing it more it is a little bit of a process though it's a it's an education of people think you have to be an artist to do this and and you don't one one second question if i may um so my sketching right now is really bad right they look ugly and probably if i would if i were to show it to some of us they would struggle you know going through it by themselves without having to explain it um and i would guess that your sketching skills weren't that great as they are right now um before so what's kind of a the process here in order to get better at sketching and make them look nice yep so two things first of all um it's okay if they're really messy as long as you're in the room to explain it because you can talk me through a very messy sketch and what's your top there um if you expect me to see it like not at the same time it does need to have some more a little more clarity so for me what's helped a lot um is designing um a web sketching or wireframing a web page after you do it a half dozen times you start to recognize okay a testimonial is two flashes here three clean lines and a little a name underneath and those elements uh ui elements you start to just they kind of drill into your brain and also i honestly i'll look up sites all the time if i if i need to do a quote box i'll go check on dribble or i'll just type in google and just quote box i'll look at that and then i'll just sketch that really quickly so um a good friend of mine encouraged me that actually there's a book to steal like an artist um nothing is original um one of the best designers that i've ever worked with he would look at all kinds of websites and make a beautiful uh composite of all these other things he found so if you steal if i steal from you it's theft but if i steal from a bunch of people's research so i would say over time it's doing it more than once doing it maybe a half dozen a dozen times you'll start to recognize think the same patterns and do it again and also if you google ui kits or ui elements you'll start to just see a lot of these if you're doing web pages a lot of these elements someone else has already thought of and you can just copy it does that help yeah yeah awesome and then right right behind you we have another question lots of questions i know where to find you um i sometimes with cheaper projects like when there's a limited budget i get my clients to do a sketch and the problem i run into i send them examples of like sort of wireframes messy wireframes like see this is what you can think of what it could look like but they find it really hard to think of features they want or what it should do they can't really come up with you know we can think oh it needs a button because i want them to go isn't there they can't even think of these processes often and i'm i wonder if you have like sort of questions you ask or if you have like a set of questions or ideas that you give them to get started because i do that and they come back with you know blank page with the logo and they said i couldn't think of anything and are you um you send them other examples are these other examples of sketches or are other websites similar to theirs no they're like i look up sort of wireframes or you know sketches of wireframes and i say think this is what you could use to draw an image placeholder or this is what you could do if you want to show the text box so it's not that they are they literally can draw the text box they're just going blank on what should be on their website yeah um i i've had examples where i've tried doing stuff like that and then you start to actually if you get if you if you got a client to halfway do it and then if you go start designing and developing the website inevitably they're going to think of something else as they should that they missed the first time around um yeah go for it yeah so we work together quite a bit um i've been i've been in some of those conversations sometimes and just a suggestion is to ask them what the job of the website is like to have that type of conversation and get them thinking like that like what's for this given page you ask the big picture question but then for the given page and if they don't know that's a example to well called action what action do you want them to take and then that can be a good question to trigger like the elements that he's talking about okay well if we want them to take a given action so it's that what's the job of the website and and for many of them that's that's a really helpful conversation because that can lead to how will you know if it's doing its job well if people call me or email me okay well how are they going to do those things and that can that can be a good launch point to get into the elements and one way that and thank you one way that i will go about that when helping them is if you've heard of user stories that they can you can go it's actually a great way to do full user stories but more if i'm if i'm the user coming to buy your product i'm going to do this and this and this and kind of walk through that journey i like that approach of trying to understand what the web page is trying to do and then you as someone who's done this a lot can probably fill in a lot of the pieces based on what how they answer for instance i've talked to clients that you know we have solved up your product page earlier i've done product pages before and i know you'll probably need testimony a lot of you'll probably need this and this if i know they're trying to sell i've talked with someone a while back he sold wrap gift wrap bags online and boxes and stuff and he needed certain drop downs and stuff and a certain elements i know need to exist as long as he tells me what the page is trying to accomplish is that kind of awesome any other questions any other things you guys want to chat about yes bring a mic over thank you yeah thanks um you you said you're also doing this with your colleagues when when you're doing something like this when you talk to your developer yeah something like this um we got a case from from from from a project like a lot of unspoken information was it yeah we have to bring your information out of your head yeah and the client was not the fault of the client was was the was the fault of the conversation or the um the talk between the design and the developer it's like how do you have um some some tricks or tips to doing uh the sketching for for for backend processes or processes at all though please think about this don't don't forget about this if you if you forget about this little feature you have to start from the scratch um i'll take a stab at answering what i think an answer and then feel free to let me know um i actually uh ryan is one of our developers we've worked together on projects exactly like this and what we've done both ways is um i have an example in here taking a little while to find but we were doing something uh called preset posts where um the publisher needed posts to behave a certain way and to have certain features in WordPress we had to add in a button you had to have a flow you had to have all this and um ryan described to me like here's what we need and i didn't i couldn't quite technically grasp what he was talking about as a designer so i took about maybe 30 minutes and i sketched out what i thought were all the steps that he needed and then he was able to come in and um actually ryan do you remember that example do you mind speaking to that i'm curious to your perspective of how that sketching work as the developer and there's a mic there if you don't mind put down the spot there it was really useful to have sketches before and we were able to talk a little bit about it but it helps in saving development time seeing sketches and we can get on the same page and make sure it conforms to the WordPress and the design patterns so it was a really big time saver and we do that a lot of times when we work and well it really worked for me what helped me is i wasn't sure if i was ryan knew what he needed to build and uh i had to express that interface and in this case he actually went ahead and made the interface on his own but if i were to express the interface i was worried that i was going to completely miss how a drop-down is supposed to link off to another button etc so i sketched that out and for him half the time i'm wrong and the developer actually will tell me well actually you missed this or etc but in this case he was like actually that's what i'm thinking so we were both able to go forward in confidence knowing we were on the same page does that kind of help yeah it sounds like like a similar problem yeah so often about when when when you got the information from from the client and you're okay yes this will be something like this and and don't don't bring all the information to the developer there's just a small type of content will still be needed at this page and then there's often the same question where come this content comes from please let me know oh i forgot to tell you yeah just this one morning is that you're going to know we work together on this kind of stuff one of the things i just wanted to point out you've done a lot of work with like entity relationships and like data structures where that's where sketching is like delightfully helpful right where someone can just describe it back in process which is what you were looting to and that's runs itself really well but oh so this relates to this and this and this and this and the the sketcher may not understand it like architecturally how it's going to work but by doing that that we found that to be crumbly like i've been in a room where we're talking to these complex you know how houses begin to relate to this thing etc and josh was sketching over there and that leads to some big discoveries like oh so you're thinking the entity does this and connects this way and like no i was actually thinking this and just by having someone who i think josh does understand it but like you don't have to be able to just hear what people are saying sketch it and it's actually like sometimes i don't understand all of it and me working with back end developers i will try to sketch what they're talking about and they actually have to slow down to explain it to me which often helps them with their thought process of oh actually let's try it this way so i've done multiple entity relationship diagrams this is not i couldn't find i don't know this is an example of a little website i was building that they had that had to have multiple um parent pages in the same website and multiple verticals in the same website and the way the client described it's like i need mccci mcci and usb and iot to all be at the same level but i also need these two to be under this one and it to me it was a big jumbled mess so i started sketching like okay is this what you're talking about and we actually i go back and forth a bunch of times he probably had to change his mind about a half dozen times and that was okay i just kept doing more sketches and trying to figure it out um and um that process is messy but i'd much rather us have a discussion for 20 minutes after me spending time on this then get into wordpress get into development get into design um and sometimes i i shared a sketch earlier um i do get all the way into design and prototyping and it's just completely wrong and i think we want to take a step back go back to simple sketching and try to figure out how to get back in the same page yes a question over here so um i had a question about how this catching came to be and what i mean is is this is a thing that you wrote into the company or is this company-wide policy about sketching um because i'm curious like i've been i'm a freelancer and i work with companies that have one or two approaches the first is some designer in a cave comes to you with a mock-up the mock-up is high-fidelity swear to tail any club back you do essentially costs 10 hours to modify anything so no and the lot the uh the other one is that someone comes to you with essentially a sketch i'm an applicant and they're never going to go above that it's just so i'm curious if this is something that you broke through the table or that you found in the company? um yeah i i think i was the first one at the company to to really do this because we're an engineering company i come from a design background and so i'm used to doing sketches and wire frames from web design and i recognized when we're talking to clients and doing all this back in development that there were times where i could see our development team and our project managers and our clients were not on the same page so i just started to introduce this on any projects i was on hey let me put this sketch in so really it it's not a company-wide policy but i've encouraged it and encourage other designers other project managers i've seen them over the last year start to do it more and more on different projects so that's to the first part to the second where it just always starts so simple always start napkin sketches but there is a point where it helps to bring in a ui designer or a ux designer design researcher or someone with that kind of background to actually start taking it a little bit further but what i don't like and i've been guilty of this in the past when i was more of a junior designer the client would say what they'd want and i'd come back with a pixel perfect mock-up because i was too afraid of being feedback on a halfway done design and so i think that's probably is a maturity thing of designers just feeling more comfortable to allow your messy stuff to get in front of the client from day one and make it a collaborative process um yeah any follow-up questions on that no i'd like to see more sketching i sketch a lot myself i'm a developer back in development yeah i try to explain complex concepts using sketches like crayons and stuff like that it's not always always works and i try to there is no middle ground between super detailed mock-up and one sentences that that hurts a lot like you spend a lot of time trying to to understand each other and you could have the same result in half an hour of sketching i um there was a project where we had nine thousand user stories in jira across the project for the client it was a year and a half two-year project and what would happen is i wrote a lot of these when i say a lot maybe for maybe a couple hundred of these user stories and we get to a meeting it's been six months user story number and i started to memorize some of these i actually had a couple downs of them memorized because they come up so often user story number vr-1661 and it would come up on the screen and we'd all be talking about it in this big conference room and we're talking about it we'd all read over for three four minutes and then i'd realize oh i wrote this and it's just big blocks of text and it takes the entire conference room of 10 people we're doing a backlog ribbon session it takes equivalent of maybe 60 minutes for the entire group to get caught up on what the user story is talking about that we already talked about a month ago and then decide what to do with it so i recognized but nine thousand tickets for the end of the project i started to tickets that we ended up putting a lot more attention to i would include a sketch i would just sketch up after the previous conversation what that user story was about we still have all the acceptance criteria you still have the user story it's still a good story but at the bottom they're being attached with it i started to find that after a couple of months we would all come into the conference room we pull up the user story and then we scroll down like oh oh good there's a sketch and then we'd all in 10 seconds the entire room was like oh yeah that i remember we talked about this ticket last month and here's what we need to do about it now um so the amount of time and just thinking drops down a lot anyone else this has been really good i wanted more questions perfect and then we'll wrap up yeah we're just about a time wow um so we can take two more questions then we'll wrap up and if not that's okay too yes i just wanted to add real quick um and the i think it's really important to be keeping in mind from my perspective and given the chance to collaborate with joshua the value proposition of being able to explain things like just from a time savings perspective alone i've seen that time and time again where it can be kind of easy to miss like how how incredibly valuable it can be to from an engineering perspective alone to be able to describe some of these processes to break down the flow to have the disagreement early in the process and get it to get on the same page and then before you build it out because there's some i'm sure you guys have experienced so many times was like no that's actually not what i was thinking like oh man we just invested all this time and energy into it so it's just been incredibly valuable for me to observe this coming to the organization into the client interactions and seeing the effectiveness of you know using this universal language to facilitate shared understanding and i'm more i'm excited when i see a sketch and i show it to someone and it's wrong because that means there was misconceptions and you had a chance early on to fix them so please email me uh you got my emails up before and actually feel my searching one last time if you have questions i love talking about this i love helping people i as was asked before i do have a lot of experience in this so it comes naturally for me to just hop in and do a sketch but if you haven't done it before just try it one time at somewhere with the project see how it goes and it's not it can't go bad unless you're working with someone who's just very whatever the wolves it usually goes very well so thank you so much guys for coming i've got cards up here if you want to get my contact information now thank you everyone