From Squiggles to Straight Lines: Sketch To Make Decisions & Get On With It

>> MARISSA EPSTEIN:  Yeah, thank you.

I really appreciate the opportunity to be here.  It's nice and I want to thank the MidCamp course for being very thoughtful and safe with all attendees and coming up with something alternative for folks.  So thanks for still having me today.

So today we have an hour.  Want to talk about sketching so from squiggles to straight lines, sketching to make decisions and get on with it.

I am Marissa Epstein.  Some call me Mars.  I'm the Senior User Experience Designer at Lullabot.  Maybe you've heard of us but we're generally known in the Drupal community for the development, strategy design, as a fully distributed company and we specialize mostly in largescale publishing.  I work on UX in that context, some fun things like that but that's enough talking to us.  I'm here to talk about sketching so this is a pretty common familiar task as far as just putting pencil to paper but I wanted to dig a little deeper into some things that I've learned over I guess over a decade of sketching across a couple different disciplines.

I had a lot of fun building this talk because I have been hording sketchbooks for a long time and looked through some from school, some from different jobs, and saw some similarities, differences but I wanted to throw in some fun highlights so here are a couple from college.  I had an icon project, so some dinosaurs and an octopus for that, branding as well.  Sketching was a huge part of that.  This was for a toy company.

Even back when I was an art Director and started to get into web sketching was huge for site mapping and user flows, or directing in a specific sort of interaction, maybe a page layout.  It's starting to look maybe more familiar to you.

And more recently I want us to put this in, I thought this was fun.  An example from a recent weekend hack a thon.  Design a game in a week.  So you pretty much have to figure out what it does and give the Developer something to start on in the first couple hours.  Also this was a good example of how sketching helped there but with all of these variations sketching in my career, it always has served me for some of the same reasons.  I just have to Sketch.  If I'm learning, producing, generating, directing, I found no better communication tool, because it helps me document my notes, ideas, and then share it with others to get the feedback that I need.

Today sketching is still a really big part of my process in UX and [ Inaudible ] projects for some of these large Drupal sites as well so I wanted to touch on a couple specific examples of that, how I integrate sketching into our processes, some of those Drupal sites and covering a couple of questions I've gotten from co workers.

So in this talk I want to cover basics of why I think sketching rocks.  Why I hope you do too.  What it's for and the different ways that I sketch, so you can consider maybe some of those for your own process and some pro tips beyond those like pens and pencils.  For example, what we do remotely and if I have time I had a case study with some examples.

Also if anything comes out, you're having issues with hearing me or something please jump in, let me know.  I'll be keeping an eye on the chat and might answer a couple things as things come up.  Otherwise I'll be saving it all till the end but I'm sharing my internet with a number of people today so we'll see if [ Inaudible ] likes that.

So I was going to hand out paper and pens.  Ha ha, so I encourage you in the comfort of your home or wherever you're viewing if you have a piece of paper and a pen that's plenty.  I encourage you to use this time to explore sketching a little bit.  It's a good way to sketch notes and take notes if you want to document anything that I'm saying and start to get into some of these practices.  Of course we have Slack.  I'd love to see if any brave souls want to publish something there.  Loss to see how others sketch.  First things first why I think sketching rocks.  A little bubbly water.  Sketching offers a real return on investment for all you money folks is there's a number of reasons here but the very quick thing is that it's light, it's fast, it's really cheap.  It doesn't cost a lot versus making really beautiful designs.  Of course they serve different purposes but sometimes I think that we might do things that aren't [ Inaudible ] when we can get by with something a little cheaper.

Anyone can sketch.  There's very little effort and there is not a big learning curve.  It's mostly just stigma and so it's especially relevant for designers, visual graphics, UX, creative types of some kind and I definitely use this in content strategy projects but I've seen it with product owners, Project Managers.  Some Developers have sketched something to explain it to me which was really exciting so any time a visualization or map might support something complex or some explanation, I think it can be relevant to you.

It also does not require special expensive tools.  So this is kind of a joke for us because if you ask some of my co workers at Lullabot for example they have their pen and it's going to be this thing, you've got to buy this thing which is great and I'm glad they found something that works for them but I encourage you, I was recently at a hotel, found one pen in a purse and took some paper out of the printer and was able to move forward with a project so you really don't need a lot.  You can go into a conference room with basic office supplies and come out with a solution or at least some ideas to generate to go off and work on them at your desk.

