Enabling users (account managers & implementation team members) onboard new customers more efficiently
The Drag and Drop page builder is a tool I designed to help implementation managers customize payment channels to meet customer requirements during on-boarding.
I defined the following requirements (written as user stories and classified by scope) based on interviews I held with several internal implementation team members and feedback sessions:
Why a page editor?
Billers requested changes to payment flows have traditionally required the involvement of a dedicated development team; (a very long process — 3 to 6 months) This usually took months to implement due to limited resources;
We sought to improve this process, by enabling internal implementation team members to make the necessary changes to payment flows without the need to source a development team.
What I did
I worked in collaboration with product management, and developers to define, design and build the Drag and Drop page builder; I designed the interface, the interactions and the associated features while considering technical limitations and the business rules each payment channel is subject to.
I researched similar tools on CRM platforms, identifying common patterns, information architecture and key features. Much of my design decisions were inspired by WordPress, SquareSpace, Wix, and other content management systems.
I also designed the navigation flow (how users would get to the page editor), how the payment channels were represented and what information was available about them. I designed all the icons that represent draggable elements.
Challenges and Key features
A balancing act; the biggest challenge with building a page builder is identifying the most important functions and making sure they can be easily accessed without overwhelming novices or frustrating advanced users:
-
- Defining default states for elements based on their most common use cases and progressively disclosing advanced features.
- Providing clear affordances to indicate when elements are being dragged, where they can be dropped, and how their properties can be customized.
- Functionality placement: from individual elements to page level functions like; delete, undo, redo, save and preview.
