{"id":656,"date":"2022-04-14T06:12:46","date_gmt":"2022-04-14T06:12:46","guid":{"rendered":"http:\/\/nikhilshivpuja.in\/older\/?post_type=portfolio&#038;p=656"},"modified":"2022-04-17T06:27:58","modified_gmt":"2022-04-17T06:27:58","slug":"redesigning-our-engagement-journey-orchestration-service","status":"publish","type":"portfolio","link":"https:\/\/nikhilshivpuja.in\/older\/portfolio\/redesigning-our-engagement-journey-orchestration-service","title":{"rendered":"Redesigning our Engagement Journey orchestration service"},"content":{"rendered":"<div class=\"wpb-content-wrapper\">[vc_row thb_divider_position=&#8221;bottom&#8221;][vc_column][vc_column_text]\n<h1>Redesigning Engagement Journey Orchestrator<\/h1>\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row thb_divider_position=&#8221;bottom&#8221;][vc_column][vc_column_text]It was decided that the Legacy journey builder ( Flows ) @Moengage needed a redesign.<br \/>\nThe redesign took a period of 3 months, and it was a comprehensive redesign [ Both look and experience][\/vc_column_text][\/vc_column][\/vc_row][vc_row thb_divider_position=&#8221;bottom&#8221;][vc_column][vc_column_text]\n<h3>Known and Discovered problems<\/h3>\n<p>These are the problems discovered in Internal Analysis and initial user interviews about the existing experience [ 8 users, 3 proficient , 5 novice]\n<ul>\n<li>Interface looked dated<\/li>\n<li>Interface would suffer catastrophic failures when dealing with large flows<\/li>\n<li>Interface experience was not stutter free even for small flows<\/li>\n<li>Interface had elements that would obscure the flow<\/li>\n<li>Comprehensive error handling was problematic<\/li>\n<li>Flows entry conditions were hard to diagnose until too late<\/li>\n<li>Managing long flows was becoming problematic<\/li>\n<li>Navigating large flows was painful<\/li>\n<li>Reviewing and testing flows was not easy<\/li>\n<li>Keeping track of changes was not possible<\/li>\n<\/ul>\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row thb_divider_position=&#8221;bottom&#8221;][vc_column][vc_column_text]\n<h3>Other avenues of enquiry performed during user interviews<\/h3>\n<p>We also asked questions about both our customers and the way they use the tool, here are some of the questions we asked [ 8 users, 3 proficient , 5 novice]\n<ul>\n<li>How do you plan a flow ?<\/li>\n<li>Who decides the strategy of the flow ? How do you decide when a flow is needed ?<\/li>\n<li>Do you build each block or create the skeleton first ?<\/li>\n<li>Is flow creation done by a single person ? Are there more than one person working on a flow ?<\/li>\n<li>Is the content also made by you ?<\/li>\n<li>How is a flow monitored ? What metrics are important ?<\/li>\n<li>What would make a flow successful ? Who monitors the success of the flow ?<\/li>\n<li>How big is the average flow ?<\/li>\n<\/ul>\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row thb_divider_position=&#8221;bottom&#8221;][vc_column][vc_column_text]\n<h3>The old design<\/h3>\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row thb_divider_position=&#8221;bottom&#8221;][vc_column][vc_gallery lightbox=&#8221;mfp-gallery&#8221; images=&#8221;668,667&#8243; img_size=&#8221;full&#8221; animation=&#8221;animation left-to-right&#8221;][\/vc_column][\/vc_row][vc_row thb_divider_position=&#8221;bottom&#8221;][vc_column][vc_column_text]\n<h3>Initial visual exploration<\/h3>\n<p>An initial visual exploration of building block of the journey orchestrator, the blocks , connectors and artefacts[\/vc_column_text][\/vc_column][\/vc_row][vc_row thb_divider_position=&#8221;bottom&#8221;][vc_column][vc_gallery thb_columns=&#8221;small-6 thb-5&#8243; lightbox=&#8221;mfp-gallery&#8221; images=&#8221;675,676,682,683,684,686,687,688&#8243; img_size=&#8221;full&#8221; animation=&#8221;animation left-to-right&#8221;][\/vc_column][\/vc_row][vc_row thb_divider_position=&#8221;bottom&#8221;][vc_column][vc_column_text]\n<h3>Initial interaction exploration<\/h3>\n<p>Various interface paradigms were explored for the adding of blocks during the editing\/creating phase of a journey<\/p>\n<p>&nbsp;<\/p>\n<h5>Drag and Drop<\/h5>\n<p>Pros :<\/p>\n<p>Looked modern, intuitive<\/p>\n<p>More satisfactory tactile experience<\/p>\n<p>Cons:<\/p>\n<p>Does not work for large flows<\/p>\n<p>Greater chance for errors<\/p>\n<p>Can be cumbersome to edit existing flows<\/p>\n<p>Interface simplicity gains affected by need for extra interactions<\/p>\n<p>&nbsp;<\/p>\n<h5>Split menu (side panel)<\/h5>\n<p>Pros :<\/p>\n<p>Simple<\/p>\n<p>Easier to maintain local context<\/p>\n<p>Cons:<\/p>\n<p>Split interaction<\/p>\n<p>Feels cumbersome<\/p>\n<h5>Local menu panel<\/h5>\n<p>Pros :<\/p>\n<p>Easier to keep context<\/p>\n<p>All interactions are in one place<\/p>\n<p>Cons:<\/p>\n<p>Scalability can be an issue<\/p>\n<p>Not ideal interaction for very small screens[\/vc_column_text][\/vc_column][\/vc_row][vc_row thb_divider_position=&#8221;bottom&#8221;][vc_column][vc_gallery thb_columns=&#8221;small-6 large-4&#8243; lightbox=&#8221;mfp-gallery&#8221; images=&#8221;678,679,680&#8243; img_size=&#8221;full&#8221; animation=&#8221;animation left-to-right&#8221;][\/vc_column][\/vc_row][vc_row thb_divider_position=&#8221;bottom&#8221;][vc_column][vc_column_text]\n<h3>Competitor analysis for interactions and statistics<\/h3>\n<p>We benchmarked our initial designs with competitors for legibility and interactivity[\/vc_column_text][\/vc_column][\/vc_row][vc_row thb_divider_position=&#8221;bottom&#8221;][vc_column][vc_gallery thb_columns=&#8221;small-6 thb-5&#8243; lightbox=&#8221;mfp-gallery&#8221; images=&#8221;690,691,692,693,694&#8243; img_size=&#8221;full&#8221; animation=&#8221;animation left-to-right&#8221;][\/vc_column][\/vc_row][vc_row thb_divider_position=&#8221;bottom&#8221;][vc_column][vc_column_text]\n<h3>Final designs<\/h3>\n<p>Here are some screenshots from the final designs[\/vc_column_text][\/vc_column][\/vc_row][vc_row thb_divider_position=&#8221;bottom&#8221;][vc_column][vc_gallery thb_columns=&#8221;small-6 large-2&#8243; lightbox=&#8221;mfp-gallery&#8221; images=&#8221;696,697,698,702,703,704,705,707,708,709&#8243; img_size=&#8221;full&#8221; animation=&#8221;animation left-to-right&#8221;][\/vc_column][\/vc_row][vc_row thb_divider_position=&#8221;bottom&#8221;][vc_column][vc_column_text]\n<h3>Other improvements achieved from the redesign<\/h3>\n<p>These are the other improvement that we achieved from the redesign<\/p>\n<ul>\n<li>Different views to suite different personas and work styles<\/li>\n<li>Guided first steps that allow for predictive guidance, templates and mitigate against the blank paper problem<\/li>\n<li>Improved navigation system with Mini-Map<\/li>\n<li>Improve canvas organization for better usage of real estate<\/li>\n<li>Full screen view for further reduction of chrome<\/li>\n<li>Allows flows to be daisy chained to ensure, smaller and easier to manage flows. Also enhanced reusability of flows.<\/li>\n<\/ul>\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row thb_divider_position=&#8221;bottom&#8221;][vc_column][vc_column_text]\n<h3>Measuring success of redesign<\/h3>\n<ul>\n<li>Qualitative task driven User Interviews<\/li>\n<li>Controlled task comparison for\u00a0 Time to Complete, Clicks to Complete<\/li>\n<li>Uncontrolled measurement based on number of flows created, number of concurrent edits, number of undo&#8217;s<\/li>\n<\/ul>\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row thb_divider_position=&#8221;bottom&#8221;][vc_column][vc_column_text]\n<h3>Next steps<\/h3>\n<ul>\n<li>Introduction of goal driven flow templates<\/li>\n<li>Introduction of macro-like smart blocks<\/li>\n<li>Improved testing and emulation framework<\/li>\n<li>Introduction of flow variables<\/li>\n<li>Incorporating feedback from users<\/li>\n<\/ul>\n[\/vc_column_text][\/vc_column][\/vc_row]\n<\/div>","protected":false},"excerpt":{"rendered":"<p>[vc_row thb_divider_position=&#8221;bottom&#8221;][vc_column][vc_column_text] Redesigning Engagement Journey Orchestrator [\/vc_column_text][\/vc_column][\/vc_row][vc_row thb_divider_position=&#8221;bottom&#8221;][vc_column][vc_column_text]It was decided that the Legacy journey builder ( Flows ) @Moengage needed a redesign. The redesign took a period of 3 months, and it was a comprehensive redesign [ Both look and experience][\/vc_column_text][\/vc_column][\/vc_row][vc_row thb_divider_position=&#8221;bottom&#8221;][vc_column][vc_column_text] Known and Discovered problems These are the problems discovered in Internal Analysis and&hellip;<\/p>\n","protected":false},"author":1,"featured_media":663,"comment_status":"closed","ping_status":"closed","template":"","tags":[],"_links":{"self":[{"href":"https:\/\/nikhilshivpuja.in\/older\/wp-json\/wp\/v2\/portfolio\/656"}],"collection":[{"href":"https:\/\/nikhilshivpuja.in\/older\/wp-json\/wp\/v2\/portfolio"}],"about":[{"href":"https:\/\/nikhilshivpuja.in\/older\/wp-json\/wp\/v2\/types\/portfolio"}],"author":[{"embeddable":true,"href":"https:\/\/nikhilshivpuja.in\/older\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nikhilshivpuja.in\/older\/wp-json\/wp\/v2\/comments?post=656"}],"version-history":[{"count":24,"href":"https:\/\/nikhilshivpuja.in\/older\/wp-json\/wp\/v2\/portfolio\/656\/revisions"}],"predecessor-version":[{"id":715,"href":"https:\/\/nikhilshivpuja.in\/older\/wp-json\/wp\/v2\/portfolio\/656\/revisions\/715"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nikhilshivpuja.in\/older\/wp-json\/wp\/v2\/media\/663"}],"wp:attachment":[{"href":"https:\/\/nikhilshivpuja.in\/older\/wp-json\/wp\/v2\/media?parent=656"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nikhilshivpuja.in\/older\/wp-json\/wp\/v2\/tags?post=656"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}