{"id":20419,"date":"2020-06-23T17:08:17","date_gmt":"2020-06-23T16:08:17","guid":{"rendered":"https:\/\/blog.www.shopjessicabuckley.com\/?p=20419"},"modified":"2020-12-06T23:04:48","modified_gmt":"2020-12-06T23:04:48","slug":"sketching-techniques-improve-design-process","status":"publish","type":"post","link":"https:\/\/www.shopjessicabuckley.com\/blog\/sketching-techniques-improve-design-process\/","title":{"rendered":"Sketching techniques to add to your design process"},"content":{"rendered":"<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><script type=\"application\/ld+json\"> {\n  \"@context\": \"https:\/\/schema.org\",\n  \"@type\": \"WebPage\",\n  \"headline\": \"\n            Sketching techniques to add to your design process - Marvel Blog        \",\n  \"about\": [\n    {\"@type\": \"Thing\",\"name\": \"Sketching\",\"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/Sketch_(drawing)\"}, \n    {\"@type\": \"Thing\",\"name\": \"techniques\",\"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/Technology\"}, \n    {\"@type\": \"Thing\",\"name\": \"design process\",\"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/Design\"}, \n    {\"@type\": \"Thing\",\"name\": \"process\",\"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/Business_process\"}\n  ],\n  \"mentions\": [\n    {\"@type\": \"Organization\",\"name\": \"N'Sync\",\"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/NSYNC\"}, \n    {\"@type\": \"Thing\",\"name\": \"skill\",\"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/Skill\"}, \n    {\"@type\": \"Thing\",\"name\": \"toolbox\",\"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/Toolbox\"}, \n    {\"@type\": \"Thing\",\"name\": \"learner\",\"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/Learning\"}, \n    {\"@type\": \"Thing\",\"name\": \"Drawing\",\"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/Drawing\"}, \n    {\"@type\": \"Thing\",\"name\": \"play around\",\"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/Game\"}, \n    {\"@type\": \"Thing\",\"name\": \"career\",\"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/Career\"}\n  ]\n}\n<\/script><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Growing up, I have always been a visual learner. Drawing out my thoughts helped me better understand concepts and play around with how things could fit together. I also use <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.shopjessicabuckley.com\/sketching-will-make-smarter-designer\/\">sketching<\/a> as a way to articulate my thoughts when it comes to writing. I didn\u2019t realize until later on in my career that most people find it difficult to communicate the ideas that they have in their heads in a visual way.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">As a designer, part of your role is to translate thoughts and ideas into a shared reality. When you sketch, people can see the idea, understand it and begin to empathize. This is when a team of people can start to work towards something greater.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Sketching is essentially a skill that can be practiced. There are always new things to learn and refine in your process. Over time, you can build a toolbox of sketching techniques for new problems that you encounter in the future.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-20422\" src=\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2020\/06\/1.png\" alt=\"\" width=\"720\" height=\"414\" srcset=\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2020\/06\/1.png 720w, https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2020\/06\/1-600x345.png 600w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Tips to Improve Your Sketching<\/h2>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li><b class=\"fontWeight-5\">Add Arrows<\/b> <b class=\"fontWeight-5\">&amp; Detailed Annotations <\/b>- Create a user flow by mapping out the key interactions. Use your sketches to guide someone through a story in your absence.<\/li>\n<li><b class=\"fontWeight-5\">Write Feedback Next to Your Sketches<\/b> - Your sketches should evolve as new ideas come to the table. Note down common areas of confusion and ideas that you\u2019d like to explore further.<\/li>\n<\/ul>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li><b class=\"fontWeight-5\">Attach Sketches to Your Project File <span style=\"font-weight: 400;\">- When you\u2019ve completed your sketches, take a picture and attach the image directly into your working design document. This way you can quickly reference what decisions led to which outcomes without having to search for it.<\/span><\/b><\/li>\n<li style=\"font-weight: 400;\"><b class=\"fontWeight-5\">Give Your Sketches a Name<\/b><span style=\"font-weight: 400;\"> (Optional) - It\u2019s fun sometimes to give an idea or project a clever name. It helps to bring people on board when you kick start a project. Some examples from my coworkers: Can I talk to your Page Manager? or N\u2019Sync - for a <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.shopjessicabuckley.com\/mixed-io-marvel-collaborate-prototype-designs-real-time\/\">real-time collaboration<\/a> project.<\/span><\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"style=\"text-align: center;\">. . .<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Sketching techniques to add to your design process<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><i>Think about how these techniques could be applied to your own design process and how you can build your own toolbox for solving problems in the future.<\/i><\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">1) Crazy 8\u2019s<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><b class=\"fontWeight-5\">Phase of Design Process<\/b>: Ideation<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Crazy 8\u2019s is an exercise used during the Sketching phase of a <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.gv.com\/sprint\/\">Design Sprint<\/a>. The purpose of this exercise is to generate a wide range of solutions in a short period of time. Basically, each person has 8 minutes to sketch out 8 ideas. Prior to sketching, all sprint participants should have a clear understanding of what problem is and why it\u2019s important to solve.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Technique: Start with a blank piece of paper. Fold the paper in half four times to create 8 sections. Set eight 1-minute timers. Sketch 1 idea per minute in each section.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">This can be used as a group exercise or individually as part of your design process. In both cases, setting a time limit helps people explore diverging ideas rather than narrowing in on one solution too early in the process.<\/p>\n<div id=\"attachment_20423\" style=\"width: 730px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-20423\" class=\"wp-image-20423 size-full\" src=\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2020\/06\/2.png\" alt=\"\" width=\"720\" height=\"414\" srcset=\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2020\/06\/2.png 720w, https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2020\/06\/2-600x345.png 600w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><p id=\"caption-attachment-20423\" class=\"wp-caption-text\">Crazy 8\u2019s Example: Meal Prep App.<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">If you are running this exercise as part of a design sprint, coming up with a new idea every minute will likely feel rushed. Reassure the group that it\u2019s okay to skip a round or two and move onto the next idea -coming up with a hand full of ideas is better than just having 1 or 2! These sketches help you think through your ideas without being influenced by other people. You also don\u2019t need to share any of these sketches. The next phase in a sprint would require you to look back at your own sketches and pitch your best solution.<\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">2) 8-4-2-1 Rapid Prototyping<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Phase of Design Process<\/strong>: Ideation, <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.shopjessicabuckley.com\/features\/prototyping\">Prototyping<\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">This is a <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.shopjessicabuckley.com\/what-is-rapid-prototyping\/\">rapid prototyping<\/a> method that I learned in my post-grad program. Practicing this exercise helps you incorporate feedback at all stages of a design. It\u2019s also a quick exercise to get your team involved in at the early stages of a project -especially teams that are not familiar with UX processes.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Technique<\/strong>: Sketch for 8 minutes, 6 minutes, 4 minutes and 2 minutes with 2 minute feedback sessions in between. It helps to provide the person giving you feedback with a bit of context about the problem before you begin sketching.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">I use this technique to help me work through problems quickly -it takes less than 30 minutes to go through this exercise and have work to show for it. It\u2019s also a quick technique to put into practice when working on your own projects or design challenges. I go into more detail about this rapid prototyping technique in <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/uxdesign.cc\/3-rapid-prototyping-exercises-to-improve-your-skills-in-ux-design-f2c8b2d690b3\">this post<\/a>.<\/p>\n<div id=\"attachment_20421\" style=\"width: 1610px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-20421\" class=\"wp-image-20421 size-full\" src=\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2020\/06\/Artboard-Copy-3.png\" alt=\"8-6-4-2 Rapid Prototyping Example: Audio Tour Sketches\" width=\"1600\" height=\"788\" srcset=\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2020\/06\/Artboard-Copy-3.png 1600w, https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2020\/06\/Artboard-Copy-3-600x296.png 600w, https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2020\/06\/Artboard-Copy-3-1500x739.png 1500w, https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2020\/06\/Artboard-Copy-3-768x378.png 768w, https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2020\/06\/Artboard-Copy-3-1536x756.png 1536w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><p id=\"caption-attachment-20421\" class=\"wp-caption-text\">8-6-4-2 Rapid Prototyping Example: Audio Tour Sketches<\/p><\/div>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">3) Breadboarding Sketch<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Phase of Design Process<\/strong>: Ideation, Prototyping<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Breadboarding is a method used by electrical engineers to test out a concept using lights and connectors before creating a physical prototype. It allows you to experiment and explore different approaches when solving problems in circuit design. This idea was adapted in the <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/basecamp.com\/shapeup\">Shape Up process<\/a> used by <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/basecamp.com\/welcome-back\">Basecamp<\/a> as a way to quickly fit new ideas into an existing flow.<\/p>\n<div id=\"attachment_20424\" style=\"width: 730px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-20424\" class=\"wp-image-20424 size-full\" src=\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2020\/06\/3.png\" alt=\"analogue vs digital shape up\" width=\"720\" height=\"220\" srcset=\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2020\/06\/3.png 720w, https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2020\/06\/3-600x183.png 600w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><p id=\"caption-attachment-20424\" class=\"wp-caption-text\">Find the Elements, Shape Up<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">There are 3 concepts used in a breadboarding sketch:<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Places<\/strong> are where you can navigate to (for example, screens and pop-up modals).<\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Affordances<\/strong> are things that you can interact with (for example, buttons, form fields). In this case, interface copy is also considered as an affordance because it provides users information about what they can do next.<\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Connecting Lines<\/strong> show how you would move from one place to another.<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Technique<\/strong>: Start by writing down a \u2018place\u2019 (where the user is currently). Then map out any affordances (elements that the user can act on). Use connecting lines to show how users would move from place to another while performing a specific task. Explore different flows and justify when changes are made.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">For example:<\/p>\n<div id=\"attachment_20425\" style=\"width: 730px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-20425\" class=\"wp-image-20425 size-full\" src=\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2020\/06\/4.png\" alt=\"Breadboarding Sketch Example: User Flow when Upgrading.\" width=\"720\" height=\"220\" srcset=\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2020\/06\/4.png 720w, https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2020\/06\/4-600x183.png 600w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><p id=\"caption-attachment-20425\" class=\"wp-caption-text\">Breadboarding Sketch Example: User Flow when Upgrading.<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">This type of sketching allows ideas to live temporarily. You can quickly explore different ideas without having it be attached to any interface. I use this technique in the early stages where I\u2019d want to move through ideas quickly and evaluate what the pros and cons look like for each flow.<\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">4) Fat Marker Sketches<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Phase of Design Process<\/strong>: Ideation, Prototyping<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">This is another method introduced in the Shape Up process where the emphasis is to communicate ideas at the \u201cright level of abstraction\u201d. Using a fat marker to draw prevents you from jumping into details too quickly. You should be able to communicate ideas simply by giving context to how the feature would fit into the product as a whole.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Technique<\/strong>: Fat marker sketches are that drawn with broad strokes. This makes it difficult to add detail to your sketches. Start with the key elements then add affordances as needed. You should have the main problem, use cases and constraints identified before sketching out your ideas.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Typically, I use a double-sided marker for sketching. The thinner end allows me to draw with precision and the fat end of the marker would be used for checking off items in my to-do lists (very satisfying). This simple technique helped me to focus on working through the main elements of the solution (no matter how rough the idea may be) rather than drawing perfect lines. Oftentimes, ideas start off looking very rough and sometimes that\u2019s where we want to be.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-20426 size-full\" src=\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2020\/06\/5.png\" alt=\"Phase of Design Process: Ideation, Prototyping\" width=\"720\" height=\"414\" srcset=\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2020\/06\/5.png 720w, https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2020\/06\/5-600x345.png 600w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">5) Storyboarding with \u201cSnapshots\u201d<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Phase of Design Process<\/strong>: Pitch \/ Solution<br \/>\nA twist on the traditional storyboarding is to use this method to communicate processes or interactions that would normally be difficult to explain. You can do this by creating \u201csnapshots\u201d of a process or interaction and then add annotations for further explanation.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Technique<\/strong>: Sketch out the first interaction, take a picture and annotate. Add in the next part of the interaction and repeat this process to create a linear (step-by-step) story of a process.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Normally, storyboarding is used during the ideation phase when used to walk someone through the user\u2019s journey. This type of storyboarding would be included at the end of the design process with the final documentation (the pitch, following the Shape Up process). This has helped me share technical details and interactions across teams.<\/p>\n<div id=\"attachment_20427\" style=\"width: 730px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-20427\" class=\"wp-image-20427 size-full\" src=\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2020\/06\/6.png\" alt=\"Storyboard Examples: (left: demo video, right: backend processes).\" width=\"720\" height=\"414\" srcset=\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2020\/06\/6.png 720w, https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2020\/06\/6-600x345.png 600w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><p id=\"caption-attachment-20427\" class=\"wp-caption-text\">Storyboard Examples: (left: demo video, right: backend processes).<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"style=\"text-align: center;\">. . .<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Conclusion<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">I like to think of sketching as the \u2018translation\u2019 part of the design process, where free-floating ideas start to become more concrete as we explore different ways to solve a problem. Sketching helps you see the design from the lense of what it could be. It helps walk others through the story of how an idea begins, evolves and grows beyond the pages in our sketchbook.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"style=\"text-align: center;\">. . .<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><span style=\"font-weight: 400;\">Thanks for reading! If you are interested in chatting, drop me a message at <\/span><a class=\"link link--blue fontWeight-4\"href=\"mailto:elainetran.tran@gmail.com\"><span style=\"font-weight: 400;\">elainetran.tran@gmail.com<\/span><\/a><span style=\"font-weight: 400;\"> or connect with me on <\/span><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.linkedin.com\/in\/elaine-tran\/\"><span style=\"font-weight: 400;\">LinkedIn<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Further reading:<\/h3>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li class=\"LinkSuggestion__LinkSuggestionWrapper-sc-1mdih4x-0 bRwwZe\"><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/www.shopjessicabuckley.com\/blog\/10-simple-tips-to-improve-user-testing\/\" target=\"_blank\" rel=\"noopener noreferrer\">10 Simple Tips to Improve User Testing<\/a><\/li>\n<li class=\"LinkSuggestion__LinkSuggestionWrapper-sc-1mdih4x-0 bRwwZe\"><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/www.shopjessicabuckley.com\/blog\/ux-facilitation-methods\/\" target=\"_blank\" rel=\"noopener noreferrer\">UX Facilitation Methods<\/a><\/li>\n<li class=\"LinkSuggestion__LinkSuggestionWrapper-sc-1mdih4x-0 bRwwZe\"><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/www.shopjessicabuckley.com\/blog\/intro-ux-research\/\" target=\"_blank\" rel=\"noopener noreferrer\">Intro to UX Research<\/a><\/li>\n<li class=\"LinkSuggestion__LinkSuggestionWrapper-sc-1mdih4x-0 bRwwZe\"><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/www.shopjessicabuckley.com\/blog\/common-ux-design-methods-techniques\/\" target=\"_blank\" rel=\"noopener noreferrer\">Most Common UX Design Methods and Techniques<\/a><\/li>\n<li class=\"LinkSuggestion__LinkSuggestionWrapper-sc-1mdih4x-0 bRwwZe\"><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/www.shopjessicabuckley.com\/blog\/new-ux-design-feeling-overwhelmed\/\" target=\"_blank\" rel=\"noopener noreferrer\">New to UX Design? Feeling Overwhelmed?<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Growing up, I have always been a visual learner. Drawing out my thoughts helped me better understand concepts and play around with how things could fit together. I also use sketching as a way to articulate my thoughts when it comes to writing. I didn\u2019t realize until later on in my career that most people find it difficult to communicate&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/www.shopjessicabuckley.com\/blog\/sketching-techniques-improve-design-process\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":332,"featured_media":20428,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[500],"tags":[],"class_list":["post-20419","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-process"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v15.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"description\" content=\"Sketching is essentially a skill that can be practiced. Here are a few tips to build your toolbox of sketching techniques for new problems in your process.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.shopjessicabuckley.com\/blog\/sketching-techniques-improve-design-process\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Sketching techniques to add to your design process\" \/>\n<meta property=\"og:description\" content=\"Sketching is essentially a skill that can be practiced. Here are a few tips to build your toolbox of sketching techniques for new problems in your process.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.shopjessicabuckley.com\/blog\/sketching-techniques-improve-design-process\/\" \/>\n<meta property=\"og:site_name\" content=\"Marvel Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/marvelapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-06-23T16:08:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-12-06T23:04:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2020\/06\/83.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"700\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:site\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"6 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#organization\",\"name\":\"Marvel\",\"url\":\"https:\/\/www.shopjessicabuckley.com\/blog\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/marvelapp\",\"https:\/\/www.instagram.com\/marvelapp\/\",\"https:\/\/www.linkedin.com\/company\/marvel-app\/\",\"https:\/\/twitter.com\/marvelapp\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#logo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2018\/06\/Logo-Light.png\",\"width\":1605,\"height\":1130,\"caption\":\"Marvel\"},\"image\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#website\",\"url\":\"https:\/\/www.shopjessicabuckley.com\/blog\/\",\"name\":\"Marvel Blog\",\"description\":\"Ideas and words on user experience, design, collaboration and more\",\"publisher\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.shopjessicabuckley.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/sketching-techniques-improve-design-process\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2020\/06\/83.png\",\"width\":1600,\"height\":700},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/sketching-techniques-improve-design-process\/#webpage\",\"url\":\"https:\/\/www.shopjessicabuckley.com\/blog\/sketching-techniques-improve-design-process\/\",\"name\":\"Sketching techniques to add to your design process\",\"isPartOf\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/sketching-techniques-improve-design-process\/#primaryimage\"},\"datePublished\":\"2020-06-23T16:08:17+00:00\",\"dateModified\":\"2020-12-06T23:04:48+00:00\",\"description\":\"Sketching is essentially a skill that can be practiced. Here are a few tips to build your toolbox of sketching techniques for new problems in your process.\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.shopjessicabuckley.com\/blog\/sketching-techniques-improve-design-process\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/sketching-techniques-improve-design-process\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/sketching-techniques-improve-design-process\/#webpage\"},\"author\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#\/schema\/person\/dd2f4f50093c87e4bec5f06b90ebef50\"},\"headline\":\"Sketching techniques to add to your design process\",\"datePublished\":\"2020-06-23T16:08:17+00:00\",\"dateModified\":\"2020-12-06T23:04:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/sketching-techniques-improve-design-process\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/sketching-techniques-improve-design-process\/#primaryimage\"},\"articleSection\":\"Design Process\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.shopjessicabuckley.com\/blog\/sketching-techniques-improve-design-process\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#\/schema\/person\/dd2f4f50093c87e4bec5f06b90ebef50\",\"name\":\"Elaine Tran\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/515c95ef784c547ac3e072afa3fc9d6072753b4b59a1423c2296ed948a193d2b?s=96&d=mm&r=g\",\"caption\":\"Elaine Tran\"},\"description\":\"Product Designer at Venngage. I tell stories about personal growth and design on Medium. If you'd like to reach out, I'd be happy to connect on LinkedIn!\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/posts\/20419","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/users\/332"}],"replies":[{"embeddable":true,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/comments?post=20419"}],"version-history":[{"count":0,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/posts\/20419\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/media\/20428"}],"wp:attachment":[{"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/media?parent=20419"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/categories?post=20419"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/tags?post=20419"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}