Flows

Redesigning Engagement Journey Orchestrator

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]

Known and Discovered problems

These are the problems discovered in Internal Analysis and initial user interviews about the existing experience [ 8 users, 3 proficient , 5 novice]

• Interface looked dated
• Interface would suffer catastrophic failures when dealing with large flows
• Interface experience was not stutter free even for small flows
• Interface had elements that would obscure the flow
• Comprehensive error handling was problematic
• Flows entry conditions were hard to diagnose until too late
• Managing long flows was becoming problematic
• Navigating large flows was painful
• Reviewing and testing flows was not easy
• Keeping track of changes was not possible

Other avenues of enquiry performed during user interview

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]

1. How do you plan a flow ?
2. Who decides the strategy of the flow ? How do you decide when a flow is needed ?
3. Do you build each block or create the skeleton first ?
4. Is flow creation done by a single person ? Are there more than one person working on a flow ?
5. Is the content also made by you ?
6. How is a flow monitored ? What metrics are important ?
7. What would make a flow successful ? Who monitors the success of the flow ?
8. How big is the average flow ?

The Old Design

Initial visual exploration

An initial visual exploration of building block of the journey orchestrator, the blocks , connectors and artefacts

Initial interaction exploration

Various interface paradigms were explored for the adding of blocks during the editing/creating phase of a journey

Drag and Drop

Pros :

Looked modern, intuitive

More satisfactory tactile experience

Cons:

Does not work for large flows

Greater chance for errors

Can be cumbersome to edit existing flows

Interface simplicity gains affected by need for extra interactions

Split menu (side panel)

Pros :

Simple

Easier to maintain local context

Cons:

Split interaction

Feels cumbersome

Local menu panel

Pros :

Easier to keep context

All interactions are in one place

Cons:

Scalability can be an issue

Not ideal interaction for very small screens

Competitor analysis for interactions and statistics

We benchmarked our initial designs with competitors for legibility and interactivity

Final designs

Here are some screenshots from the final designs

Other improvements achieved from the redesign

These are the other improvement that we achieved from the redesign

• Different views to suite different personas and work styles
• Guided first steps that allow for predictive guidance, templates and mitigate against the blank paper problem
• Improved navigation system with Mini-Map
• Improve canvas organization for better usage of real estate
• Full screen view for further reduction of chrome
• Allows flows to be daisy chained to ensure, smaller and easier to manage flows. Also enhanced reusability of flows.

Measuring success of redesign

1. Qualitative task driven User Interviews
2. Controlled task comparison for  Time to Complete, Clicks to Complete
3. Uncontrolled measurement based on number of flows created, number of concurrent edits, number of undo’s

Next steps

1. Introduction of goal driven flow templates
2. Introduction of macro-like smart blocks
3. Improved testing and emulation framework
4. Introduction of flow variables
5. Incorporating feedback from users