{"id":14607,"date":"2018-03-22T11:49:36","date_gmt":"2018-03-22T11:49:36","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=14607"},"modified":"2020-09-03T15:18:01","modified_gmt":"2020-09-03T14:18:01","slug":"great-product-teams-ship-broken-ux-4-steps-mind-gap","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/great-product-teams-ship-broken-ux-4-steps-mind-gap\/","title":{"rendered":"When Great Product Teams Ship Broken UX: 4 Steps to Mind the\u00a0Gap"},"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\"id=\"9c99\" class=\"graf graf--p graf-after--figure\">Why do well-funded companies with ample resources often ship broken user experiences? No one is immune. Even design darlings do it sometimes. As users discover a company\u2019s product, read about it, sign up or install, then use it, they may traverse the output of many different teams. Broken handoffs are common. We all have war stories. A few highly-trafficked sites and apps, with many eyeballs on them, work smoothly. Meanwhile the long tail of apps and sites gradually sap us of our patience and sanity.<\/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\"id=\"e8cd\" class=\"graf graf--p graf-after--p graf--trailing\">I want to show how you can employ Jobs To Be Done, User Journey Mapping, a grading scale, a summary dashboard, and targeted pitches to senior leaders, to radically refocus even a large organization around user experience. This method is repeatable and will work anywhere. I\u2019ll also give you a template to get started.<\/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 I started on IBM Cloud in 2014, I sent talented user researchers like <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/@hellohutch\">Daniel Hutcherson<\/a> (\u201cHutch\u201d) into the field to observe developers and system admins at work. We did a lot of ethnographic research and produced a variety of artefacts. One of the most enlightening was the user journey map, where we depict the user\u2019s steps toward a goal on a sequential timeline.<\/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;\">????, ????, or ????<\/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\">There are many variations of experience maps beautifully illustrated and explained in <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.safaribooksonline.com\/library\/view\/mapping-experiences\/9781491923528\/\">Mapping Experiences<\/a> by <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/@JimKalbach\">Jim Kalbach<\/a>. We purposely kept our user journey maps very simple, so people wouldn\u2019t overanalyze the high and low points. We used a linear graph and a 3-point scale summarizing the user\u2019s mood at each step: neutral, delight, or negative.<\/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\">Here is an example of an early artifact:<\/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\/2018\/03\/1XkR8px3SjUrLqOutHZZbUw.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/03\/1XkR8px3SjUrLqOutHZZbUw.png\" 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\">Anyone can make a basic user journey map in a few minutes, IF you know what to map and can accurately depict how the user is experiencing 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\">The very first draft of a user journey map is typically a strawman. How do we know this is the user\u2019s real goal? How do we know these are the real steps most users take? How do we know our assessment of each step is correct? We continued to refine them, strengthening them with more supporting evidence.<\/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\">In time, we began to produce user journey maps that were comprehensive in their findings and recommendations, yet immediately insightful at a glance. I knew we were on to something when we presented the user journey map below to our most senior executives, and watched them sit up, lean forward, and begin asking questions.<\/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\/2018\/03\/1ZIiGU6NaXW6euCFpghJ2aQ.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/03\/1ZIiGU6NaXW6euCFpghJ2aQ.png\" 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\">Users embark on a journey to complete a goal. Our aim is to understand the goal and the steps required to reach it, then eliminate moments of frustration and add at least a few moments of\u00a0delight.<\/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 with the right user goal, the right set of steps, and a straightforward visualization, some readers may be justifiably skeptical of the findings or dismissive of their urgency and importance. So I directed the team to build a bibliography for each step of our key user journeys. I wanted a skeptical reviewer to be able to drill down and become convinced of the findings depicted in the map even if they did not initially agree.<\/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\">While <em>drill down<\/em> is valuable, the real breakthroughs started to happen when we began to <em>roll up<\/em> our findings into a summary view.<\/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;\">Mind the gap between\u00a0teams<\/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 we started mapping experiences that cut across different teams and business divisions, we revealed a lot of blind spots. We found that broken moments in the user journey often occurred when the user flow was switching between two organizations. Moving from a marketing page to a product page. Transferring the user to a signup screen \u2014 owned by a different organization! \u2014 and then getting them safely back to the product they cared about. Navigating between different products to connect them in a workflow.<\/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\">User journey maps \u2014 like actual users \u2014 ignore the boundaries between organizations. Users just want things to work. And those parts of a user flow that hand off between organizations sometimes place the responsibility on the user to mind the gap.<\/p>\n<div id=\"attachment_6580\" style=\"width: 3510px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/03\/18DdCCKAEFElZIhiQR0qH8Q.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\/2018\/03\/18DdCCKAEFElZIhiQR0qH8Q.jpeg\" alt=\"\" width=\"3500\" height=\"2334\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">Photo by <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/pixabay.com\/en\/artwork-colorful-art-flowers-vase-142877\/\">Brigitte\u00a0Werner<\/a><\/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\">Okay, so we found lots of broken experiences in the seams of the org chart. The knee jerk reaction to this is to \u201ccombine those two teams,\u201d or \u201cget everyone talking to everyone else!\u201d But with thousands of people in a large organization, that recipe simply doesn\u2019t scale. We needed a way to make people aware of the full picture, and tuned in to neighboring puzzle pieces, while keeping them focused on their piece.<\/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\">We needed radical candor without radical chatter.<\/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;\">Radical organizational candor<\/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 face of competing priorities, how do you mobilize an organization to focus on and fix a long list of small user experience 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\">I began an internal public relations campaign to convince people up and down the org chart of the opportunity. I wanted to ensure everyone knew our users\u2019 top goals and where they stumble when trying to achieve those goals. Then, I rolled those up into a set of investment opportunities and pitched them to senior leaders as potential initiatives. My goal was to institutionalize radical candor, by publicizing problems and packaging them up as opportunities.<\/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\">Here are the steps I took:<\/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>Identify our Top 10 Jobs To Be Done.<\/li>\n<li>Map user journeys against each of those top 10 jobs, using a standard template, and apply a letter grade (A-F).<\/li>\n<li>Summarize the user journey maps in a dashboard, displaying the letter grade alongside each one.<\/li>\n<li>Share the dashboard broadly and get leaders to commit investment to one or two of the top user journeys.<\/li>\n<\/ol>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Let\u2019s go through each of these steps.<\/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;\">1. Identify the Jobs To Be\u00a0Done<\/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\">To begin, I compiled a Top 10 List of our jobs to be done. The <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/hbswk.hbs.edu\/item\/clay-christensen-the-theory-of-jobs-to-be-done\">Theory of Jobs To Be Done<\/a>, popularized by <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/twitter.com\/claychristensen\">Clayton Christensen<\/a>, basically says that customers encounter situational needs and in response they \u201chire\u201d a product to do a \u201cjob\u201d for them. Demographics and branding are secondary to the customer\u2019s core motive, which is to get a specific job done, and use whichever product best meets that need.<\/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\">So I asked, what job does the user want to accomplish with our platform, and which products on the platform will they hire in order to achieve it? I compiled data from our sales teams, product management, developer advocates, competitive analysis, and user research.<\/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 set an arbitrary limit of 10 to keep us focused on the most important ones. For a simpler product, you might go with two or three. Don\u2019t start with a list of 50 jobs to be done. It will impress everyone \u2014 and exhaust them. Focus for greater momentum.<\/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. Map and grade each user\u00a0journey<\/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\">After I identified the jobs to be done, <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/@garrisondesigns\">Christopher Garrison<\/a> led an effort to map an end-to-end user journey for each job to be done. <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/@austinauth\">Austin Auth<\/a> created a Keynote template that we used as a toolkit. Grab it and use 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\"><iframe loading=\"lazy\" class=\"display-block marginTopBottom-l centered\" scrolling=\"no\" frameborder=\"0\" id=\"player\" height=\"600\" width=\"800\" src=\"https:\/\/www.icloud.com\/keynote\/0Nja2nSjEcd5E8BClc6QMaBgA?embed=true\" allowfullscreen=\"true\"><\/iframe><\/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\">Each user journey map begins with a brief summary of the user goal, a grade, and the number of pain points. Then it proceeds through a sequence of screenshots, with a timeline along the bottom and analysis on the righthand side:<\/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\/2018\/03\/1GJHawCoJsz6HTsLAxyzRFg.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/03\/1GJHawCoJsz6HTsLAxyzRFg.png\" 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\">Duplicate this slide once for each step in your journey. Then add your screenshot and observations to each slide in sequence. <em>Pro Tip: Record the whole journey at once using Quicktime Player (File -&gt; New Screencast Recording), then take your screenshots from that recording.<\/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\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Setting up the line chart<\/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\">We keep the line chart on the master slide, so you can set it up once and see it on every step. To edit it, click the slide thumbnail; then in the Slide Layout panel, click Edit Master Slide. On the master slide, click the chart and choose Edit Chart Data:<\/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\/2018\/03\/1Zv17lFD2RpHeJHkewjfPLg.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/03\/1Zv17lFD2RpHeJHkewjfPLg.png\" 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\">Add or delete columns until you have one for each step in your journey.<\/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\/2018\/03\/1GVzucQivEDlY3Ax8fXNbiA.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/03\/1GVzucQivEDlY3Ax8fXNbiA.png\" 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\">Edit the numbers at each step to reflect the user\u2019s sentiment: 0 is Negative, 1 is Neutral, 2 is Positive. Once completed, the line chart will reflect the user\u2019s ups and downs.<\/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\/2018\/03\/1Qww8y1jXvsIe-aCKMH-zEA.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/03\/1Qww8y1jXvsIe-aCKMH-zEA.png\" 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\">On each step slide, move the highlight to the point corresponding to the current slide. It acts as a cursor, showing the observer where the current step occurs within the user journey.<\/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\">Grading for Radical Candor<\/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\">Once mapping is complete, review the pain points and apply a grade on the title slide. I chose a straightforward A-F grading scale because it\u2019s coarse-grained, limiting subjectivity, but also visceral. If the experience is so painful the user is unlikely to finish, we get an F. If the user could finish but with major pain, we score a D, and minor pain is a C. If the user encountered no pain, we get a B. If things were pain free with at least one moment of delight, then we get an A. While there is some subjectivity between a C and a D grade, neither is a destination we want to stay at forever.<\/p>\n<div id=\"attachment_6580\" style=\"width: 1068px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/03\/1StB2rwjeOCSV-xNvxQjWVg.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/03\/1StB2rwjeOCSV-xNvxQjWVg.png\" alt=\"\" width=\"1058\" height=\"466\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">The grade guide from our supersecret internal dashboard. Thanks <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/@brianhan\">Brian\u00a0Han<\/a>.<\/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\">Letter grades will almost certainly cause backlash at first. They certainly did for us. No one wants a bad grade. Everyone wants to give themselves an A, especially in front of their boss. Our grading system made the user the boss. Although we may be blind to it, sometimes in the user\u2019s point of view, that fragmented experience scores a D or an F. People take this about the same as a punch to the stomach.<\/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\">Try to avoid blame and focus on the opportunity. Radical candor creates opportunity because once everyone is being honest about the real problems, we can actually make the investments necessary to fix them.<\/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. Summarize the user journey grades in a dashboard.<\/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\">We created a dashboard at an internal URL, so anyone in the company could see the latest progress. This made it really easy to bring it up in any meeting, even without advance preparation.<\/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 dashboard is a simple list of user journeys, for each of our top 10 jobs to be done plus a few others, with an assigned owner and a grade listed next to each one. Users can click on the title to see the full slide deck with all the detailed analysis.<\/p>\n<div id=\"attachment_6580\" style=\"width: 2172px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/03\/1hlXFMYZFxJtF16DKq8fRzA.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/03\/1hlXFMYZFxJtF16DKq8fRzA.png\" alt=\"\" width=\"2162\" height=\"400\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">Things get real when you have an F next to your name. (Psst! Users already\u00a0know.)<\/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\">The dashboard does not need a thousand features. It just needs to be findable and show transparent grading based on current data. We used my team\u2019s own <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/carbondesignsystem.com\/\">Carbon Design System<\/a> to create our dashboard, but a wiki page is fine too, as long as people look at it. The goal is to succinctly clarify for leaders which experiences are hurting most for investment.<\/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. Share the dashboard with leadership and propose where to drive investment.<\/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\">User experience is about details, but executives don\u2019t like investing in nebulous initiatives such as fixing \u201ca thousand small cuts.\u201d They need you to batch it up into a larger initiative that they can support. So you show them a dashboard with 10 jobs to be done, several of which have poor letter grades due to numerous small pain points individually too small to mention. What they see is a high-level list of 10 potential initiatives, each of which could make a major difference in user experience and therefore revenue.<\/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\">Don\u2019t be rattled if the first reaction is to attack you. When I first shopped my list of user journeys and their less-than-flattering grades up the chain, I heard, \u201cIsn\u2019t the UX your responsibility? Why haven\u2019t you fixed this?\u201d That is to be expected. Without placing blame on anyone else, I discussed the need for increased investment \u2014 even if it stops some other big initiative \u2014 and the need to carefully coordinate across teams to reduce seams.<\/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\">We also estimated the revenue increase we could obtain by improving specific user journeys. We proposed that we could increase funnel conversion by 10% in two specific journeys, and we projected a corresponding revenue increase. The ask was essentially: invest in this initiative and we promise it will pay off big.<\/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 you can translate design language into financial language, business leaders listen. Both proposals received a green light.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">(For more on translating design speak into financial speak, see <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/ux-immersion-interactions\/a-proven-method-for-showing-the-value-of-good-ux-c25ae0c86fb4\">A Proven Method For Showing the Value of Good UX<\/a>, by <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/@jmspool\">Jared M. Spool<\/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\">Now all we had to do was be right. Fortunately, we have seen far better than the 10% conversion improvement we initially forecast. Funnel conversion improved by orders of magnitude in both user journeys.<\/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 you can identify broken user experiences, improve them, then quantify the impact, you\u2019ll have your \u201cseat at the table\u201d whether you want it or not!<\/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\"><em>This article was originally published on <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/uxdesign.cc\/when-great-product-teams-ship-broken-ux-4-steps-to-mind-the-gap-bfdf6f150f8b\">Jeoff's Medium page<\/a>.\u00a0<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Why do well-funded companies with ample resources often ship broken user experiences? No one is immune. Even design darlings do it sometimes. As users discover a company\u2019s product, read about it, sign up or install, then use it, they may traverse the output of many different teams. Broken handoffs are common. We all have war stories. A few highly-trafficked sites&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/marvelapp.com\/blog\/great-product-teams-ship-broken-ux-4-steps-mind-gap\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":215,"featured_media":14622,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[500],"tags":[],"class_list":["post-14607","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-process"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v15.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/marvelapp.com\/blog\/great-product-teams-ship-broken-ux-4-steps-mind-gap\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"When Great Product Teams Ship Broken UX: 4 Steps to Mind the\u00a0Gap | Marvel Blog\" \/>\n<meta property=\"og:description\" content=\"Why do well-funded companies with ample resources often ship broken user experiences? No one is immune. Even design darlings do it sometimes. As users discover a company\u2019s product, read about it, sign up or install, then use it, they may traverse the output of many different teams. Broken handoffs are common. We all have war stories. A few highly-trafficked sites... Read More &#65515;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/marvelapp.com\/blog\/great-product-teams-ship-broken-ux-4-steps-mind-gap\/\" \/>\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=\"2018-03-22T11:49:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-09-03T14:18:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/03\/mqefojq.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1556\" \/>\n\t<meta property=\"og:image:height\" content=\"785\" \/>\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:\/\/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\/great-product-teams-ship-broken-ux-4-steps-mind-gap\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/03\/mqefojq.png\",\"width\":1556,\"height\":785},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/marvelapp.com\/blog\/great-product-teams-ship-broken-ux-4-steps-mind-gap\/#webpage\",\"url\":\"https:\/\/marvelapp.com\/blog\/great-product-teams-ship-broken-ux-4-steps-mind-gap\/\",\"name\":\"When Great Product Teams Ship Broken UX: 4 Steps to Mind the\\u00a0Gap | Marvel Blog\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/great-product-teams-ship-broken-ux-4-steps-mind-gap\/#primaryimage\"},\"datePublished\":\"2018-03-22T11:49:36+00:00\",\"dateModified\":\"2020-09-03T14:18:01+00:00\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/marvelapp.com\/blog\/great-product-teams-ship-broken-ux-4-steps-mind-gap\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/marvelapp.com\/blog\/great-product-teams-ship-broken-ux-4-steps-mind-gap\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/great-product-teams-ship-broken-ux-4-steps-mind-gap\/#webpage\"},\"author\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/14925300a50fc6ad513c91febcca1467\"},\"headline\":\"When Great Product Teams Ship Broken UX: 4 Steps to Mind the\\u00a0Gap\",\"datePublished\":\"2018-03-22T11:49:36+00:00\",\"dateModified\":\"2020-09-03T14:18:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/great-product-teams-ship-broken-ux-4-steps-mind-gap\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/great-product-teams-ship-broken-ux-4-steps-mind-gap\/#primaryimage\"},\"articleSection\":\"Design Process\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/marvelapp.com\/blog\/great-product-teams-ship-broken-ux-4-steps-mind-gap\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/14925300a50fc6ad513c91febcca1467\",\"name\":\"Jeoff Wilks\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4b0b5d1194b6a7d1a7abc4e32b956e870bc21368ca165f1340410b09488982f6?s=96&d=mm&r=g\",\"caption\":\"Jeoff Wilks\"},\"description\":\"UX Design Leader @ IBM Cloud. Designer, systems thinker, software engineer. Always learning.\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/14607","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\/215"}],"replies":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/comments?post=14607"}],"version-history":[{"count":0,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/14607\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media\/14622"}],"wp:attachment":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media?parent=14607"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/categories?post=14607"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/tags?post=14607"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}