Complii Fintech
Simplifying Account Editing with a Modal Workflow
User Interface Designer | June 2023
Wireframe, High-Fidelity UI Design
Overview
This project focused on improving how financial advisors edited client account information in a wealth management SaaS platform.
The existing workflow sent users to a separate page for each update. My role was to redesign the interaction so advisors could edit information without losing their position in the account view.
Advisors often update client information while reviewing an account. In the existing experience, selecting an edit action redirected them to another page.
After saving a change, users had to return to the account and find where they had stopped. Repeating this process across several fields added unnecessary navigation to a simple task.
The workflow worked, but its structure did not match the size of the interaction. Editing a few fields did not require a separate page.
Problem
My Goal
My goal was to reduce unnecessary navigation and allow advisors to edit account information while maintaining the context of the account they were reviewing.
The redesigned experience needed to:
Keep users on the account page
Make the selected editing task clear
Allow users to save or cancel changes easily
Return users to the same position after completing the edit
What I Did
I reviewed the existing editing flow and identified the steps that did not contribute to completing the task.
I then redesigned the interaction around a focused modal and defined the required form, validation, confirmation, and cancellation states.
The Design Decision
I replaced the separate editing page with a modal that opened over the account view.
A modal suited the workflow because the task was short and connected to information already displayed on the page. It allowed users to focus on the selected fields while keeping the account context visible.
The Solution
The new workflow changed the editing process from:
Redesigned
Open account → select edit → update information in a modal → save
Old
Open account → select edit → leave the page → update information → save → return to account
The modal included:
A clear title identifying the information being edited
Primary and secondary actions for saving or cancelling
Validation messages for incomplete or incorrect information
A confirmation state after a successful update
Only the necessary form fields
Business Impact
The redesign supported the business by improving operational efficiency rather than directly affecting sales.
A simpler editing workflow can help:
Reduce the time required to complete routine account updates
Lower the learning effort for new users
Reduce mistakes caused by navigating between different screens
Decrease the need for additional guidance or support
Create a reusable interaction pattern for similar editing tasks across the product