It's also faster to understand, I especially am a visual learner so it's really helpful for me to see a visual but I will say that generally speaking, a visual or graph for a complex flow is going to be graphed much quicker than a very long bulleted list.  I'm guilty of this.  I have written a 70 page brief before and I know not everybody is going to read it so having bullets, having visuals is really helpful.

It also can be faster to do.  It has a little less of a cognitive load.  I wanted to mention related to both of those, Tom Wujec gave a TED Talk related to this, showing sketches from workshops he does with organizations trying to improve their work process.  He said tell me how you make toast.  Draw it without speaking or using any words and you can see in this talk with variations across the sketches they're all really clear and it's much quicker to rock this than a very long recipe so I like that he points it it's less mental energy on both sides of the communication.  Sketching is also a really great way to iterate.  This is probably my favorite thing so it's easy to make a new version, modifying options, put one on top of the other, put a little strip of paper in the middle.  Tear something in half.  Hand my sketch to somebody else and they draw on top of it if you get feedback really soon and if it's in the early stages of a design project you can get much closer to the end result you need with confirmation of feedback, and the project is ultimately better received.  It's okay as long as everybody is on the same page.  It tends to be ugly, because it allows you to move faster and generate more ideas.  I know    I've found it hard to throw something away that I sunk a lot of time into.  A sketch totally changed developing, but with sketching it allows you such low fidelity and speed you can throw it out.  You can find an issue sooner, it's better in the long run and its many authors have said you should kill your darlings.

So I'm going to assume everybody is convinced now.  I changed this up a little bit in the format, but it's not comprehensive or anything, but I wanted to call out a couple specific examples of how this fits into my process from beginning to end.  Let me know if the muffling is an issue.  I see there's some trouble and I'm trying a new mic.  Thank you.

The first process is starting at the beginning of a project and trying to move sequentially is with discovery so this could be its own talk but Lullabot does get to conduct a lot of workshops on site with clients.  Usually discovery planning for future projects or strategy work, and this could be everybody sketching.  It could be individual.  We could have small groups.  But we can kind of come together and learn about something.

Now, I say learn because it's so early in the process that a lot of times we're not even trying to solve the problem yet.  Maybe we're coming up with some solutions as we generate, but we really just want group consensus.  We have to understand, what is the problem we're even trying to solve to make sure we're building the right project for them.  So it can require a lot of politics to get to the right [ Inaudible ], so I really like visuals in that discovery phase.

And of course going back to the ROI side is we want to do this way before production is in full swing, and reduce any assumptions we have, reduce risk so that there's isn't a demo or something that you've sunk a lot more time into and we've struggled with that with the timeline is lean or the team is very large and so it's just hard to move fast with everybody together, and so taking notes, using sketches as sort of documentation hybrids, specs, is a really great way to capture the phases and mix that into some of the idea generation that I want to do at the end of that project or at the beginning of the design phase that follows and not really losing any of that.

Also for idea generating.  This is classically what people think of as I'm going to go sketch for an hour, and do a bunch of thumbnails and generate a bunch of ideas and this is great.  So I wanted to show you specifically as far as our wire framing process at Lullabot, we don't just jump in with a pencil and blue skies in a conference room.  We actually start with a paper doc and lots of research.  So in this situation, what you're seeing here is just an example of some samples of user interviews or market research that we had related to a particular persona or audience or maybe we have specific or legacy information that we want to know and then on the right in the template areas is what we call a presentation model.

So what personas are visiting this page?  What is the organization's needs?  What do the audience    what is the audience trying to accomplish that may not be exactly aligned with the [ Inaudible ] needs in this example so if you see a lot of information here we're just drinking from a fire hose.  It's a lot to remember but this way, we can start with a long, long list and then transcribe this information visually, incorporating hierarchy, full content layout, functionality overall, and sketch from there.  So this is just an example of a sketch session workshop that we've done, sort of genericized and this one was actually remote which was cool.  Talk a little bit about that but you can see here it looks like a whole morning together, but we're actually breaking out into our own things for a lot of these sessions.

