Make Your Stick Figures Work Harder: The 3 C's of Sketching

Download Make Your Stick Figures Work Harder: The 3 C's of Sketching

Post on 11-Aug-2014




0 download

Embed Size (px)


Presented at Sketch Camp Chicago on November 2, 2013. Look inside a designer's toolkit and you'll likely find a broadly defined exercise called sketching. It's an exercise that can turn napkins, flip charts, whiteboards and 6-up templates into valuable assets containing everything from direction of business models to mobile app experiences. While a sketching exercise might produce an artifact seemingly simple to the uninitiated, great designers know the exercise requires design itself. By purposefully designing the exercise around the "3 C's" - communication, context and collaboration - we can increase participation and engagement by both design team members and stakeholders. In this session you'll learn about these three factors that are key to consider in planning and facilitating a sketching exercise. You'll also walk away with a handful of tips and tricks to try on your next project.


<ul><li> MAKE YOUR STICK FIGURES WORK HARDER The 3 Cs of Sketching Jason Ulaszek @webbit Sketch Camp Chicago November 2, 2013 </li> <li> INTRO So, this sketching thing... 2 </li> <li> THE 3 CS OF SKETCHING 1. Communication 2. Context 3. Collaboration @webbit </li> <li> EXERCISE Lets warm up. 4 </li> <li> URBAN PUPS Its important to socialize your dog and make sure they get enough exercise, but for people who live in cities, this can be especially difficult to manage. Hectic schedules combined with limited access to dog-friendly public space results in many dogs spending their days cooped up in apartments. Urban Pups is a new service that allows dog owners to swap pet care tips, find dog-friendly parks, and share insights and experiences. Whether youre looking for a dog park in your area or just looking for house training suggestions, Urban Pups can help keep all of the pups in your community happy and healthy. @webbit </li> <li> YOUR ASSIGNMENT (PART 1) Youve been hired to lead the UX practice at Urban Pups. As the lead UX designer, youre now responsible for helping set the experience design strategy and direction for the soon-to-be-released mobile application. Until now, the company has only provided their service via a desktop site. Your team consists of a junior UX designer, a project manager and a front-end developer. Theyve been doing the best they can to support the sales and marketing business stakeholders, but they havent been following much of a design process. This could be a great opportunity to introduce some sketching! 1. Draw the experience of a sketching activity. 2. Consider communicating the process, the context of the experience and collaboration amongst team members. 3. You have 5 minutes. @webbit </li> <li> COMMUNICATION Sketches communicate. You should too. 7 </li> <li> Communication is one of the largest hurdles we face in the product design process. Aaron Irizarry Product Designer, Nasdaq @aaroni @webbit </li> <li> SKETCHING CAN HELP Quickly communicates ideas &amp; direction (early) Helps avoid roadblocks by inviting discussion Visually communicates concepts, flows &amp; designs Engaging and fun - builds dynamic team environment @webbit </li> <li> WE USE IT TO COMMUNICATE THE EXPERIENCE @webbit </li> <li> TO COMMUNICATE OUR FOCUS OR @webbit </li> <li> OR EVEN BUSINESS IDEAS... Source: twttr sketch, Jack Dorsey March 24th, 2006 @webbit </li> <li> OR PHYSICAL PRODUCTS Source: Early sketch book, Harley Davidson Museum, Milwaukee, Wisconsin @webbit </li> <li> OR SERVICES @webbit </li> <li> BUT, EQUALLY IMPORTANT... Source: Sketching Interfaces, Michael Angeles @webbit </li> <li> COMMUNICATE EVALUATION Source: Sketching Interfaces, Michael Angeles @webbit </li> <li> COMMUNICATE THE PLAN Source: Good Design Faster: New Techniques for Creative Ideas, Leah Buley UI 15 2010 @webbit </li> <li> SAMPLE PLAN - SKETCHBOARDING @webbit </li> <li> SHOW &amp; TELL THE STORY OF THE PROCESS @webbit </li> <li> IT WILL HELP SET EXPECTATIONS @webbit </li> <li> KEY ELEMENTS TO COMMUNICATE Assumptions Structure youre making and flow of the process Roles team members will play Level of fidelity rationale Review and evaluation process Anticipated outcome @webbit </li> <li> CONTEXT Focus, depth and dynamics of the sketch experience. 22 </li> <li> Dont get focused on the screen. You want to pull back and consider the context. The experience. Peter Merholz VP of Design, Groupon @peterme @webbit </li> <li> INSIGHT The fidelity of a sketch should reflect the depth of your thinking. @webbit </li> <li> FOCUS AND PURPOSE Sketching To Communicate An Idea "Here's what I'm trying to tell you..." Sketching To Record What We're Seeing And Hearing "This is what I want to remember..." Sketching To Work Through Some Thinking Sketching To Reflect What We're Hearing "This is what I think you're telling me..." Sketching To Document "Here's is what we've ended up with..." "What will this look like?..." Source: Why We Sketch, Jared Spool @webbit </li> <li> COMMUNICATE AN IDEA @webbit </li> <li> RECORD WHAT WERE SEEING &amp; HEARING @webbit </li> <li> WORK THROUGH SOME THINKING @webbit </li> <li> WORK THROUGH SOME THINKING @webbit </li> <li> SKETCHING TO DOCUMENT @webbit </li> <li> SKETCHING TO DOCUMENT @webbit </li> <li> SO, HOW DO YOU GET THERE? Source: Good Design Faster: New Techniques for Creative Ideas, Leah Buley UI 15 2010 @webbit </li> <li> THE SKETCH MIGHT INCLUDE... Nouns people, places and things Reaction of the system - personality, playfulness Emotion frustration, surprise, enjoyment, fear Descriptors compare previous to the new now, compare to competition Systems and data involved (current and new) Design principles that youre satisfying ... and the environment of the experience! @webbit </li> <li> SHARPIE MAKES YOU COMMIT Source: Good Design Faster: New Techniques for Creative Ideas, Leah Buley UI 15 2010 @webbit </li> <li> OR TOOLS... @webbit </li> <li> COLLABORATION Work together to build understanding and fill in the gaps. 36 </li> <li> The goal is to move from the idea of designer as artiste towards a notion of designer as facilitator. Leah Buley Author and UX Designer, Intuit @ugleah @webbit </li> <li> TYPICAL PROCESS 1. Ground yourself 2.Sketch 3. Share and evaluate 4.Refine @webbit </li> <li> ROLES IN COLLABORATION The pen The team (contributors) The sketch Moderator/instigator Parking lot @webbit </li> <li> FOR SOME TEAM MEMBERS, GETTING STARTED MIGHT BE CHALLENGING @webbit </li> <li> MAXIMIZE ENGAGEMENT Do Find inspiration Work fast; generate more Embrace constraints Explain the experience (annotate) Stop at good enough Dont Be defensive Focus on details early Forget the purpose (big picture) @webbit </li> <li> GROUND EVERYONE BEFORE EVALUATING @webbit </li> <li> EVALUATION TIPS Clearly identify roles in the process - e.g., Walk the data before getting started Refer back to inputs when needed designer, moderator, etc. Challenge common design patterns and assumptions Create three lists for each sketch advantages, disadvantages and open questions @webbit </li> <li> HAVE FUN WITH SKETCH-PROPS @webbit </li> <li> ADDITIONAL IDEAS Document the process and experience (itll help you next time) Scan the work for remote team members or later recall Record screen casts and walk- throughs @webbit </li> <li> CREATE OPPORTUNITY FOR OTHERS TO PARTICIPATE @webbit </li> <li> EXERCISE Lets refine our earlier sketch. 47 </li> <li> YOUR ASSIGNMENT (PART 2) 1. Turn to the person next to you. 2.Explain your drawings to each other. 3.Now refine each others drawing to improve upon the a. Communication b. Context c. Collaboration 4.You have 10 minutes. 5.Then well share. @webbit </li> <li> WRAP UP Whats next? 49 </li> <li> I would add another C (CxCCC). Clarity of Communication, Clarity of Context, Clarity of Collaboration. Sketching does that on all the three aspects, and if something isnt clear ask why, involve more people, fill the gaps until it gets clear. Davide Casali Author and UX Designer, Automattic @folletto @webbit </li> <li> ica ion at or un on ti lla b m Co m Co Clarity Context @webbit </li> <li> Lets eradicate illuphobia. Is that even a word? It is now. Brandy Agerbeck Artist &amp; Graphic Facilitator, Loosetooth @loosetooth @webbit </li> <li> FIN Thank you. 53 </li> </ul>