{"id":13922,"date":"2017-12-25T11:30:30","date_gmt":"2017-12-25T11:30:30","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=13922"},"modified":"2020-09-03T12:41:34","modified_gmt":"2020-09-03T11:41:34","slug":"pens-process-product%e2%80%8a-%e2%80%8asketching-ux","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/pens-process-product%e2%80%8a-%e2%80%8asketching-ux\/","title":{"rendered":"Pens, Process, Product\u200a\u2014\u200aSketching for UX"},"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\">I\u2019m passionate about sketching because I\u2019ve seen immeasurable benefits from it. Whether that\u2019s professionally through the development of my communication, problem solving, storytelling and design skills, or personally in terms of relaxation, improved creativity, greater awareness of the world around me, as well as increased empathy towards the real people who use digital products and services. All of which are important skills to nurture if you work in user experience design.<\/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\">From generating concepts, to communicating ideas, and mapping processes or simply problem solving throughout, I\u2019ve had a lot of success on the projects where I\u2019ve actively used visual thinking.<\/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\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1cKyVtJN9w92Y0Ea_5hXxYA.jpeg\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1cKyVtJN9w92Y0Ea_5hXxYA.jpeg\" title=\"\" alt=\"\" \/><\/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\">I find it odd that sketching isn\u2019t more commonplace. Despite working in a creative environment there\u2019s still apprehension about putting pen to paper to express ideas visually \u2014 that\u2019s without even sharing what\u2019s been produced. Perhaps it\u2019s a sense of vulnerability about documenting and expressing quick, half formed ideas, rather than the final product.<\/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 class=\"long-quote\">\"In reality, by sketching things out first and circulating them you\u2019re showing your process in addition to the iterative development of the product. By drawing the whole arc of the projects development you take yourself, your team and your clients on a journey from day one.\"<\/span><\/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 allows you to:<\/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>Eliminate any ideas that won\u2019t work quickly and easily<\/li>\n<li>Outline documents in a more engaging way<\/li>\n<li>Provide visual stimuli that helps everyone keep on the same page throughout the project<\/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\">To that end, I had a thought a while ago about how I use sketching at work and posted a quick doodle on <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/twitter.com\/ChrisSpalton\">Twitter<\/a> &amp; <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.linkedin.com\/in\/chrisspalton\/\">Linkedin<\/a><\/p>\n<div id=\"attachment_6580\" style=\"width: 2058px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1L6UyZa02ymxU9SazwNoRyg.jpeg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1L6UyZa02ymxU9SazwNoRyg.jpeg\" alt=\"\" width=\"2048\" height=\"2048\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">Original doodles thinking about how I use sketching at\u00a0work.<\/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\">It went down so well that I thought I\u2019d expand and explore my <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">top seven reasons<\/strong> for sketching in UX (these are in order of how a project might run but all are interchangeable):<\/p>\n<ol class=\"pageWrap pageWrap--s list list--ordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>Sketching meetings, talks, training sessions and conferences<\/li>\n<li>Sketching to problem solve<\/li>\n<li>Communicating ideas<\/li>\n<li>Developing quick concepts<\/li>\n<li>\u2018Sketching the sentiment\u2019<\/li>\n<li>Creating user journey\/process comic strips &amp; storyboards<\/li>\n<li>Prototyping screens and information architecture<\/li>\n<\/ol>\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;\">1. Sketching meetings, talks, training sessions and conferences<\/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\"><\/p>\n<div id='gallery-1' class='gallery galleryid-13922 gallery-columns-2 gallery-size-medium'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon portrait'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/12\/18ms0OswnBKhFxbhDQVWl2g.jpeg'><img loading=\"lazy\" decoding=\"async\" width=\"424\" height=\"600\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/12\/18ms0OswnBKhFxbhDQVWl2g-424x600.jpeg\" class=\"attachment-medium size-medium\" alt=\"\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/12\/18ms0OswnBKhFxbhDQVWl2g-424x600.jpeg 424w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/12\/18ms0OswnBKhFxbhDQVWl2g-768x1086.jpeg 768w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/12\/18ms0OswnBKhFxbhDQVWl2g-1060x1500.jpeg 1060w\" sizes=\"auto, (max-width: 424px) 100vw, 424px\" \/><\/a>\n\t\t\t<\/dt><\/dl><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon portrait'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/12\/1_ua0VwUHCSSa0yMHbxN9jw.jpeg'><img loading=\"lazy\" decoding=\"async\" width=\"424\" height=\"600\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/12\/1_ua0VwUHCSSa0yMHbxN9jw-424x600.jpeg\" class=\"attachment-medium size-medium\" alt=\"\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/12\/1_ua0VwUHCSSa0yMHbxN9jw-424x600.jpeg 424w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/12\/1_ua0VwUHCSSa0yMHbxN9jw-768x1086.jpeg 768w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/12\/1_ua0VwUHCSSa0yMHbxN9jw-1060x1500.jpeg 1060w\" sizes=\"auto, (max-width: 424px) 100vw, 424px\" \/><\/a>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">These are the perfect places to start sketching (and how I personally got into the regular habit of drawing and became comfortable with my level of skill).<\/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\">Even if you\u2019re not ready to put your doodles in front of anyone else, capturing meetings, training, talks and conferences are an ideal start. You\u2019re probably already making notes so starting to add visual elements such as titles, dividers and containers, small images to represent key points, arrows to connect information and speech bubbles to capture quotes isn\u2019t that much of a stretch. These simple tricks really elevate your content to be more engaging and enjoyable to read.<\/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\">Not only are these things personal (no one has to see them if you don\u2019t want them to), but sketching work placed events are useful for building up your skill set. If you record your notes visually you\u2019ll be more likely to go back and reflect upon them.<\/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\">Why not see if there are topics or images that crop up regularly \u2014 everyone relates lightbulbs to ideas so if you\u2019re in a lot of brainstorming meetings practice those. It\u2019s also likely that you\u2019ll be working with people, so practice drawing stickmen and adding more detail \u2014 computers, phones, offices, are all things that are likely to come up. The key is to learn to draw 5\u201310 common things to a standard you\u2019re happy with.<\/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\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1fDTj0bYYIvgePHopfja_Bw.jpeg\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1fDTj0bYYIvgePHopfja_Bw.jpeg\" title=\"\" alt=\"\" \/><\/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\"><\/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\">By nailing down a few frequently used subjects you\u2019ll soon build up your own visual vocabulary of items that you can quickly and confidently draw upon. So, when it comes to applying these skills to projects you\u2019re working on you\u2019ll already be confident in what you\u2019re showing to your team and the stakeholders.<\/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\">Top Tip:<\/strong><\/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 class=\"long-quote\">\"Once you feel you can open up and feel comfortable sharing (try and do this early to build your confidence) \u2014 draw up the meeting, take a picture and send it to all the attendees, they\u2019ll be blown away. Not only were you paying the most attention, you\u2019ve captured all the information in an engaging way that they want to read and share. This also helps keep everyone in attendance quite literally on the same page.\"<\/span><\/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\">What to watch out for:<\/strong><\/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 class=\"long-quote\">\"Make sure you let people know before the meeting starts that you\u2019ll be sketch noting. I\u2019ve forgotten on many occasions and had clients glaring at me from across the table as they think you\u2019re doodling and failing to pay attention in a meeting that they may have paid a lot of money for. A single sentence at the start can put them at ease (even if they don\u2019t or won\u2019t quite understand what you mean until the end). This lets them know you\u2019re not wasting time - in fact, you\u2019ve been deeply engaged the whole time.\"<\/span><\/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;\">2. Sketching to problem\u00a0solve<\/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\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1Y93u1s389-WaPDnOiaLWQw.jpeg\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1Y93u1s389-WaPDnOiaLWQw.jpeg\" title=\"\" alt=\"\" \/><\/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\"><\/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 the really fun part, you\u2019ve had the kick off meetings, the project is go and you\u2019re in a room with your team. How are you going to address the problem? Draw it of course! A problem visualised is a problem halved.<\/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\">Grab an A3 sheet of paper or get next to a whiteboard. Draw a big circle and write \u2018the issue you\u2019re trying to fix\u2019 clearly \u2014 you can also add visual stimuli. This makes it visible for everyone. Now start importing ideas from around the room, even better get each individual to draw\/write on a post it (one issue per note) \u2014 include every issue they can think of that\u2019s connected to the core issue. This promotes an inclusive working environment as everyone gets to submit ideas.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"Drawing things out helps everyone in the room to start to visualise how the entire problem is constructed as a whole.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Laying out and organising the ideas around your core problem helps group them into common themes. Once you\u2019ve collected and organised the ideas you\u2019ll be able to make connections between the problems. This helps you see where solutions might be able to have the most impact.<\/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\">Drawing things out helps everyone in the room to start to visualise how the entire problem is constructed as a whole, whilst also helping identify how it can be broken down into chunks which can then be tackled in a more logical, manageable, 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\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">What to watch out for:<\/strong><\/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 class=\"long-quote\">\"Whilst this method helps get the brain thinking and ideas out there from the group, you can\u2019t simply leave ideas on the whiteboard and think your problem is solved. Make sure you take time to gather, organise and finalise your ideas sessions into something more concrete and usable. Someone in the team should own this and be responsible for the next steps \u2014 you don\u2019t want to lose a fantastic idea when the next meeting starts and someone wipes away all your good work.\"<\/span><\/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;\">3. Communicating ideas<\/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\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1_9Zly_F1HlhXBVP99KZfzQ.jpeg\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1_9Zly_F1HlhXBVP99KZfzQ.jpeg\" title=\"\" alt=\"\" \/><\/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\">Once you\u2019ve drawn out the problem, sketching is perfect for generating ideas for solutions. It\u2019s quick, easy, and everyone can see what you mean \u2014 it\u2019s also visual so you and your team can quickly identify, discuss and filter the good and bad ideas out.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"Whether it\u2019s a screen, or a service design even simple diagrams will help you get your message across, AND explained clearly and easily.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">One of the best methods to ensure you reach a great idea that everyone agrees on in a group setting is to:<\/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\">First:<\/strong><\/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>Split the group into smaller teams, 2\u20134 people per team is ideal.<\/li>\n<li>Get every individual to draw out 4\u20135 quick ideas which solve the problem.<\/li>\n<li>Each individual presents their ideas and feeds back to others.<\/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\">Second:<\/strong><\/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>Take the best parts from everyone\u2019s first ideas and iterate on your solutions, incorporate the popular elements that your colleagues came up with, get rid of the stuff that wasn\u2019t too popular or in hindsight feasible.<\/li>\n<li>Go through the presentation and feedback session again. This time try to form a group consensus as to what elements should be combined to make the best possible solution your teams can come up with.<\/li>\n<li>Assign someone within your group to draw up the collaborative effort into a consolidated sketch. This will ensure all the best elements are featured in your final design.<\/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\">Thirdly:<\/strong><\/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>Bring the group back together and repeat the present\/feedback loop, this time each team presents their final sketch idea.<\/li>\n<li>As before, each group takes the best parts of the other groups ideas and incorporates them into their own amended design.<\/li>\n<li>After this round come together and combine the best overall ideas into one design.<\/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\">At the end of the session you\u2019ll have an ideal group consensus on an approach or a design. Importantly, it\u2019s been democratic as everyone had an opportunity to feed into the mock-up. The solution produced is reflective of all the best ideas from the whole group. Perfect!<\/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\">Top Tip:<\/strong><\/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 class=\"long-quote\">\"Even when working alone sketching multiple quick ideas helps combine and consolidate your thoughts as you go, meaning you\u2019ll still be able to easily communicate the how, why, and most importantly who your designs will help. Also, being able to swiftly doodle \u201cI\u2019m thinking this\u201d helps overcome language barriers when working with international clients\/customers \u2014 in my experience this has definitely saved time, and unnecessary frustration from both parties.\"<\/span><\/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\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1q0an94wORn3Gf0ij4-NLww.jpeg\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1q0an94wORn3Gf0ij4-NLww.jpeg\" title=\"\" alt=\"\" \/><\/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\"><\/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;\">4. Developing quick\u00a0concepts<\/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\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1Aq8cU0173tFRmOdLTO3u7g.jpeg\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1Aq8cU0173tFRmOdLTO3u7g.jpeg\" title=\"\" alt=\"\" \/><\/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\">Another useful application for sketching in UX is drawing out the overall vision and concept for a project on a single page. This is especially helpful when preparing pitches, or early in initial engagements with clients, as it summarises your slides, early ideas, and overall experience in one simple image that creates a vision for the projects future development.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"Capturing a selection of your ideas visually early on, in one core image, can really help get clients on board with you and your team.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Visualising your ideas also has the additional benefit of making them easily shareable, whether that\u2019s internally in your war room, or for clients to distribute with their stakeholders and wider team. Importantly, this adds value to your client\u2019s experience \u2014 they won\u2019t expect it and as a result it will differentiate your projects from other agencies from day one.<\/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 one of my favourite parts of my sketching process, it\u2019s an opportunity to explore the arc of what is possible and unrestrained, before the nuts and bolts of project constraints appear. The fact that it\u2019s visual, and hand drawn adds a human connection; it creates a contrast with slickly designed business slides and shows we\u2019re just real people trying to fix real people\u2019s problems.<\/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\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1GS2OaJbivUkABtJpUKqrIw.jpeg\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1GS2OaJbivUkABtJpUKqrIw.jpeg\" title=\"\" alt=\"\" \/><\/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\"><\/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\">Including a sketch that\u2019s so raw and unfinished will seem unusual to start with. Equally, you might be nervous about inserting a hand drawn image into a deck. You may ask yourself will it be right for the client? Will this kind of clarity benefit the project? But, don\u2019t worry too much. I\u2019ve had really positive feedback from these vision\/concept pieces, so give it a try \u2014 it could really help your pitch or early conversations stand out from the crowd.<\/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\">What to watch out for:<\/strong><\/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 class=\"long-quote\">\"I say above, not to worry about introducing sketches and rough concepts into a deck but this does come with a caveat; it won\u2019t work for all clients. Some will be expecting glossy pictures of hands holding phones and tablets with a polished idea on them so they can conceive what the idea will look like in real life. As always, it\u2019s important to gauge and understand your clients, I\u2019d advice floating these kinds of ideas early and see how comfortable the client is with them. Sketching can still aid your thinking but it might just be that what you\u2019ve created isn\u2019t suitable to present to your final audience.\"<\/span><\/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;\">5. \u2018Sketching the sentiment\u2019<\/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\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/15zMsOwO_Oh3zcSGZwubsEw.jpeg\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/15zMsOwO_Oh3zcSGZwubsEw.jpeg\" title=\"\" alt=\"\" \/><\/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\">Over the course of the research being captured, and the insights being qualified, I like to start building up what I call \u2018Sketching the Sentiment\u2019 \u2014 this is the earliest stage of my \u2018real\u2019 design process. I draw screens, but instead of worrying where the navigation bar might go, or how that menu might work, this stage is all about capturing the, \u201cIt should do something like <em>this<\/em>\u201d aspect of the design.<\/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\">Know you need a screen that asks for info? Draw some form fields and a question mark\u2026 There\u2019s going to be some data visualisation? Draw a pie chart and a bar\u2026 There\u2019ll be badges, awards or some form of recognition? Sketch a stickman cheering to himself on a podium or a medal\/trophy, or anything that represents victory to you.<\/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 class=\"long-quote\">\"I\u2019d advise drawing one computer\/tablet\/phone and photocopying a bunch of them so you can draw one idea per \u2018screen\u2019. Then sketch out all the aspects you want your product or app to include, \u2018sketch the sentiment\u2019 of each stage in the process.\"<\/span><\/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\">You should avoid considering the details of each screen at this stage, this allows you to keep making progress, while exploring and reorganising how the process or journey should flow with ease. By moving these sketches around you can quickly highlight where things need to join, split, diverge or combine, without getting bogged down in specific aspects that (at this stage) will only hold you up.<\/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\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1Q6-z5PGBcJanmy_Ght6ecQ.jpeg\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1Q6-z5PGBcJanmy_Ght6ecQ.jpeg\" title=\"\" alt=\"\" \/><\/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\"><\/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\">Once you have the sentiments of each stage of the journey\/process\/app sketched out, use these as anchors or containers for the more specific steps or screens that build up and combine to complete each aspect of the overarching sentiment.<\/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\">By outlining these key points first it allows you to easily visualise, understand, and explain at a high level how the process as a whole fits together. This provides you with the ability to explore and iterate solutions at a deeper level without disrupting the overall flow of the project.<\/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;\"><\/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\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1JZ5U312YJ3_EPesASefjYA.jpeg\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1JZ5U312YJ3_EPesASefjYA.jpeg\" title=\"\" alt=\"\" \/><\/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\"><\/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\">Programs like PowerPoint and Illustrator allow you to create clean and easy to understand layouts for journey process maps. What they miss, however, is the human element, which makes it difficult to capture the emotions of what your users will be experiencing at each stage. Here\u2019s where comic strips and storyboards come in \u2014 they\u2019re ideal for capturing both what the user is doing and feeling at each interaction or touchpoint.<\/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\">Comic strips are perfect for contrasting the existing journey to what an ideal journey might look like. Again, these can start lo-fi, with stickmen acting out the user journey they will move all the way through<br \/>\n\u2014 from the initial to the ideal experience.<\/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\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1vO5eRNhhLQKxMqvLSvLIMQ.jpeg\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1vO5eRNhhLQKxMqvLSvLIMQ.jpeg\" title=\"\" alt=\"\" \/><\/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\"><\/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\">Mapping out comics can really help you capture a complex process in a simple, insightful and engaging way. Combining the narrative elements and visuals of comic strips helps you clearly show to clients and stakeholders how the process works whilst highlighting how it can be improved from a human centred perspective.<\/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\">Top tip:<\/strong><\/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 class=\"long-quote\">\"Take some time to learn simple expressions representing happiness, confusion, anger, frustration and relief \u2014 these will go a long way to bringing your journeys to life.\"<\/span><\/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\">What to watch out for:<\/strong><\/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\">Sometimes the idea of a comic is going to seem pretty out there to a client, when you mention a comic strip there\u2019s a chance that the uninitiated might conjure up unsavoury images of nerds in basements engrossed in Gotham.<\/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\">Again, setting the scene with your client is important. Introduce small 2\u20133 panel comics showing individual interactions along the journey rather than a fully formed graphic novel.<\/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\">Also, creating comics requires some work and thought to ensure you\u2019re capturing the parts of the journey you need to. Avoid launching straight into drawing it because you\u2019ll end up failing to capture the right things. Plan it out, write a script, understand what is going to be on each panel and why. If you nail this down before you start drawing the comic will make far more sense and have greater impact with your client.<\/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;\">7. Prototyping screens and information architecture<\/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\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/11nSHWmTvrWgObL-Io_YgMQ.jpeg\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/11nSHWmTvrWgObL-Io_YgMQ.jpeg\" title=\"\" alt=\"\" \/><\/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\"><\/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\">Finally, remember to sketch your core designs. Once you\u2019ve captured the conversations, solved the problems, sketched the sentiments, captured your user comics and come up with some concepts it\u2019s time to get down to the nitty gritty of designs.<\/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\">One advantage of generating lots of these types of sketches is that you can get to user testing earlier. Allowing you to quickly iterate based on feedback and then ensure you\u2019re setting yourself up to refine the best ideas into high fidelity design elements. This stage is where all of the others come together.<\/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\">Top Tip:<\/strong><\/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 class=\"long-quote\">\"Draw out \u2018jigsaw pieces\u2019 of the elements you know will need to make up the final designs. You can then freely move these design features around. Why not even try and change the priority of features to form the best possible journey?\"<\/span><\/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\">Get it right, refine it into true wireframes, and then pass it all to your visual designers so they can really bring the composite elements to life.<\/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;\">Finally, (and most importantly) share you\u00a0work!<\/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\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1YGs2o3oGfv6E99TUpOsK6w.jpeg\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1YGs2o3oGfv6E99TUpOsK6w.jpeg\" title=\"\" alt=\"\" \/><\/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\"><\/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\">Throughout the whole process get in the habit of sharing your sketches, that means:<\/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>Don\u2019t just stuff them in a drawer to be forgotten about<\/li>\n<li>Don\u2019t wait until the end of the project to suddenly conjure up a pixel perfect design for your client<\/li>\n<li>Think iterative development, sketching comes into its own here<\/li>\n<li>Share them with your team and client throughout the whole project lifecycle<\/li>\n<li>Consider sharing with your peers and wider social media network<\/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\">What I cannot stress enough is that <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">the single biggest benefit of sketching is showing your thinking<\/strong>, ugliness and all, spanning the entire arc of a project.<\/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\">Show people you\u2019ve gone through a process to solve their problem, display the evolution of ideas, and explain how you got to where you did and why.<\/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\">These benefits aren\u2019t just limited to UX or design; no matter where you work we\u2019re all in the business of solving problems. Simply put, having the ability to take people on this journey via sketchnoting can have huge benefits for everyone involved. Who knows? You might not even have to write a debrief deck, because they\u2019ll already know everything\u2026 that sounds like sketching success to me!<\/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;\">It\u2019s worth mentioning:<\/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\">Chances are you\u2019ve read through the article above and at times thought, \u201cThat won\u2019t work for me\u201d and you\u2019re probably right, if you need to draw up a detailed list of requirements to pass to a development team there\u2019s no way sketching is the right thing to do at that stage.<\/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 class=\"long-quote\">\"Likewise, if you\u2019ve got an important final project debrief to deliver to senior stakeholders you can\u2019t just walk in with a handful of doodles and expect them to take you seriously. I\u2019m not saying you should necessarily replace any part of your workflow with sketching. My point is that you should explore areas where you could combine and introduce sketches to enhance your workflow and tell a better story.\"<\/span><\/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\">Clients can be a funny bunch, as mentioned several times above, it\u2019s best not to surprise them with this stuff out of the blue. Either make it clear upfront you\u2019ll be doing it, or introduce sketching in a drip-fed manner to help on-board them with the process. Don\u2019t lead them to expect a big reveal and turn up solely with some drawings if you haven\u2019t led them to expect that as a deliverable.<\/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\">Take little parts from each of my tips above and start introducing them slowly. See where sketching helps you think differently, or collaborate in a different way. If you\u2019re uncomfortable putting them in front of clients straight away then you can use them personally or with your internal teams first. Gradually you\u2019ll find your own niche where you can operate you can then work to widen this \u2014 just as I have.<\/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\">Remember:<\/strong> there are no hard and fast rules, do what works best for\u00a0you.<\/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 article was originally published on <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/uxplanet.org\/pens-process-product-sketching-for-ux-1b4992c47565\">Chris' Medium page<\/a>. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>I\u2019m passionate about sketching because I\u2019ve seen immeasurable benefits from it. Whether that\u2019s professionally through the development of my communication, problem solving, storytelling and design skills, or personally in terms of relaxation, improved creativity, greater awareness of the world around me, as well as increased empathy towards the real people who use digital products and services. All of which are&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/marvelapp.com\/blog\/pens-process-product%e2%80%8a-%e2%80%8asketching-ux\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":196,"featured_media":13951,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-13922","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-resources"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v15.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/marvelapp.com\/blog\/pens-process-product\u200a-\u200asketching-ux\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Pens, Process, Product\u200a\u2014\u200aSketching for UX | Marvel Blog\" \/>\n<meta property=\"og:description\" content=\"I\u2019m passionate about sketching because I\u2019ve seen immeasurable benefits from it. Whether that\u2019s professionally through the development of my communication, problem solving, storytelling and design skills, or personally in terms of relaxation, improved creativity, greater awareness of the world around me, as well as increased empathy towards the real people who use digital products and services. All of which are... Read More &#65515;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/marvelapp.com\/blog\/pens-process-product\u200a-\u200asketching-ux\/\" \/>\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=\"2017-12-25T11:30:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-09-03T11:41:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/12\/sketch.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2016\" \/>\n\t<meta property=\"og:image:height\" content=\"1036\" \/>\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=\"14 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\",\"name\":\"Marvel\",\"url\":\"https:\/\/marvelapp.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:\/\/marvelapp.com\/blog\/#logo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/06\/Logo-Light.png\",\"width\":1605,\"height\":1130,\"caption\":\"Marvel\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"name\":\"Marvel Blog\",\"description\":\"Ideas and words on user experience, design, collaboration and more\",\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/marvelapp.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/pens-process-product%e2%80%8a-%e2%80%8asketching-ux\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/12\/sketch.png\",\"width\":2016,\"height\":1036},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/marvelapp.com\/blog\/pens-process-product%e2%80%8a-%e2%80%8asketching-ux\/#webpage\",\"url\":\"https:\/\/marvelapp.com\/blog\/pens-process-product%e2%80%8a-%e2%80%8asketching-ux\/\",\"name\":\"Pens, Process, Product\\u200a\\u2014\\u200aSketching for UX | Marvel Blog\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/pens-process-product%e2%80%8a-%e2%80%8asketching-ux\/#primaryimage\"},\"datePublished\":\"2017-12-25T11:30:30+00:00\",\"dateModified\":\"2020-09-03T11:41:34+00:00\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/marvelapp.com\/blog\/pens-process-product%e2%80%8a-%e2%80%8asketching-ux\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/marvelapp.com\/blog\/pens-process-product%e2%80%8a-%e2%80%8asketching-ux\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/pens-process-product%e2%80%8a-%e2%80%8asketching-ux\/#webpage\"},\"author\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/6854aa556de895e6cdca99f7189ca110\"},\"headline\":\"Pens, Process, Product\\u200a\\u2014\\u200aSketching for UX\",\"datePublished\":\"2017-12-25T11:30:30+00:00\",\"dateModified\":\"2020-09-03T11:41:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/pens-process-product%e2%80%8a-%e2%80%8asketching-ux\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/pens-process-product%e2%80%8a-%e2%80%8asketching-ux\/#primaryimage\"},\"articleSection\":\"Resources\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/marvelapp.com\/blog\/pens-process-product%e2%80%8a-%e2%80%8asketching-ux\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/6854aa556de895e6cdca99f7189ca110\",\"name\":\"Chris Spalton\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/5b4f1943e11d0ccfd78e1bb92bbbd0b2f129ed44246a9e94ab7ccbc7e97bbc90?s=96&d=mm&r=g\",\"caption\":\"Chris Spalton\"},\"description\":\"Design consultant at @foolproof_ux. Underground music fan, and #Eelmanchronicles #comics creator.\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/13922","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/users\/196"}],"replies":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/comments?post=13922"}],"version-history":[{"count":0,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/13922\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media\/13951"}],"wp:attachment":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media?parent=13922"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/categories?post=13922"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/tags?post=13922"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}