So you can see setting goals and briefing is similar to the slides you just saw.  And then we will have very, very short blocks of time to sketch, so even 10 or 15 minutes you can kind of go off if you're remote you take your headphones off, you can leave the hangout.  If you're in a conference room and just focusing on your paper and focus on one problem, and then when we're all ready to reconvene we walk through our work and encourage everybody to give feedback, if we're struggling with a problem et cetera.  And I highly encourage you, you can see our sketch session A2, or B2, is great to just even take 5 minutes after a conversation like that to allow for more sketching because a lot of times you will see a co worker's idea and you want to incorporate that into your session or you said you were having a problem and you got a suggestion, or maybe you just talked through it and solved it yourself.  So highly recommend keeping it light, letting yourself revise once, sharing with the group but keeping your generations separate.  Here's an example from Lullabot.com when we were working on case studies.  I wanted to show this as part of the process but I also want to make the point that this is a mess and that's okay.  The way that I usually sketch, the co worker question I mentioned earlier was how do you do your sketches uniquely?  Most of my book looks like this but I recommend trying to put aside initially having it look nice and making sure it's communicating for you.  You'll ask questions and reorder stuff and that's a pain and from there, you can reiterate.

So I cleaned it up after I made some decisions myself.  I shared this version internally and I got tons of notes and wrote all over the thing, and then that finally resulted in this more detailed content specific wire frame that actually looks a little more like a page.

One other thing as far as my sketching techniques and I'll talk about this a little later but I do not want to forget, you can see here that I'm actually cutting the pages off with just a squiggle and I find that's a really helpful way to keep these long pages manageable.  If you really want you can connect them with a line or something but if I have a grid with a listing page instead of drawing 20 of something I can draw 3 and cut it off like that.

I'm also trying to label variations.

One more thing jumping ahead a little bit from idea generation but I did want to note this as I'm showing the cleaning up and refinement of sketches, you can go as far as you want here, refining these digitally so I used to take photos or scans of my sketches and just pitcher them in Photoshop.  In the same ugly fashion and now I've been using Figma for this and sketch or whatever your vector choice is, it's fine.  You can do bitmap, image editing if you prefer but it's helpful to duplicate things, make them even, move stuff around and chop it up.  I like Figma for that.  I started working with [ Inaudible ] for my sketches.  We'll talk about that in the tools.

So I also sketch when I'm collaborating and workshopping so as far as the next two sections I found trying to organize this talk that a lot of the buckets of these activities fall into one of two categories.  It's either this where we are trouble shooting something, we're trying to decide something, if it's a group committee, trying to avoid the camel Homer Simpson car if you've seen that and get something together, hence the get on with it part so this is a really important aspect.  The second bucket I'll talk about next is as far as after a decision has been made and more of a documentation artifact.  Think of this more as a process tool.

So it's really great for collaboration because it allows you to confirm an assumption or either maybe resolve it early but at least uncover that it's there.  So just to understand the problem first so a little story here.  My folks are architects, and so they've got me sketching and thinking about architecture [ Inaudible ], but they always joke around about the clients because we [ Inaudible ] in our industry a lot, including the "I'll know it when I see it" slide, which is terrifying because you can work and work and work and show them something and it's not right and you don't have feedback and you're in the dark and that's not an efficient way to work for anyone.

Clients will say for my next house I'm attempting so contradictory like tiny house McMansion, Boho modern vintage Bauhaus inspired RD.  What is that?  He'll just get a pad of paper that he always has with him and just start sketching.  Nodding and showing these things to him and this does a couple things.  It allows him to decide if he wants to do the project.  It lets the client feel like he has value because look he's getting this for free over lunch and it also lets them speak in the same language without a client that just wants a residential addition to have all the vocabulary of an architect.  It can be this not that as opposed to knowing what a term is.  This is my favorite recommendation for avoiding the I'll know it when I see it or others call it the swoop and coop.

I like everybody to sketch when they can.  I framed that as everybody gets to sketch because a lot of people look around when I say that I need them to, so I found that clients have reported back that it's a very encouraging what's the word engaging activity for them.  They like collaborating.  They like being feeling heard overall instead of a value add for workshops but more specifically the designers are getting feedback that they need which is really helpful because I don't want to    I don't want to go off on a tangent and maybe some Developers can relate to this, as a designer getting excited about something that's an implementation nightmare so not only having the Developer there to review is great but having them sketch as well allows me to get a lot closer to something that is realistic but still creative.

