{"id":1457,"date":"2023-06-29T10:00:00","date_gmt":"2023-06-29T10:00:00","guid":{"rendered":"https:\/\/vfflogs.com\/?p=1457"},"modified":"2023-07-23T03:46:28","modified_gmt":"2023-07-23T03:46:28","slug":"whats-the-perfect-design-process","status":"publish","type":"post","link":"https:\/\/vfflogs.com\/index.php\/2023\/06\/29\/whats-the-perfect-design-process\/","title":{"rendered":"What\u2019s The Perfect Design Process?"},"content":{"rendered":"<p>              <title>What\u2019s The Perfect Design Process?<\/title><\/p>\n<article>\n<header>\n<h1>What\u2019s The Perfect Design Process?<\/h1>\n<address>Vitaly Friedman<\/address>\n<p>                  2023-06-29T10:00:00+00:00<br \/>\n                  2023-07-23T03:34:38+00:00<br \/>\n                <\/header>\n<p><strong>Design process is messy.<\/strong> You might be following a structured approach, but with all the last-minute changes and overlooked details, too often, it takes a life of its own. And before you know it, you are designing in a chaotic environment full of refinements, final-final deliverables, and missed deadlines.<\/p>\n<p>.course-intro{&#8211;shadow-color:206deg 31% 60%;background-color:#eaf6ff;border:1px solid #ecf4ff;box-shadow:0 .5px .6px hsl(var(&#8211;shadow-color) \/ .36),0 1.7px 1.9px -.8px hsl(var(&#8211;shadow-color) \/ .36),0 4.2px 4.7px -1.7px hsl(var(&#8211;shadow-color) \/ .36),.1px 10.3px 11.6px -2.5px hsl(var(&#8211;shadow-color) \/ .36);border-radius:11px;padding:1.35rem 1.65rem}@media (prefers-color-scheme:dark){.course-intro{&#8211;shadow-color:199deg 63% 6%;border-color:var(&#8211;block-separator-color,#244654);background-color:var(&#8211;accent-box-color,#19313c)}}<\/p>\n<p class=\"course-intro\">This article is <strong>part of our ongoing series<\/strong> on <a href=\"\/category\/design-patterns\">design patterns<\/a>. It\u2019s an upcoming part of the video library on <a style=\"font-weight:700\" href=\"https:\/\/smart-interface-design-patterns.com\/\">Smart Interface Design Patterns<\/a>&nbsp;? and is a part of the <a href=\"https:\/\/smashingconf.com\/online-workshops\/workshops\/interface-design-course-vitaly-friedman\/\">live UX training<\/a> as well.<\/p>\n<h2 id=\"what-s-the-right-design-process\">What\u2019s The \u201cRight\u201d Design Process?<\/h2>\n<p>Of course, there is no \u201cright-and-only\u201d way to frame a design process. It\u2019s defined by whatever works well for you and for your team. Personally, I tend to rely on <strong>4 design models<\/strong> that seem to fit well with my design work:<\/p>\n<ul>\n<li><a href=\"https:\/\/medium.com\/digital-experience-design\/how-to-apply-a-design-thinking-hcd-ux-or-any-creative-process-from-scratch-b8786efbf812\">Double Diamond Process<\/a> for its comprehensive and reliable methodology for solving problems. In this guide, Dan Nessler breaks down the entire Double-Diamond process into single parts, explaining how exactly it works, step-by-step, in all fine details.<\/li>\n<\/ul>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/medium.com\/digital-experience-design\/how-to-apply-a-design-thinking-hcd-ux-or-any-creative-process-from-scratch-b8786efbf812\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"450\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/perfect-design-process\/01-double-diamond-process.png\" alt=\"How to apply a design thinking, HCD, UX or any creative process from scratch\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      The classic. The <a href=\"https:\/\/medium.com\/digital-experience-design\/how-to-apply-a-design-thinking-hcd-ux-or-any-creative-process-from-scratch-b8786efbf812\">Double-Diamond process revamped<\/a> for messy reality. A helpful guide by Dan Nessler. (<a href=\"https:\/\/files.smashing.media\/articles\/perfect-design-process\/01-double-diamond-process.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<ul>\n<li><a href=\"https:\/\/uxdesign.cc\/why-the-double-diamond-isnt-enough-adaa48a8aec1\">Triple Diamond Process<\/a> for its more realistic approach to the designer\u2019s input across the product\u2019s life cycle. That\u2019s a piece by <a href=\"https:\/\/www.linkedin.com\/in\/ACoAABoRt6sBLfH-Jr9p1e5aBm_DKhkGCascETw\">Adam Gray<\/a> on why bringing flexibility to the messy reality of the design process is critical to improving planning and involving design work as prototypes are being built.<\/li>\n<\/ul>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/uxdesign.cc\/why-the-double-diamond-isnt-enough-adaa48a8aec1\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"450\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/perfect-design-process\/02-triple-diamond-process.png\" alt=\"Why the double diamond isn\u2019t enough\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Extending Double Diamond with an extra Diamond to bring more focus into experimentation and refinement. From <a href=\"https:\/\/uxdesign.cc\/why-the-double-diamond-isnt-enough-adaa48a8aec1\">Triple Diamond Process<\/a>, a guide by Adam Gray. (<a href=\"https:\/\/files.smashing.media\/articles\/perfect-design-process\/02-triple-diamond-process.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<ul>\n<li><a href=\"https:\/\/www.ibm.com\/design\/thinking\/page\/framework\">Enterprise Design Thinking Model by IBM<\/a> for its focus on design maturity and scale, which really helps large organizations. A useful model that helps argue for user research, user-centricity, and rapid low-fidelity prototyping &mdash; and how to transfer ownership to design teams at scale.<\/li>\n<\/ul>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/www.ibm.com\/design\/thinking\/page\/framework\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"642\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/perfect-design-process\/03-IBM-design-thinking-process.png\" alt=\"The Framework Design thinking re-envisioned for the modern enterprise\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      A helpful model for complex projects and enterprise world: <a href=\"https:\/\/www.ibm.com\/design\/thinking\/page\/framework\">Enterprise Design Thinking Model by IBM<\/a>. (<a href=\"https:\/\/files.smashing.media\/articles\/perfect-design-process\/03-IBM-design-thinking-process.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<ul>\n<li><a href=\"https:\/\/danmall.com\/posts\/hot-potato-process\/\">Hot Potato process<\/a>, for its simplicity in bridging design and development across the <strong>entire product lifecycle<\/strong>. Designers and developers throw ideas, mock-ups, and prototypes to each other permanently. Sometimes there are more involved design phases than dev phases, but <a href=\"https:\/\/smart-interface-design-patterns.com\/articles\/design-handoff\/\">there is no hand-off<\/a>, and the entire process is driven by <strong>continuous collaboration<\/strong>.<\/li>\n<\/ul>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/danmall.com\/posts\/hot-potato-process\/\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"403\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/perfect-design-process\/04-hot-potato-process.png\" alt=\"The Hot Potato Process\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      A collaborative approach for designers and developers, focused on throwing ideas back and forth: the <a href=\"https:\/\/danmall.com\/posts\/hot-potato-process\/\">Hot Potato process<\/a> by Dan Mall. (<a href=\"https:\/\/files.smashing.media\/articles\/perfect-design-process\/04-hot-potato-process.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>These ways of thinking about the design process translated into a process that works well for me but has to be adjusted for every project that I\u2019m working on. In a nutshell, here\u2019s how it would work.<\/p>\n<div data-audience=\"non-subscriber\" data-remove=\"true\" class=\"feature-panel-container\"><span class=\"feature-panel__desc\">More after jump! Continue reading below&nbsp;&darr;<\/span><\/p>\n<aside class=\"feature-panel\">\n<div class=\"feature-panel-left-col\">\n<div class=\"feature-panel-description\">\n<p><strong>Boost your UX skills<\/strong> with <strong><a data-instant href=\"https:\/\/smart-interface-design-patterns.com\/\">Smart Interface Design Patterns<\/a><\/strong>, a 9h-video library by Vitaly Friedman. With <strong>100s of real-life examples<\/strong>, design guidelines and a friendly live UX training. <a href=\"https:\/\/www.youtube.com\/watch?v=aSP5oR9g-ss&amp;ab_channel=SmashingMagazine\">Check the free preview<\/a>.<\/p>\n<p><a data-instant href=\"https:\/\/smart-interface-design-patterns.com\/\" class=\"btn btn--green btn--large\">Jump to the UX video course&nbsp;\u21ac<\/a><\/div>\n<\/div>\n<div class=\"feature-panel-right-col\"><a data-instant href=\"https:\/\/smart-interface-design-patterns.com\/\" class=\"feature-panel-image-link\"><\/p>\n<div class=\"feature-panel-image\">\n<img loading=\"lazy\" class=\"feature-panel-image-img\" src=\"https:\/\/archive.smashing.media\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/8c98e7f9-8e62-4c43-b833-fc6bf9fea0a9\/video-course-smart-interface-design-patterns-vitaly-friedman.jpg\" alt=\"Feature Panel\" width=\"690\" height=\"790\" \/><\/p>\n<\/div>\n<p><\/a>\n<\/div>\n<\/aside>\n<\/div>\n<h2 id=\"a-process-that-works-for-me\">A Process That Works For Me<\/h2>\n<p>There is no such thing as enough user research. In every project, I start with <strong>involving users as early as possible<\/strong>. I explore all the data we have, interview customer support and the service desk, check for technical debt and design issues, backlog items, and dismissed ideas. I explore organizational charts to understand layers of management. I set the right expectations and seek allies.<\/p>\n<p>From there, I would typically spend weeks or even months in diagrams and spreadsheets and endless docs before drawing a single pixel on the screen. I try to get developers on board, so they can start setting up the dev environment already.<\/p>\n<p>I bring in stakeholders and people who have a vested interest in <strong>contributing to the success of the project<\/strong>. Voices that need to be heard but are often forgotten. I see my role as a person who needs to bridge the gap between business requirements and user needs through the lens of design.<\/p>\n<p><strong>Then I take a blank piece of paper and start sketching<\/strong>. I sketch ideas. I sketch customer journey maps. I sketch content boxes. I write down components that we will surely need in the product &mdash; the usual suspects. I set up a workshop with designers and developers to decide on names. Then developers can go ahead and prototype while designers focus on UI and interaction design.<\/p>\n<p>To make sure I get both sides of the equation right, I draft customer journey maps, brainstorm ideas and <a href=\"https:\/\/roadmunk.com\/product-prioritization-ebook\/\">prioritize them<\/a> with the <a href=\"https:\/\/foldingburritos.com\/blog\/kano-model\/#end-form\">Kano model<\/a> and <a href=\"https:\/\/miro.com\/templates\/impact-effort-matrix\/\">Impact \u00f7 Effort matrix<\/a> (with developers, PMs, and stakeholders).<\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/whimsical.com\/finviz-kpis-CTzucrgZkLUefK6Mekd38c\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"404\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/perfect-design-process\/05-design-KPI-tree.png\" alt=\"An example of a Design KPI tree\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      An <a href=\"https:\/\/whimsical.com\/finviz-kpis-CTzucrgZkLUefK6Mekd38c\">example of a Design KPI tree<\/a>, connecting business goals with design objectives. (<a href=\"https:\/\/files.smashing.media\/articles\/perfect-design-process\/05-design-KPI-tree.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>I don\u2019t want to waste time designing and building the wrong thing, so I establish <a href=\"https:\/\/www.linkedin.com\/pulse\/design-kpis-ux-metrics-vitaly-friedman\/\">design KPIs<\/a> and connect them with business goals using <a href=\"https:\/\/whimsical.com\/kpi-tree-2heCEgnYprowt9gUwMKfZ1\">KPI trees<\/a>. I get a sign-off on those, and then the interface design starts.<\/p>\n<p>I develop hypotheses. Low-fidelity mock-ups. Speak to developers. Get their feedback. Refine. Throw the mock-ups to developers. Bring them into HTML and CSS. Test hypotheses in usability sessions until we get to an 80% success rate for top tasks. Designers keep refining, and developers keep building out.<\/p>\n<p><strong>Establish a process to continuously measure the quality of design<\/strong>. Track task completion rates. Track task completion times. Track error rates. Track error recovery rates. Track accessibility. Track sustainability. Track performance. In a B2B setting, we track the time customers need to complete their tasks and try to minimize it.<\/p>\n<p><strong>Make them visible to the entire organization<\/strong> to show the value of design and its impact on business KPIs. Explain that the process isn\u2019t based on hunches. It\u2019s an evidence-driven design.<\/p>\n<p><strong>Establish ownership and governance<\/strong>. The search team must be measured by the quality of search results for the top 100 search queries over the last two months. People who publish content are owners of that content. It\u2019s their responsibility to keep it up-to-date, rewrite, archive, or delete it.<\/p>\n<p>Refine, refine, refine. Keep throwing new components and user journeys to developers. Stop. Test with users to check how we are doing. Keep going and refine in the browser. Continuously and rigorously test. Launch and keep refining. <strong>Measure the KPIs<\/strong> and report to the next iteration of the design.<\/p>\n<p>Admittedly, it is a bit messy. But it helps me stay on track when <strong>navigating a complex problem space<\/strong> in a way that delivers measurable results, removes bias and subjectivity from design decisions, and helps deliver user-centric designs that also address business needs.<\/p>\n<div class=\"sponsors__lead-place\"><\/div>\n<h2 id=\"wrapping-up\">Wrapping Up<\/h2>\n<p>Of course, there is no \u201cright-and-only\u201d way to frame a design process. It\u2019s defined by whatever works well for you and for your team. Explore options and keep them in mind when designing your design process. Whatever you choose, don\u2019t follow it rigidly just for the sake of it, and combine bits from all models to make it right for you.<\/p>\n<p>As long as it works well for you, it\u2019s right. And that\u2019s the only thing that matters.<\/p>\n<p>You can find more details on <strong>design patterns<\/strong> in the <a href=\"https:\/\/smart-interface-design-patterns.com\">video library on Smart Interface Design Patterns ?<\/a> &mdash; with a <a href=\"https:\/\/smart-interface-design-patterns.com\">live UX training<\/a> that\u2019s coming up in September this year.<\/p>\n<h3 id=\"further-reading-on-smashing-magazine\">Further Reading on Smashing Magazine<\/h3>\n<ul>\n<li>\u201c<a href=\"https:\/\/www.smashingmagazine.com\/2021\/04\/content-fundamental-part-web-design-process\/\">Why Content Is Such A Fundamental Part Of The Web Design Process<\/a>,\u201d Matt Saunders<\/li>\n<li>\u201c<a href=\"https:\/\/www.smashingmagazine.com\/2020\/02\/seo-web-design-process\/\">Where Does SEO Belong In Your Web Design Process?<\/a>,\u201d Suzanne Scacca<\/li>\n<li>\u201c<a href=\"https:\/\/www.smashingmagazine.com\/2023\/05\/impact-agile-methodologies-code-quality\/\">The Impact Of Agile Methodologies On Code Quality<\/a>,\u201d Sarah Oke Okolo<\/li>\n<li>\u201c<a href=\"https:\/\/www.smashingmagazine.com\/2023\/03\/pragmatists-guide-lean-user-research\/\">A Pragmatist\u2019s Guide To Lean User Research<\/a>,\u201d Paul Boag<\/li>\n<\/ul>\n<div class=\"signature\">\n  <img src=\"https:\/\/www.smashingmagazine.com\/images\/logo\/logo--red.png\" alt=\"Smashing Editorial\" width=\"35\" height=\"46\" loading=\"lazy\" \/><br \/>\n  <span>(yk, il)<\/span>\n<\/div>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>What\u2019s The Perfect Design Process? What\u2019s The Perfect Design Process? Vitaly Friedman 2023-06-29T10:00:00+00:00 2023-07-23T03:34:38+00:00 Design process is messy. ...<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[8],"tags":[],"_links":{"self":[{"href":"https:\/\/vfflogs.com\/index.php\/wp-json\/wp\/v2\/posts\/1457"}],"collection":[{"href":"https:\/\/vfflogs.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vfflogs.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vfflogs.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vfflogs.com\/index.php\/wp-json\/wp\/v2\/comments?post=1457"}],"version-history":[{"count":1,"href":"https:\/\/vfflogs.com\/index.php\/wp-json\/wp\/v2\/posts\/1457\/revisions"}],"predecessor-version":[{"id":1459,"href":"https:\/\/vfflogs.com\/index.php\/wp-json\/wp\/v2\/posts\/1457\/revisions\/1459"}],"wp:attachment":[{"href":"https:\/\/vfflogs.com\/index.php\/wp-json\/wp\/v2\/media?parent=1457"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vfflogs.com\/index.php\/wp-json\/wp\/v2\/categories?post=1457"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vfflogs.com\/index.php\/wp-json\/wp\/v2\/tags?post=1457"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}