{"id":5672,"date":"2017-01-27T10:40:57","date_gmt":"2017-01-27T10:40:57","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=5672"},"modified":"2020-12-14T11:20:20","modified_gmt":"2020-12-14T11:20:20","slug":"designing-complex-products","status":"publish","type":"post","link":"https:\/\/www.shopjessicabuckley.com\/blog\/designing-complex-products\/","title":{"rendered":"Designing Complex Products"},"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\"><em>After the overwhelmingly positive interest in my <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.shopjessicabuckley.com\/blog\/designing-data-driven-interfaces\/\">Designing Data-Driven Interfaces<\/a><br \/>\narticle, I decided to write about this related and equally important topic: managing complexity.<\/em><\/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 know that unsettling feeling when you\u2019re half way through a project and you\u2019re presenting design concepts? No major feedback, smiles across the table, heads nodding yes. Home run right? No, that feeling scares the shit out of me because you know there\u2019s complexity lurking below and it will surface before you\u2019re done solving the problem. If you don\u2019t overcome it can crush your productivity and even kill the product before it sees the light of day.<\/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\">\"Complexity in product design tends to rear its head in two ways; the complexity of managing people and opinions and the complexity of designing the product itself.\"<\/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\">Complexity in product design tends to rear its head in two ways <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">1) the complexity of managing people and opinions. And 2) the complexity of designing the product itself. <\/strong>It\u2019s not always intuitive how to keep your head above water in a sea of features, users and stakeholders. I\u2019ve certainly fallen on my face in the past, so I\u2019d like to share some insights I\u2019ve gleaned about tackling these big design projects.<\/p>\n<div id='gallery-1' class='gallery galleryid-5672 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/01\/Erik-2.png'><img loading=\"lazy\" decoding=\"async\" width=\"2000\" height=\"273\" src=\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/01\/Erik-2.png\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/01\/Erik-2.png 2000w, https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/01\/Erik-2-600x82.png 600w, https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/01\/Erik-2-768x105.png 768w, https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/01\/Erik-2-1500x205.png 1500w\" sizes=\"auto, (max-width: 2000px) 100vw, 2000px\" \/><\/a>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\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;\">Change the conversation<\/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\u2019ll start here, since this is an over-arching theme for managing any design project. As designers we too often inherit projects or requirements and accept them as-is. We try to do a good job with the little information we have then get frustrated later when pressured to change the design to address changing constraints.<\/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\">\"Part of why designing products is hard is because they represent high-stakes environments and there are a lot of opinions in the mix.\"<\/span><\/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\">\"It\u2019s our responsibility as designers to change the conversation.\"<\/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\">Part of why designing products is hard is because they represent high-stakes environments and there are a lot of opinions in the mix. Sadly, a design voice isn\u2019t always part of that mix. It\u2019s natural to blame the business, but the one you should blame is yourself.<\/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\">\"It\u2019s our responsibility as designers to change the conversation. We need to educate our clients, bosses and teams on how to be successful in a design 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\">This is <em>hard<\/em>: sometimes I feel like our design sermon falls on deaf ears. There\u2019s no silver bullet, but here are some techniques that help.<\/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\">\"Sometimes I feel like our design sermon falls on deaf ears.\"<\/p><\/span><\/blockquote>\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;\">Show them where they\u2019re going, before you take them there<\/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\">At the outset of a project I present stakeholders with a peek at our design process. I walk everyone through each major stage and show sample deliverables of what to expect. Then at various points in the project, I remind everyone where we are and where we\u2019re going next.<\/p>\n<div id='gallery-2' class='gallery galleryid-5672 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/01\/Erik-3.png'><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"282\" src=\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/01\/Erik-3.png\" class=\"attachment-full size-full\" alt=\"\" aria-describedby=\"gallery-2-5686\" srcset=\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/01\/Erik-3.png 1200w, https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/01\/Erik-3-600x141.png 600w, https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/01\/Erik-3-768x180.png 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-2-5686'>\n\t\t\t\tSample process and deliverables timeline.\n\t\t\t\t<\/dd><\/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\">In addition to explaining the process, I think it\u2019s important to explain what types of feedback I expect and when I expect it. Sometimes I even explain <em>how<\/em> and <em>why<\/em> feedback is essential. That way it\u2019s clear that <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">both sides have a responsibility to make the design successful.<\/strong><\/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;\">Talk to the boss<\/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\">Whenever we start a new design project I ask to meet with the \u201cboss\u201d. Usually it\u2019s the CEO, or most senior person I can get access to. I like to hear the vision and expected outcomes straight from the source.<\/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 take copious notes and try to capture the sentiment and \u201cvoice\u201d of what\u2019s being said. Then I <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">re-use the same language later when advocating for design decisions.<\/strong> This has served me well, because <em>nobody<\/em> wants to argue with the boss ????<\/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\">When things get confusing, and they often do, I try to re-align with what I heard in that original meeting. As design practitioners it\u2019s our job to translate the company vision into elegant solutions. There\u2019s nothing better than the voice of the leadership to help remind you of the bigger picture.<\/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\">\"As design practitioners it\u2019s our job to translate the company vision into elegant solutions.\"<\/p><\/span><\/blockquote>\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;\">Empathize!<\/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\">As a part of the discovery phase we typically gather executives and key stakeholders into a room to tell us about their customers. The goal is to get stakeholders to let their guards down, take a step back and think about the product from an empathetic perspective.<\/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\">\"The goal is to get stakeholders to let their guards down.\"<\/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\">We use a tactic called an <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/gamestorming.com\/core-games\/empathy-mapping\/\">empathy map<\/a> to facilitate the discussion. The premise is simple, ask your stakeholders what their customers are thinking, doing, saying, hearing and feeling then map it to a persona. We typically do this for 2\u20133 key personas scoped to a specific time or interaction in the product.<\/p>\n<div id='gallery-3' class='gallery galleryid-5672 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/01\/Erik-4.png'><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"288\" src=\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/01\/Erik-4.png\" class=\"attachment-full size-full\" alt=\"\" aria-describedby=\"gallery-3-5687\" srcset=\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/01\/Erik-4.png 1200w, https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/01\/Erik-4-600x144.png 600w, https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/01\/Erik-4-768x184.png 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-3-5687'>\n\t\t\t\tSmattering of empathy maps from office parks around the country.\n\t\t\t\t<\/dd><\/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\">After using this technique on a few projects we noticed consistent (and surprising) feedback\u2014 <em>\u201cThat was the first time we\u2019ve had all the executives in a room talking about our customers. It was really insightful.\u201d<\/em> So we started using this technique all the time, as you can see from the image above.<\/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\">It may seem hokey but it\u2019s a powerful way to tie tasks and insights to real users in the system. In many cases, stakeholders I\u2019ve worked with haven\u2019t participated in a rigorous design process before, so starting here was appropriate and helped establish a design authority in a benign way.<\/p>\n<div id='gallery-4' class='gallery galleryid-5672 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/01\/Erik-5.png'><img loading=\"lazy\" decoding=\"async\" width=\"2000\" height=\"273\" src=\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/01\/Erik-5.png\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/01\/Erik-5.png 2000w, https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/01\/Erik-5-600x82.png 600w, https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/01\/Erik-5-768x105.png 768w, https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/01\/Erik-5-1500x205.png 1500w\" sizes=\"auto, (max-width: 2000px) 100vw, 2000px\" \/><\/a>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\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;\">Understand frequency<\/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\">If you\u2019re working on overhauling an existing product, its not uncommon to find yourself cataloging an <em>insane<\/em> amount of features that need to be present in the redesign. One common thread I see in big software products is that they tend to be one-size-fits all solutions. In other words, they\u2019re monolithic products that do everything for everybody. If there was one hashtag for these products it would be #complex. Taking on a project like this can be daunting, and to be successful you need to understand <em>frequency of use<\/em>.<\/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\">\"They\u2019re monolithic products that do everything for everybody. If there was one hashtag for these products it would be #complex.\"<\/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\">Understanding how frequently a feature, screen, tab, or even an input box is used gives you a sense for priority. <\/strong>I find it extremely helpful for clients to comb through existing screens and circle elements they use everyday and cross out anything they never use or use infrequently. Sometimes we describe it as the 80\/20 activity (circle the things you use 80% of the time and cross out anything else).<\/p>\n<div id='gallery-5' class='gallery galleryid-5672 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/01\/Erik-6.jpeg'><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"291\" src=\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/01\/Erik-6.jpeg\" class=\"attachment-full size-full\" alt=\"\" aria-describedby=\"gallery-5-5689\" srcset=\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/01\/Erik-6.jpeg 1200w, https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/01\/Erik-6-600x146.jpeg 600w, https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/01\/Erik-6-768x186.jpeg 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-5-5689'>\n\t\t\t\tAsk clients to circle the frequently used, and cross out rarely touched items.\n\t\t\t\t<\/dd><\/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\">The figure above is an artifact from a project where we needed to extract the key elements for one specific persona. The goal is to understand what people are actually using then prioritize those features in the redesigned workflows.<\/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;\">Find the beginning and the end<\/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\">Most of the time a product is a means to an end. The need for the product usually comes from somewhere else, and the output goes somewhere else.<\/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\">\"It\u2019s easy to get wrapped up in the process of crafting pixel-perfect designs and overlook beginning and end.\"<\/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\">It\u2019s unlikely your users are looking at your product on a crisp retina screen, in a perfectly sized window without any other distractions. You should ask the questions \u201cWhere does this information come from?\u201d and \u201cWhere does it go next?\u201d.<\/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\">The answers to these questions are critical for understanding your app\u2019s context. <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The complexity of the ecosystem your product lives in can have a big impact on your designs.<\/strong> You may learn that your product lives on a desktop with 30 other windows open. Or that it\u2019s primarily used outside on a tablet or for some unintended purpose altogether.<\/p>\n<div id='gallery-6' class='gallery galleryid-5672 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/01\/Erik-7.jpeg'><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"299\" src=\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/01\/Erik-7.jpeg\" class=\"attachment-full size-full\" alt=\"\" aria-describedby=\"gallery-6-5690\" srcset=\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/01\/Erik-7.jpeg 1200w, https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/01\/Erik-7-600x150.jpeg 600w, https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/01\/Erik-7-768x191.jpeg 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-6-5690'>\n\t\t\t\tInterviews uncovered people using the product in wildly different ways.\n\t\t\t\t<\/dd><\/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\">The figure above highlights this concept in action. During an onsite interview we compared how people actually use the product with what we were told from stakeholders. To our surprise each of the participants used the product in a completely different 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\">Understanding how the user\u2019s focus and attention was shared between other products and tasks completely changed our redesign strategy.<\/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;\">Prioritize discoverability and learnability<\/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\">When you download a new app for your phone, it has very short window to onboard you and provide value or it\u2019s dead. That\u2019s a big reason to promote <em>discoverability<\/em>, because as a consumer you have a choice to use that product or 100 others like it.<\/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 stigma of discoverability tends to carry over into business-class software too. We\u2019ve heard critiques from clients saying they\u2019re worried users won\u2019t find a particular feature, so we should make it more prominent or give it more emphasis. If that happens enough times, you guessed it, things get messy and complex.<\/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\">\"Not every feature needs to blast you in the face to be usable, an interaction can be learned.\"<\/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\">This is where we often make the argument for <em>learnability<\/em>. Not every feature needs to blast you in the face to be usable, an interaction can be learned. Good interactions only need to be be learnt once.<\/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\">It\u2019s the nature of the beast, complex systems require the prioritization of features at the expense of visibility to others. It\u2019s our job to uncover the primary use cases and make them as intuitive as possible. Users should never have to \u201cdiscover\u201d frequently used items, nor should they be required to memorize documentation to use the product.<\/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;\">Cleanliness and Clarity<\/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\">One really big challenge in any business-class product is managing information density. Too much information on the page and it puts users in a mental straight jacket, too little and it starts making it cumbersome to reach meaningful insights. So how do you strike the right balance?<\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Cleanliness<\/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\">Sometimes you have a lot of information to cram into a small space, but it\u2019s not critical to have it all on-hand. In this case, we often suggest a progressive reveal strategy for decluttering the UI. <em>Progressive reveal<\/em> is based on the <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">principle that the user\u2019s interest drives information fidelity<\/strong>.<\/p>\n<div id='gallery-7' class='gallery galleryid-5672 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/01\/Erik-8.gif'><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"417\" src=\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/01\/Erik-8.gif\" class=\"attachment-full size-full\" alt=\"\" aria-describedby=\"gallery-7-5691\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-7-5691'>\n\t\t\t\tProgressive reveal\u200a\u2014\u200ashowing more information depth based on interest.\n\t\t\t\t<\/dd><\/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\">The figure above shows this idea in action. The information in the UI is structured so only the core elements are visible. Then more fidelity is introduced when the user wants it, and no sooner. The trade off, of course, is speed to insight, but you get the benefit of a cleaner, less cluttered UI.<\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Clarity<\/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\">On the other hand, some products demand a high-level of data visibility for the <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/@eportelance\/the-iceberg-of-jobs-to-be-done-5ad423fa84ff#.6axo39ru3\">job to be done<\/a>. Financial, healthcare, and e-commerce are industries known for having notoriously complex products.<\/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\">When data density is important, try to be meticulous about <em>clarity<\/em>. The way to make dense UIs clear is by being ultra consistent and crisp with the visual language.<\/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\">\"When data density is important, try to be meticulous about <em>clarity<\/em>.\"<\/p><\/span><\/blockquote>\n<div id='gallery-8' class='gallery galleryid-5672 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/01\/Erik-9.png'><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"944\" src=\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/01\/Erik-9.png\" class=\"attachment-full size-full\" alt=\"\" aria-describedby=\"gallery-8-5692\" srcset=\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/01\/Erik-9.png 1200w, https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/01\/Erik-9-600x472.png 600w, https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/01\/Erik-9-768x604.png 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-8-5692'>\n\t\t\t\tSystematic use of color, typography, and labeling help keep this UI clear and concise.\n\t\t\t\t<\/dd><\/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\">Dialing in that consistency means exercising extreme constraint with the following:<\/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>Type variations<\/li>\n<li>Button styles<\/li>\n<li>Simple navigation systems<\/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\">And being systematic about:<\/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>Color choices<\/li>\n<li>Labeling<\/li>\n<li>Even the <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/signalvnoise.com\/posts\/3633-on-writing-interfaces-well\">microcopy<\/a><\/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\">All this adds up to an elegant solution. This topic certainly warrants a bigger, more thoughtful writeup, so I\u2019ll leave it at that.<\/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;\">Animate Signature Interactions<\/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\">In the past we\u2019ve spent countless hours generating wireframes and tediously connecting them with an absurd amount of lines, boxes and arrows. What\u2019s worse, these deliverables tend to be hard for clients to understand and lead to bad assumptions and convoluted discussions.<\/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\">Time and time again we see faces light up when we present any kind of motion concepts. So we started creating basic motion treatments to demonstrate signature (read: hard to communicate), interactions.<\/p>\n<div id='gallery-9' class='gallery galleryid-5672 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/01\/Erik-10.gif'><img loading=\"lazy\" decoding=\"async\" width=\"676\" height=\"507\" src=\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/01\/Erik-10.gif\" class=\"attachment-full size-full\" alt=\"\" aria-describedby=\"gallery-9-5693\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-9-5693'>\n\t\t\t\tEarly navigation concept that would have been tough to communicate in static comps.\n\t\t\t\t<\/dd><\/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\">Even with basic grayscale wireframes, these animations zap the ambiguity from the conversation. It\u2019s not a replacement for full wireframes, but it\u2019s a great tool to cut through the complexity of getting people on the same page quickly.<\/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;\">Give \u2019em what they asked for, and something they didn\u2019t<\/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\">Henry Ford\u2019s most famous innovation adage captures it best\u200a\u2014\u200a<em>\u201cIf I had asked people what they wanted, they would have said faster horses.\u201d<\/em><\/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 usually ask for \u201cfaster horses\u201d, and probably have an idea of how it should look and work too. Believe it or not, this often leads to unnecessary complexity. We\u2019ve all been there, and like most designers, we get asked to do plenty of things we\u2019re not overly excited about. Nonetheless, it\u2019s important to do what\u2019s asked of you, but it\u2019s also important to do what\u2019s right.<\/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\">\"It\u2019s important to do what\u2019s asked of you, but it\u2019s also important to do what\u2019s right.\"<\/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\">It may be considered a bit taboo to present alternative concepts, especially when they are unsolicited. When we have ideas on how to improve or simplify, we try to create a polarizing view and get stakeholders thinking about the problem in a fresh way.<\/p>\n<div id='gallery-10' class='gallery galleryid-5672 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/01\/Erik-11.gif'><img loading=\"lazy\" decoding=\"async\" width=\"633\" height=\"356\" src=\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/01\/Erik-11.gif\" class=\"attachment-full size-full\" alt=\"\" aria-describedby=\"gallery-10-5694\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-10-5694'>\n\t\t\t\tBringing unexpected ideas to the table can spark fresh thinking.\n\t\t\t\t<\/dd><\/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\">The goal is to build trust with your client through thoughtful executions backed by reason and data. Our clients respect and generally embrace the fact that we\u2019re challenging assumptions and bringing thoughtful ideas to the table.<\/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;\">Final Thoughts<\/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\">The changes in devices, apps, and access to data has caused design to evolve in some pretty exciting ways. Less than two years ago the thought of designing for laptop, phone, and watch simultaneously was rare, now it\u2019s table stakes. The landscape of interactions is ever growing, and with that comes an even greater need to manage complexity.<\/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\">It\u2019s been a fun journey helping so many clients create great products over the years. If you\u2019re on a similar path I hope these thoughts provide some guidance on your next big design 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\">This piece was originally published on <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/blog.truthlabs.com\/@eklimcz\">Erik's Medium profile<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>After the overwhelmingly positive interest in my Designing Data-Driven Interfaces article, I decided to write about this related and equally important topic: managing complexity. You know that unsettling feeling when you\u2019re half way through a project and you\u2019re presenting design concepts? No major feedback, smiles across the table, heads nodding yes. Home run right? No, that feeling scares the shit&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/www.shopjessicabuckley.com\/blog\/designing-complex-products\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":81,"featured_media":5684,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-5672","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-viewpoint"],"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:\/\/www.shopjessicabuckley.com\/blog\/designing-complex-products\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Designing Complex Products | Marvel Blog\" \/>\n<meta property=\"og:description\" content=\"After the overwhelmingly positive interest in my Designing Data-Driven Interfaces article, I decided to write about this related and equally important topic: managing complexity. You know that unsettling feeling when you\u2019re half way through a project and you\u2019re presenting design concepts? No major feedback, smiles across the table, heads nodding yes. Home run right? No, that feeling scares the shit... Read More &#65515;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.shopjessicabuckley.com\/blog\/designing-complex-products\/\" \/>\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-01-27T10:40:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-12-14T11:20:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/01\/Erik-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"903\" \/>\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=\"9 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\/designing-complex-products\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/01\/Erik-1.png\",\"width\":1920,\"height\":903},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/designing-complex-products\/#webpage\",\"url\":\"https:\/\/www.shopjessicabuckley.com\/blog\/designing-complex-products\/\",\"name\":\"Designing Complex Products | Marvel Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/designing-complex-products\/#primaryimage\"},\"datePublished\":\"2017-01-27T10:40:57+00:00\",\"dateModified\":\"2020-12-14T11:20:20+00:00\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.shopjessicabuckley.com\/blog\/designing-complex-products\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/designing-complex-products\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/designing-complex-products\/#webpage\"},\"author\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#\/schema\/person\/17a32f9b93f672ad28c3fe6185e9fced\"},\"headline\":\"Designing Complex Products\",\"datePublished\":\"2017-01-27T10:40:57+00:00\",\"dateModified\":\"2020-12-14T11:20:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/designing-complex-products\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/designing-complex-products\/#primaryimage\"},\"articleSection\":\"Viewpoint\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.shopjessicabuckley.com\/blog\/designing-complex-products\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#\/schema\/person\/17a32f9b93f672ad28c3fe6185e9fced\",\"name\":\"Erik Klimczak\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0f45fc433bf7199c7b3870bbbf0b76c65eff75e5666ddbc40386f5047547de7d?s=96&d=mm&r=g\",\"caption\":\"Erik Klimczak\"},\"description\":\"Designing the future at Uber in San Francisco. Follow me on @eklimcz.\",\"sameAs\":[\"https:\/\/blog.truthlabs.com\/@eklimcz\"]}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/posts\/5672","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\/81"}],"replies":[{"embeddable":true,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/comments?post=5672"}],"version-history":[{"count":0,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/posts\/5672\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/media\/5684"}],"wp:attachment":[{"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/media?parent=5672"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/categories?post=5672"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/tags?post=5672"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}