So what's compromise is we often will divide and conquer with groups so the disclaimer is a lot of people aren't comfortable doing this so it compromises you to have, this is with a [ Inaudible ] version.  We were able to split up and have one strategist or designer with a client stakeholder so that way they can still communicate and we can facilitate their feedback, make sure ever remembers heard if they're not necessarily picking up a pen.  So we have been calling this be the marker for the group.  It's hard to herd a lot of cats especially if you plan an activity and no one wants to do it.  You say come on, get up and play with the cards or draw a thing and they look at you like okay, your turn.  That happens to me.  What I recommend even if that doesn't happen a lot of these situations to put a client at ease is just, I'm in a conversation, I'm hearing something, I just quietly stand up, walk over to the whiteboard and try to document what I'm hearing.  I'm not forcing my ideas but I'm just visualizing what the group is saying, allowing them to have something to look at and it's great because they might nod and all the things they're agreeing verbally but I might draw something one of them has said and find out the other person is in conflict with that or there is some difference in what they were saying that they hadn't seen.

I always laugh when someone says I understand as opposed to I understand that.  They can misunderstand anything.  Then we're going forward with some real documentation of that conversation.  I wanted to throw in here as I was saying earlier some examples of these may not be the most gorgeous things but it doesn't matter because they were super helpful so this was a sketch from a business stakeholder on the left and on the right a Developer.  And this was actually, if you're just an [ Inaudible ] you hear about tugboat.  This is in developing a new workflow for tugboat so this gives the designer tons of empathy about a PR workflow she doesn't have in her life so it ended up getting incorporated into that final product.  So great way to collect feedback.

So as for that last bucket I was referring to earlier is documentation.  So this is some sort of deliverable, maybe it's an initial round of deliverable.  It really does depend.

You probably heard this before but the point I want to make here is, we're really just documenting how a website should be built.  It's not easy    it's not worthwhile to take the time and build every single site perfectly, and every page [ Inaudible ] and every size, it's just too much so it's really easy to just focus on what it is that you actually need to communicate, and add that level of fidelity in the sketch.

So as I said ask yourself where clarity is needed.  If you can work backwards from development priorities or content strategy needs, it can be really helpful in that way.  I also wanted to touch on this because you don't want to distract the stakeholders if there is something that is unrelated to the conversation, but you do want to not be too generic.  So sometimes I use a label like heading 1 which lets someone know to reference the design system that we're using and that that's what's going to appear there or maybe it says this is a compelling actionable case study title here and then that encourages someone to understand its functionality, or blog post automatically pulled here, 1, 2, 3.

But I'll tell you where it can be confusing, squiggles at least people aren't expecting to read so an example of the fidelity I usually use here, squiggles, boxes for links and buttons, keeping it really light.  But I will say one time I had a recently I had a trending news area and so instead of saying trending news article, I put Mueller report as an example at the time and it was very topical and it was not the right choice so I would leave some of the content out and not have that be the subject of the conversation.

So further relating this to Drupal, it's great to not be hyper prescriptive because this allows you to use something that's either out of the box, in your CMS or choose specific Drupal modules that would serve your needs well without taking the time designing that.  We recently designed a very robust TV schedule but we didn't use it because we found something that worked pretty well.  It wasn't a necessary design for development.

I also, I wish I had more time to speak on this but it also allows you to leverage your component library, and this keeps designers and clients both moving forward so I'm definitely guilty of making a little mistake in a comp.  Maybe the margin is off or a button's a little too wide or something has been eye dropped and the hex is a little off so if I say this is our primary button, there's no question and I'm not introducing an inconsistency into the system.

Another way the sketching helps me in development documentation is all of these different variations so you can see here on the left is a basic sketch of a blog post with nothing special in it but an image and all the things that are automatically pulled in.

So in the right area we see what I've been calling the extra guac, it's very extra pages, which have all the things.  There are tons of components that someone could add as an option, a template.  Maybe it is Layout Builder, where we're trying to provide strategy, but there's still a ton of options and variations they could have.  But you can see here that in two sketches I've shown you a max and a min state.  I can show you where things appear, if they're inserted and do that without 18 different comps of combinations with real content and then doing them in tablet and phone sizes as well.  It's even beyond just the workload of that.  I think that it's really hard for clients to swim around in all those variations and understand what they're looking at.  So simplifying it in that way I think is very helpful for both of you.

