{"componentChunkName":"component---src-templates-post-js","path":"/blog/evolving-the-ux-and-ui-of-an-existing-onboarding-journey/","result":{"data":{"mdx":{"id":"bb18862a-4570-5b28-845b-c9b9e9111adb","body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"path\": \"/blog/evolving-the-ux-and-ui-of-an-existing-onboarding-journey\",\n  \"date\": \"2020-09-05T00:00:00.000Z\",\n  \"title\": \"Evolving the UX & UI of an existing onboarding journey\",\n  \"excerpt\": \"A case study in overhauling a key user journey.\",\n  \"published\": true,\n  \"type\": \"blog\",\n  \"image\": \"./hero.png\",\n  \"author\": \"Kingsley\"\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"The most important aspect of experience design, regardless of whether you\\u2019re in the lucky position of being involved in a clean slate, greenfield design or in the more usual brownfield situation, is the understanding of:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"the users,\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"their goals, skills, tasks and pain points, and\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"their context of use (environment, location, device(s), etc.).\")), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"590px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/88179f6176249675701455c99aae2d02/10ab7/image1.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"103.37837837837837%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,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')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"image1\",\n    \"title\": \"image1\",\n    \"src\": \"/static/88179f6176249675701455c99aae2d02/fcda8/image1.png\",\n    \"srcSet\": [\"/static/88179f6176249675701455c99aae2d02/12f09/image1.png 148w\", \"/static/88179f6176249675701455c99aae2d02/e4a3f/image1.png 295w\", \"/static/88179f6176249675701455c99aae2d02/fcda8/image1.png 590w\", \"/static/88179f6176249675701455c99aae2d02/efc66/image1.png 885w\", \"/static/88179f6176249675701455c99aae2d02/c83ae/image1.png 1180w\", \"/static/88179f6176249675701455c99aae2d02/10ab7/image1.png 1552w\"],\n    \"sizes\": \"(max-width: 590px) 100vw, 590px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"h3\", null, \"The challenge\"), mdx(\"p\", null, \"We were tasked with making improvements to an existing onboarding journey for a financial services payments application. There were problems with the current journey and it was generating calls to Customer Support. It was long, users were having trouble understanding some of the steps and calling support, and a number of users were failing to complete the registration and onboarding process altogether.\"), mdx(\"h3\", null, \"The UX \\u2018design thinking\\u2019 process\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"590px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/4d70f404ff23ce14a14f4e68ebc52fb8/29007/image2.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"46.621621621621614%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAAsTAAALEwEAmpwYAAABqElEQVQoz32SS2/TUBCF86v5E6zYsEBCVZEQdMGrEhGCBRKIBbQgtSKPxrGbEKd2HKdJfG3f69d8yE6TEJA40ui+zozOnLktAGMM9sTlavQL1/frK1RWMFUpW1RSbdZsSqXtZh+pmMC3CDyLKIoQEVqARFEk4/FYRqORzG6m8jNYStvx5YsbytvhjaxKkZqXBSeSeQ8lnx1L5j2SqTuR4dCRwcAS13Wlqipp1VWl4W+QFkLbDijvFHk6Y/htgB4/pli9YMvMF6+R6MPdaZ/fKsuSJElQSpGnhuvljFPn/ID38vwVH5/cgzTfJZZrB20/xZSwWi4a25qC/APhqPeGs1mXdaZ4dvWOtv8Dbm9Zf75PHvYpY5/46wOKhX2YWXu4bVeZBE/NG1Vxrjm9/sSJ9Z7vYR8qMEpTKg/TeU5ycUwx71KUBXrlYtYeuYn3CsMwpNvv0el1GFgWRZbvWo6XEbbj0L28ZDL1WcVmpyicB/R7nSaCYLYvWBQFaZpitEFrTVVVjfxaQZwkjT/aGNI0aUKkamL75bQ2bOfa+nPCf/vxP2zeDzm1kN9XUq3ZJKvbrgAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"image2\",\n    \"title\": \"image2\",\n    \"src\": \"/static/4d70f404ff23ce14a14f4e68ebc52fb8/fcda8/image2.png\",\n    \"srcSet\": [\"/static/4d70f404ff23ce14a14f4e68ebc52fb8/12f09/image2.png 148w\", \"/static/4d70f404ff23ce14a14f4e68ebc52fb8/e4a3f/image2.png 295w\", \"/static/4d70f404ff23ce14a14f4e68ebc52fb8/fcda8/image2.png 590w\", \"/static/4d70f404ff23ce14a14f4e68ebc52fb8/efc66/image2.png 885w\", \"/static/4d70f404ff23ce14a14f4e68ebc52fb8/c83ae/image2.png 1180w\", \"/static/4d70f404ff23ce14a14f4e68ebc52fb8/29007/image2.png 1600w\"],\n    \"sizes\": \"(max-width: 590px) 100vw, 590px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, \"A fundamental part of the UX design process is to explore and dig into the users\\u2019 problem or problems, before finding and testing solutions. So the very important first step of the design process is to undertake the necessary research to gain understanding of the problem space in order to empathise with the users of the application and understand their tasks and goals.\"), mdx(\"h3\", null, \"The approach\"), mdx(\"p\", null, \"As there were no integrated analytics in the existing application, as well as examining relevant Helpdesk tickets we gathered direct feedback from the Customer Support team to gain further insight into which steps the users were finding difficult and what those difficulties were.\"), mdx(\"h4\", null, \"Empathise: understand the problem\"), mdx(\"p\", null, \"Working closely with the product owner and using the user personas we had developed, we reviewed the current process, laying it out and walking through each of the screens and steps a new customer has to complete from start to finish. We examined each screen and every step in light of legislative requirements and onboarding UX best practices. Cross-referencing with helpdesk tickets, feedback from Customer Support, the product team and other internal stakeholders, we highlighted pain points, identified issues and flagged potential areas for improvement. To focus on the users\\u2019 interaction flow, we removed the visual design and created a flow chart, documenting issues as we went along.\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"590px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/e8baeff89b5c563f9ef8f818c8ae2f6a/29007/image3.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"68.91891891891892%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAIAAACgpqunAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB/0lEQVQoz42Ry2obQRBF9fWB7LLMF2QZr4PBGMcmxMbgRwKxZb0sjWRN98x0T7+7qrqCNEYh4EDuohfFPVW3q0bOubZtvXM8CJERGIEgeWucMcl7hsyYS04lxZIieVcAmHmklJpMnoRsjZp09QWTeW0CoJXSXROcKQje2RxjIULEAnnwjABASGFd6NWDEl+ZNMVYcmJmn+Di53bZAiJM5/PVeq20TsEXolfYWts0TQxBNddKHFOumBh1W3RjtTm5qWZ1KATPs+lqMZeiDvY12g7ebrfL5dKHZPuxbs5ikLLp8m4yWReOr59/VYYLBVnHpobgIacMO5VSRiklay0ARb/2/Y1z7Wy2MNYys414ci8mL/7ysfl0Xh1dd1KH7ct6vdlorRFxxMylFGbu1YNpz4OvNy817FeSsTxUvdTxsdInt5urqdO9b6TolAohENGo5EzBMZLRYy1PCxnvIyIy87pxy9pUXQ4JGVLJgSEjEQIMhj3sLSM5s+i771zCIcvni8WHo7uPX+bPInC00MrhCn8Wtn93VqPGSpxxsYfKbGPup/pmrKTyGTIh8N/aw/s53i5Nd5Wz6To9/BnJaXO3rb/VYiGExDfhIaTt5317iWDbVqUUd1nc6vLHu9vxe59WB9s/YD1R4pSLO8QuhULU1raIu6u+DQ/KKfVaDdh/6jcGRiG/R3LzKgAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"image3\",\n    \"title\": \"image3\",\n    \"src\": \"/static/e8baeff89b5c563f9ef8f818c8ae2f6a/fcda8/image3.png\",\n    \"srcSet\": [\"/static/e8baeff89b5c563f9ef8f818c8ae2f6a/12f09/image3.png 148w\", \"/static/e8baeff89b5c563f9ef8f818c8ae2f6a/e4a3f/image3.png 295w\", \"/static/e8baeff89b5c563f9ef8f818c8ae2f6a/fcda8/image3.png 590w\", \"/static/e8baeff89b5c563f9ef8f818c8ae2f6a/efc66/image3.png 885w\", \"/static/e8baeff89b5c563f9ef8f818c8ae2f6a/c83ae/image3.png 1180w\", \"/static/e8baeff89b5c563f9ef8f818c8ae2f6a/29007/image3.png 1600w\"],\n    \"sizes\": \"(max-width: 590px) 100vw, 590px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"h4\", null, \"Define: what is important\"), mdx(\"p\", null, \"Whilst onboarding new customers quickly and efficiently is important for all applications, for any financial services application it is also important to make sure that \\u2018bad actors\\u2019, such as dishonest or prohibited people, are prevented from completing the onboarding process. The onboarding process for any financial services product also has to meet a number of regulatory requirements; security is an important consideration and it should have a robust means to identify an individual user.\"), mdx(\"p\", null, \"So we needed to be able to verify the identity of an individual user and be confident that they were who they said they were, without slowing that user down or adding too much friction to their onboarding journey. We wanted to give them a smooth and safe experience, whilst still meeting all necessary legal requirements.\"), mdx(\"h4\", null, \"Ideate: how do we solve it\"), mdx(\"p\", null, \"Having identified a number of issues with the current flow, such as: intimidating language, too many steps, order of steps and sub-optimal design for mobile devices we identified a number of actions that we could take.\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"590px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/f8771f3d2311991e1128c72dded81fad/29007/image4.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"72.97297297297297%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAIAAABr+ngCAAAACXBIWXMAAAsTAAALEwEAmpwYAAACEklEQVQoz21TTW/UQAzN//8F3DkiVE6FSgVV4oQEVVE/KBVaNt2kye4k2ZnMtz0eoyR0VUrfaWT52e/ZnsI5J4QYhiFnZmZIycRgIHgAylMsxtj3vRBCa51SQkQEQMScc2GtbZoHpbR3G9md5dRk5sxzpRlE5L13M6x1u0EPyjjnJrKUsizLvt87W/ft5wQNZQZCJAJKKRMz55xTmh424Puv9XXl5iAXxhitNSIZ+X2/PcZ44xPJYGWwFuJCpomcmNl4PDl/uNoYo0frXNE0TVmWSmmr77vtl+CrkMjEEKfmaXbNKREg/u183lxVzhqtxrHwsyEidmbVbo6iv2mtWUlRaymcAUqLbCJkztbHk2/1bf0oe5I01w+uVsN19JucCadx4jKwRLze2btKNoMHBONtmisyc9FqudoLpKy6U7V7i/bU+3G367TWRJNhF+n1p9Wr49uzazliqLSM6ZGsgtMQmFmret/fQWwB4jjqEMJimHLuFDZdrNphJ3ZKqcMWi7n8lARxO/YfMq59wLqurLWLW2bedhe/7t+M5t7q4Jz7h7wcRALtzO9MI2La7/dL0kKutxc/10cBxCHyvLNRP/r2XYqXEVAIAQD8H/KMZ+QJMfRquKQkAFPTNMvAltSZkvjJzT6RPZ9RDJ0UHzO1mLgs11VVDcNwWNiLKBIlj+AQIAGAmz9CllL2fd913YviD+Q/OahfWZ95hjYAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"image4\",\n    \"title\": \"image4\",\n    \"src\": \"/static/f8771f3d2311991e1128c72dded81fad/fcda8/image4.png\",\n    \"srcSet\": [\"/static/f8771f3d2311991e1128c72dded81fad/12f09/image4.png 148w\", \"/static/f8771f3d2311991e1128c72dded81fad/e4a3f/image4.png 295w\", \"/static/f8771f3d2311991e1128c72dded81fad/fcda8/image4.png 590w\", \"/static/f8771f3d2311991e1128c72dded81fad/efc66/image4.png 885w\", \"/static/f8771f3d2311991e1128c72dded81fad/c83ae/image4.png 1180w\", \"/static/f8771f3d2311991e1128c72dded81fad/29007/image4.png 1600w\"],\n    \"sizes\": \"(max-width: 590px) 100vw, 590px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, \"The proposed flow involved removing, redesigning and reordering screens and required input from the both the compliance and back end teams.\"), mdx(\"h4\", null, \"Prototype: what should we create\"), mdx(\"p\", null, \"The new interaction design reduced the flow from 14 to 8 steps and taking the most complex screen first, we iterated content and layout designs using a \\u2018mobile first\\u2019 focus. We connected the screens together in an interactive prototype and tested, iterating the design as necessary.\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"590px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/2ea31d66adf5b335accbab4bf03b3d5f/416ee/image5.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"172.2972972972973%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,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')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"image5\",\n    \"title\": \"image5\",\n    \"src\": \"/static/2ea31d66adf5b335accbab4bf03b3d5f/fcda8/image5.png\",\n    \"srcSet\": [\"/static/2ea31d66adf5b335accbab4bf03b3d5f/12f09/image5.png 148w\", \"/static/2ea31d66adf5b335accbab4bf03b3d5f/e4a3f/image5.png 295w\", \"/static/2ea31d66adf5b335accbab4bf03b3d5f/fcda8/image5.png 590w\", \"/static/2ea31d66adf5b335accbab4bf03b3d5f/efc66/image5.png 885w\", \"/static/2ea31d66adf5b335accbab4bf03b3d5f/416ee/image5.png 930w\"],\n    \"sizes\": \"(max-width: 590px) 100vw, 590px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, \"The next step in the UX design process was to add the visual design to each screen in the flow and while iterating the visual design we further reduced the flow into 6 distinct steps.\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"590px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/4a00dd63f70d3b00f2a36cf77c2e4dab/2a333/image6.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"64.1891891891892%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAIAAAAmMtkJAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB4ElEQVQoz22SS48TMRCE9///EcQRceDAgTMXHkICVrsbbTJJNjP22GO73X51t9EkJFok6ujqr9xq1V2/ikVIpIuwrDq/iQg3ZqxELMwX/6/Re7+7wdI7IhpjMMZcq/EAAG5xpVS7eD2bWkojcVi1A0iZme9EOrMQUc7ZOTdqEwByqZOetVKlNpdwb9TorY9YmmjrjJkRcf2ZmZfFTUpZYxsxpFJqE5GtzRuT7w+zhZjAOvCYS+/dWjvs98ZYEVlhrbW11oeQczbOLy4w0eTxsGAm2Sj/5vPmZMFB9JggonMOEde1mdkYexrH2ZhaG0Acx9EY02oVpt57LO3JZL14rdRpUjFiREwprXDv/WGzfXgeJqWP+/3i/GGc1GxSzrW1RkzEXXj3vDscT857RPQ+ICZmWeEQwry4rQ6P4wIRZxdCqpBbhFhKZRGE+PvLj+1uNwxDCCEANKIuZ3iw+Pbb4d1P9elx5oxcErdSG2FKTLymjy/hdOy9p5SstdOkSilygQtxautQafR1c/y+OT69mHrGLmWARbl5YumXO10rdC2JMDOxjeXDvfr4ML//pXSsZ3h1x90AACKSc+6vdIXPU8z8ypKbBVp572OMtdb/wBcRcyo1lVpqve12iyCif9P7H4tE7NhH7Yw7AAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"image6\",\n    \"title\": \"image6\",\n    \"src\": \"/static/4a00dd63f70d3b00f2a36cf77c2e4dab/fcda8/image6.png\",\n    \"srcSet\": [\"/static/4a00dd63f70d3b00f2a36cf77c2e4dab/12f09/image6.png 148w\", \"/static/4a00dd63f70d3b00f2a36cf77c2e4dab/e4a3f/image6.png 295w\", \"/static/4a00dd63f70d3b00f2a36cf77c2e4dab/fcda8/image6.png 590w\", \"/static/4a00dd63f70d3b00f2a36cf77c2e4dab/efc66/image6.png 885w\", \"/static/4a00dd63f70d3b00f2a36cf77c2e4dab/c83ae/image6.png 1180w\", \"/static/4a00dd63f70d3b00f2a36cf77c2e4dab/2a333/image6.png 1484w\"],\n    \"sizes\": \"(max-width: 590px) 100vw, 590px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, \"The final step was for the UX, UI, Back end and QA teams to work together in multi-disciplinary feature team to build, test and deliver it.\"));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"path":"/blog/evolving-the-ux-and-ui-of-an-existing-onboarding-journey","title":"Evolving the UX & UI of an existing onboarding journey","author":"Kingsley","excerpt":"A case study in overhauling a key user journey.","date":"05 September, 2020","image":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAIAAAAmMtkJAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB4ElEQVQoz22SS48TMRCE9///EcQRceDAgTMXHkICVrsbbTJJNjP22GO73X51t9EkJFok6ujqr9xq1V2/ikVIpIuwrDq/iQg3ZqxELMwX/6/Re7+7wdI7IhpjMMZcq/EAAG5xpVS7eD2bWkojcVi1A0iZme9EOrMQUc7ZOTdqEwByqZOetVKlNpdwb9TorY9YmmjrjJkRcf2ZmZfFTUpZYxsxpFJqE5GtzRuT7w+zhZjAOvCYS+/dWjvs98ZYEVlhrbW11oeQczbOLy4w0eTxsGAm2Sj/5vPmZMFB9JggonMOEde1mdkYexrH2ZhaG0Acx9EY02oVpt57LO3JZL14rdRpUjFiREwprXDv/WGzfXgeJqWP+/3i/GGc1GxSzrW1RkzEXXj3vDscT857RPQ+ICZmWeEQwry4rQ6P4wIRZxdCqpBbhFhKZRGE+PvLj+1uNwxDCCEANKIuZ3iw+Pbb4d1P9elx5oxcErdSG2FKTLymjy/hdOy9p5SstdOkSilygQtxautQafR1c/y+OT69mHrGLmWARbl5YumXO10rdC2JMDOxjeXDvfr4ML//pXSsZ3h1x90AACKSc+6vdIXPU8z8ypKbBVp572OMtdb/wBcRcyo1lVpqve12iyCif9P7H4tE7NhH7Yw7AAAAAElFTkSuQmCC","aspectRatio":1.5625,"src":"/static/4a00dd63f70d3b00f2a36cf77c2e4dab/73f08/hero.png","srcSet":"/static/4a00dd63f70d3b00f2a36cf77c2e4dab/57fc3/hero.png 300w,\n/static/4a00dd63f70d3b00f2a36cf77c2e4dab/f8eb5/hero.png 600w,\n/static/4a00dd63f70d3b00f2a36cf77c2e4dab/73f08/hero.png 1200w,\n/static/4a00dd63f70d3b00f2a36cf77c2e4dab/96190/hero.png 1484w","sizes":"(max-width: 1200px) 100vw, 1200px"}}}}}},"pageContext":{"id":"bb18862a-4570-5b28-845b-c9b9e9111adb"}}}