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 interviews
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]
- How do you plan a flow ?
- Who decides the strategy of the flow ? How do you decide when a flow is needed ?
- Do you build each block or create the skeleton first ?
- Is flow creation done by a single person ? Are there more than one person working on a flow ?
- Is the content also made by you ?
- How is a flow monitored ? What metrics are important ?
- What would make a flow successful ? Who monitors the success of the flow ?
- 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
- Qualitative task driven User Interviews
- Controlled task comparison for Time to Complete, Clicks to Complete
- Uncontrolled measurement based on number of flows created, number of concurrent edits, number of undo’s
Next steps
- Introduction of goal driven flow templates
- Introduction of macro-like smart blocks
- Improved testing and emulation framework
- Introduction of flow variables
- Incorporating feedback from users