So I've been focusing on the designer's role.  I'm going to go a little further to show how these artifacts were leveraged during other phases of the process so you can know what to expect and if there are    there's some conversations to have around that.  

My first disclaimer is even with all this knowledge sharing these wire frame sketches are not going to give the full picture to everybody.  As far as what a designer needs to deliver, this really should go hand in hand with a style guide so we create a design system of our basic styles.  Many of you heard the talk earlier today about this I thought was wonderful.  We're maybe a little leaner than them but having your basic type and color styles, having a couple components, button styles there, allows you to look at these wire frame sketches and make very consistent executions of the patterns using those design styles.

So from there, we create a pattern library.  It could be pattern lab, what have you, and be able to see the components individually.  Now, this doesn't work for every client.  This can be hard for them because really, the magic and the big reveal and the happy moment is in development when these patterns have been built and the components are assembled on the page.

So the Developers are bringing this to life, which is great for me, but if the client wants to [ Inaudible ] it's good to decide which of those things do you need?  The static fake content page design and try to strike a compromise there.

Now, these lean wire frames were enough for project management so really quickly you can see here a design tracking for all of the different components that we had to create, the UI that was causing variations, and what was priority.  What [ Inaudible ] was it mapped to?  Did we have the wire approved yet so we could style it?  It was enough for us to track very lean before we got into our project management and then as well that was able we could throw a link in, for a while we were doing screen shots that we've been linking to areas of the [ Inaudible ] file and making additional pages so we could link more specifically to them and then pretty much give the Project Manager everything that they needed to start getting tickets into Gera.

Also helped with a couple other areas of the project.  So this not fancy at all, just some people use OmniGraffle.  Some were using Sketch.  We could do this in Figma but just making the point here of annotating, so the content strategists were able to go in and get really specific about the content model, where taxonomies were coming from, if something was curated, specific functionality and anything that might be different from our model.

And there are a couple of these where we did it in tandem which was so great because it is so lean for me to sketch and lean for him to document so sometimes I would say, hey, did you get to that part of the content model yet?  Here's what I have in sketch or he's saying here's the content model so far and we'd make changes together so I like this in that it really was able to fall into multiple areas of the content process.

And I think this is a lot easier as well for clients to see versus just a data dictionary spreadsheet sometimes because even if all the information's there, it just might not be compelling enough.

Same thing for development.  We had a back end developer run through this and kick the tires, make sure there weren't any flags before we got into the polishing and [ Inaudible ] it's fine they're a mess.  It's fine we iterate on them.  I don't know if you can read that.  It says, I don't know what this is so this was a great point for me to see, I didn't use enough fidelity.  I should have made that related article instead of a little squiggle and we were able to have that conversation really quickly with asynchronous feedback.

Okay.  Just getting into some nitty gritty here and I'll say again you can really use anything and experimentation is really big.  Not everybody likes the same stuff.  Some people like a tool like a chunky marker because you move really fast or maybe you prefer being able to erase pencil so of course having a notebook with you is great to capture but there's lots of other stuff so I'm just going to go through a couple things that have helped me.

If you can't tell I like to use dot grid.  I tried to eat my own dogfood and sketch this so I really like using grids and templates and you can get really custom with these so these were some we downloaded years ago that have a desktop, phone, and tablet together, desktop on one sheet, 8.5 X 11, and a phone and a tablet on another and they all have a little labeling area at the bottom which I love.  You should of course be in my opinion whenever possible sketching all of the sizes together so you're considering responsive design, not an after thought and normal first steps [ Inaudible ] what have you.

[ Inaudible ] together.

So I was trying to find that one and I found a good alternative with one recent sketchize.com allows you to print out tons of options with browser frames, phone frames and there's actually a dot grid inside of the device which I like because the reason I like dot grid is it doesn't show up as much in a photo or scan as a lined sheet but it does really help you keep lines straighter.  And also you can use it as a unit of measurement.  So I can say my padding is three grid spaces and keep things consistent.

