Streamlining a Modal Workspace
The Problem
-
Within a modal to distribute amounts or percentages of monetary totals, users were frustrated by the cumbersome or lengthy nature of the experience:
-
The options within the dropdowns require an irritating number of clicks to interact with​
-
User feedback was that the current experience was so bad, they wouldn't recommend the product to colleagues
-
-
The current feature was being misused by users to accommodate missing interactions
-
No easy way to quickly move between individual loans​
-
No way to see allocation status on individual loans
-
The Solution
-
Allow users to easily click between loans
-
Enable ability for users to select distribution features without a dropdown
-
Surface ability to allocate via percentages by default, instead of having to click within a dropdown
​
Strategy
Simplify and streamline the experience to be able to do as much as possible at the surface level, extracting features from their hidden dropdowns. Along with the full Design team, share explorations incrementally with focus groups of core demographic of users.
​​
Implemented Process Methods
Research Strategy | User Interviews | Data Capture & Synthesis | Hypothesis | Content Recommendation
​
The Result
Users can now accomplish allocations across tens of loans easily, with potentially hundreds less clicks than previously required of them. The experience as whole is streamlined, allowing users to complete tasks far quicker and more intuitively.
The Problem
In order to simplify the UI of the previous team's design, allocation features were placed behind dropdowns—which proved cumbersome, adding tens of extra mouse clicks to the experience. This led to negative user feedback, that they wouldn't even recommend the product to their colleagues.
Current State
Users would select one or more loans from the table to allocate their monetary amounts, and select the Allocate button in order to begin customizing the allocations.
Users would then be presented with a modal workspace to customize allocations, however it was met with negative feedback from users that many of the basic features were hidden behind dropdowns, resulting in a broken and cumbersome user flow.
​
Feedback highlights and requests included:
-
Ease ability to move from one loan to the next, without a dropdown
-
Make it simpler to use the allocation features that are currently behind dropdowns
-
Simplify the Save CTA buttons
Strategy
Before diving into explorations I needed to learn directly from users how they were currently using the modal, and hear from them what the pain points were.
Ideations and Explorations
This project having a quicker time frame, I jumped into mid and hifi designs rather than my usual time spent in lofi wireframing.
Charges Carousel
Since the product is extremely content dense, and the existing modal was already bursting at the seams, I wanted to explore how a full page experience could function while also utilizing familiar elements from the modal.
An exploration to help with focusing on one loan at a time.
Table for Each Charge
Still exploring the carousel execution, but focused on one loan at a time.
Individual View Carousel
Radio Button Loan List
Exploring how to show a list of all the charges selected for allocation, while allowing easy selection from one to the next.
Modal in Full Page
Experimenting with simply bringing in the same table from the modal into a full page view, with the charges listed in a new left side column for ease of selection.
Design Iteration
After consulting with our demographic users again, I moved forward with enhancing the existing modal, as this would also utilize the existing development framework.
-
Charges or Loans now display in a list in a new left side column—this allows users to quickly select between the tens of them that they work with in a single session
-
Monetary and percentage inputs display by default, instead of having to click into a dropdown to reveal the percentage input—users can easily input according to their preference, and the opposing input automatically calculates
-
All functions that had been hidden behind a dropdown were extracted, with new icons designed—allowing users to quickly evenly distribute larges amounts, distribute specific amounts, or zero-out selections
-
Simplified Save and Close CTA button
-
Apply Changes to All Charges CTA allows users to apply updated allocations to all charges, if relevant—this saves an untold amount of time for users with one click
-
Progress tracker near top left easily shows users how many charges are currently fully allocated as they progress through their flow
Modal Workspace Enhancements
As each charge or loan is allocated, iconography was added to help users quickly see which are under, over, or fully allocated.
The modal can't be saved if any charges are over allocated, so users can easily scroll through even lengthy lists to see the red charges that are over allocated to fix before saving.
Allocation Status Iconography
Additionally, allowing this new charges list to be filtered according to allocation status allows users to customize their work flow and efficiently move through their tasks.
Filter Ability
Scroll Zones
New Iconography Design
In addition to extracting the distribution features out of a dropdown for easy access, redesigning their icons was needed along with new tooltip guidance.
User Feedback
"The updates to the loan allocation modal are a thing of beauty—thank you so much!"
Easy loan to loan selection
More information within existing UI
Up to hundreds of clicks saved for users
Users now recommend this flow