So my biggest tip is to just label everything.  Our big struggle is that we'll have a minimum folder of sketches and one is a V1, and one is a V7, and [ Inaudible ] from October, or is this the programs page?  Or a series page?

So please put your name, a date, put what it is.  If there's any sort of versioning or TBD approval et cetera, feedback but my favorite way to capture that is called jot not and I think the app is like $5.  Your company should buy it for you.  But it looks like a nice scan.  It actually, you can see on the left side, allows you to curate the how I can say this, you can actually skew the crop.  So if the page is at a slight angle it will straighten it out and fix the perspective.  The contrast settings are for this so even a pencil picks up which it doesn't always with a scanner so that's jot not.

Our favorite thing in Lullabot are dry erase boards.  We have a sick thing at Lullabot for whiteboards because we're all remote and we like getting into the conference room with these but I think it's really helpful in a group to focus everybody on something as opposed to a conversation starting around.  It is a thing that is finite because you have to erase it and there's another meeting coming in so there's this nice feeling of it finishing.  I'll admit I find that if I show a pixel perfect beautiful comp it's a lot easier for someone to make more changes and it's harder for me to make them but it's digital.  You can change it.  Whereas here, certainly you can mark on top of this in sketch or something but it feels more final to the group to make a decision, take a picture and erase it and again move on, which I love.

Another awesome thing I don't know what these are called, it's like a giant sticky post it so obviously all designers have [ Inaudible ] of what I posted so how could I not love a post it you can put Post its on.  The reason these are great, you can have a big pad in front of the room.  You can bring it with you if there are no whiteboards, if you're meeting in a basement and you can pull them off and stick them on the wall as you go.

So this is one I actually have in my office trying to just keep track of a project for myself, sort of one is the loneliest number workshop by myself, but summarizing things we had done previously.

This was a workshop we get to host for Pantheon, and they're very fancy because they have a room full of whiteboards, and so I really love this as an example.  You can see in the background that you can also do this with the giant Post It pads, so imagine you have your first day of your workshop, you're gathering goals, constraints, persona information, research, all these different priorities and putting them up, and now the second thing, we were doing a brand and tone exercise and we were able to turn around, leverage our personas on the wall, check our research and really feel like we accomplished something beyond just the eye candy of the stock photo.

So our last fancy tool.  I have just two more.  This really cracks me up.  I have to shout out for Jeff Eaton, another co worker of mine who is very crafty, if you know him.  He's laminated 11 X 17 pieces of paper, and just laminating paper has made portable whiteboards, so he came to an on site [ Inaudible ], and it was awesome and all the pens in it and everybody got one and it made for a really fantastic workshop.  So I highly recommend this and they also actually sell portable whiteboards and they're really cool.  Some stand up, some of them are notebooks with four sheets but we use them a lot and at the end of the workshop he said just take them home.  I can make more so we were able to hand these out.

What I really liked as well particularly here is that it was easier to help somebody engage at a table, or if I was at a conversation and I wanted to be the marker for the group, I didn't have to get up and feel like I was interrupting.  I could just be doodling and it's rigid and I can hold it up and say is this everybody's thinking?  They're like ooh, ah, yes, no and able to do that.

So my tools, my big tool question is people ask me how I keep my sketches straight.  Someone asked me what straight edge I used and I laughed.  I took this picture for the talk because at the time I was using a Christmas card I got three years ago.

Now I use a nameplate for the most part actually just because I like the, it's the right height, blah, blah, blah.  I also wanted to throw in a blister pack I've had for years because it used to be the perfect shape.  I think it was the iPhone 5 but I still use it for little mobile thumbnails, a stencil to trace.  The last thing, and this is very neurotic and I know that, but I just highlighted this, a couple tiny little marks on the back of the straight edge, and the outside marks are the width of a desktop page, and then the inside are the content list grid so that way if I'm designing sketching 20 pages or a page that's 3 or 4 notebook pages long, I can put them all together later and know they're going to line up.

And one more thing, I just threw this in and now I can show you because it's here.  Remarkable is not sponsoring this talk but I like this sketching tablet, [ Inaudible ] and it allows you to sketch in vector which is really cool.  But you can see that you can make a notebook, you can duplicate things, you can move them around so if you decide you just want to move that whole thing down and add a piece there or duplicate this thing you can do that right in the notebook and finally it allows you to email yourself a [ Inaudible ] or an SVG.  For some reason sync, [ Inaudible ] SVG you have to email yourself every time, but it's amazing.  What I do with that is just tear them up.  My process right now has been sketching in reMarkable and then going over to the program Figma, the online design tool, because I really like not only editing in there so you can see I'm duplicating things, I'm moving them around, I'm showing these art boards with labels but I'm also able [ Inaudible ] but I'm also able to share them and get feedback here and this is a lot like InVision, I should say.  I think that's more popular and it's great, too.  I just found that my fan kicked on three days every time I used it so this allows you to post a comment right in line somewhere.  [ Inaudible ] and it also has a "share" feature where you can just share the link for someone to review asynchronously or they can actually follow your little head and you can zoom in and pan around through something.  I really like that.

Yeah, I said the remarkable comment, they just released they're making a second one.  Pre order now.  Kind of wish I had made it [ Inaudible ] great.

Remotely.  I talked about this a little bit.  Really the biggest point I wanted to make is that you should use the tools you've already used, but there's a couple things I do like to make sure that you have.  Of course, some sort of video call is important.  I like to have camera, cameras when you can especially for presentations or getting feedback, because we were joking recently at the Design Team that we get    we design present into the void, because everyone is muted and so we've started using our cameras just to say if you don't have feedback you know that it's fine or you can see people kind of questioning something and get feedback that way.

Google meet, Slack call, whatever you prefer, Zoom.  You always have a paper doc so you can use Google docs, whatever.  I just like that because of the way that it's very quickly collaborative in realtime.  Sometimes there's a lag with the others and so we have all of our context in there before hand but we also try to capture notes as we're going.

Or you can record them or you can use Otter which is an app that transcribes ish automatically.  I also think file sharing is huge.  It's really hard to lose    it's easy to lose a sketch and it's hard to keep it I should say.  If you share something, made sure you use your drive or Dropbox or photo album but we struggle with this remotely and in person.  As I said someone goes home with the [ Inaudible ] folder and that's it for a week but I also wanted to [ Inaudible ] Slack here because one thing I have really liked in addition to the drive or the folder or what have you is to have some sort of timeline in Slack.

So sometimes we have people that are remote and you're onsite and everybody's remote or someone is catching up but they can't join the call and you can have this really nice timeline of all the sketches in your Slack specific channel hopefully excuse me.  [ Inaudible ] that, and also it allows you to create threads so you can post something, someone can review it asynchronously, and someone can say I love this but I have one question as an alternative to the Figma [ Inaudible ].  I don't have a specific brand of choice because I've had mixed feelings but I really recommend an overhead document camera like so you can get a USB camera that tilts straight down.  You don't have to scan anything.  You don't have to prepare your photo of your sketch for a presentation.  You can just point it down, point with your pencil like a dork.  Maybe you make notes while people are talking or say is it like this and do a little thumbnail on the side and I really like that.

So we'll switch from our camera that is showing our faces in an app like this to the other desk camera when we're presenting and then go back again.

So let's see, I have a couple more minutes, so I am    before questions, so I do want to show a quick case study, and this was for DSGA, as April was talking about, and I just love this one because for one thing, I was part of a content strategy project in a way that was less UX than I do, but I really enjoyed, and starting from a user research perspective and helping with the content model essentially but it was also unique in that we did a couple new sketching activities and we found some unique ways that it played [ Inaudible ].

So I pulled one example from three different workshops we did with Georgia, with Digital Services Georgia.  So the first one was when I was trying to take notes about a specific content type.  So in the same way I did before I had thumbnails and lists and massive stock as my first one while people are talking.  Oh, yeah, a bio should do this.  It should have this, have this.  I'm able to capture this for my own wires I'll need later but then someone was struggling with understanding how one content type could be presented in different ways in different places.

So very quickly I was able to make a featured bio for a person that's a little more in depth versus a bio listing on the side and show them how the same information was being reviewed but not all and it was very helpful as facilitating that conversation and helping that person catch up, but also as a design recommendation later because I was able to very informally get their feedback.

It was sort of that, is this what everybody meant?  Which I love to do.  The next onsite, I was actually remote.  I had a conflict.  I was at home trying to listen.  As I said, I'm a visual not verbal auditory learner, and I'm not a content strategist, so I'm trying to keep up with all of this, and I am taking notes furiously.

So afterwards I thought, this isn't a bad summary of some of the decisions that were made.  I had made this for myself but then I thought maybe others would benefit so I threw it into Slack and everybody goes to lunch.  I come back to find out that in the buffet line someone pulled this up on their phone and looked through the Slack and they had a meaningful conversation about it and updated me when we got back about a new idea that they had.  Like I said, just taking notes to yourself is great but it can also really facilitate ideas for others either because they're still marinating on something or as I said maybe they missed the meeting completely and now they can be a little more included.

And the last one was a funny sort of hybrid, so you can see here our fancy laminated paper, but I also did some sketching prior, so this was for site Admins to understand Layout Builder, and make sure that the components that we had within our pattern library would be comprehensive and this was for about 100 sites, and so there was a lot of different needs from environmental to legal, political, different content types and messaging and format.

So it was great to try that.  So one of the things that this did, this little kit of flashcards I had sketched beforehand allowed them to quickly understand how Layout Builder works and it was really helpful for us to actually onboard them, and again they weren't too bogged down with UI which of course is another obstacle of course but they were able to get the concept really quickly.

Then we were able to turn it around for them and say:  Could you recreate a couple of your most important pages?  This one specifically, this would be Environmental Protection division, EPD, and you can see we had a printout of here's create a new content type and here's what those look like as a paper prototype.  What would you click?  Get their feedback on that and then referencing the page, start to rebuild it better.

I like this because they didn't really have to sketch.  They have a low fidelity without getting bogged down because otherwise all they're going to talk about is what that hero image is as opposed to it just being an X which is so much easier but we uncovered new things.  They said, well, I like this icon [ Inaudible ] here but actually we really need 7.  I said we can do that and you can see that drawn here.

So we were able to capture designs and additional components we did neat for design and development and help plan the project out but we also let them walk away with a recommendation for their landing pages once they did get the keys to the Layout Builder.

Yeah, so thanks, everybody.  This is really how sketching fits into my process and my design work, so I did want to say it's totally person and I just want to see what works for you, just please experiment and you'll find different content have different things but I'm hoping you might see an opportunity where you might be able to pepper it in because it adds some value to your project.

And I wanted to say one more time that we should be building with the end in mind together.  We want this to be a seamless transition, handing things off to the new team or to the client so you definitely want to plan this together if you have some ideas for being a little leaner and make sure that you don't end up with a client scratching their head wondering where all their pixel perfect prototype interactive prototypes are.  Just make sure you ask what everybody needs, or doodle an example and then ask.

One more obvious disclaimer this is not just for wire frames.  It was just the stuff I have the most of and the easiest thing to focus on for one talk but I think there are tons of different things that you can apply this to visually with user flows and journey maps and data migration, and how something is pulled, or content reviews or those sorts of things so yeah, I really hope that you can apply it.

And so just to give you an idea of something way less technical, way less related, I have one more case study so out of the scope of this talk, to help to show you an example to scale this for yourself.

I had to solve a very serious problem last year, which was to design a Halloween costume for my dog.  I did manage but the way I did this was I planned it one night and then right before Halloween I made it one night.  So the first night I watched a YouTube video.  I literally had one pen [ Inaudible ] and got my dog and did a diagram.  It was just 14 seconds, very ugly but my point is this wasn't what I was delivering but it was what I needed to deliver the actual thing.  It doesn't matter it's messy and it's on some stamps.

In case you're wondering it came out really great.  He was the coffee cup from game of thrones they left in at the last season so yeah, I hope that in the same way you can keep your eyes peeled for weird places that sketching fits into your life.  Thank you so much for your time today.

I think I have 6 minutes, and so if anybody has questions, I'm going to look through the chat.  But feel free to jump in here or in the Slack.  And I'll be hanging out in the 235 Slack, as well, if you want to have a conversation after.

Oh, yeah, and I'm curious about Procreate.  I haven't tried that yet.  I'm glad to hear about the whiteboard markers.

All right, I don't see any questions.  So, yeah, thanks again, and thanks, MidCamp, and be safe.