Surfacing Data Easily for Users
The Problem
-
Inability to quickly view Banking Details of a particular Incoming Fund without navigating to a separate flow
-
Existing Banking Details lacked crucial fields that users needed to view
​
The Solution
-
Explore ability to view Banking Details from the Incoming Funds page
-
Add additional information that we learn from users is most important to include
-
Update layout
​
Strategy
Partnering with the Research team, we asked current users of the product which additional fields they would potentially need to view within this workflow, and to rank them in order of most valuable. Then apply those findings to wireframes, test them, move into mid and hi-fi designs, test those, and iterate.
​
Implemented Process Methods
Research Strategy | User Interviews | Data Capture & Synthesis | Hypothesis | Content Recommendation | Desktop Wireframing | HiFi Design Build
​
The Result
Users may now view Banking Details quickly without having to leave the page, but also have the capability of advancing if necessary without additional clicks. Further, the information is congruent wherever displayed, and in an order that is most valuable to users.
The Problem
Users couldn't quickly view Banking Details of a particular Incoming Fund without navigating to a separate flow. Also, the existing Banking Details lacked crucial fields that users needed to view.
Limited Menu
Before the design enhancement, the dropdown menu for each table row only had one option for users to view any additional information for that particular incoming fund—selecting 'Receipt to order,' which navigates to a separate flow on a different page. Definitely a heavier experience than necessary.
Limited Bank Info
Further, upon arriving at the 'Receipt to order' page, users had given feedback that the Banking Details lacked informational fields that they're typically looking for.
Ideation and Wireframes
While the Research team began gathering users to find out which additional fields were needed, I began ideating on wireframes.
New Menu Option
It seemed clear that there could be a lightweight method of showing the users the Banking Details from the table view, without bringing them to a separate flow.
Modal Experience
If a new menu option existed to view those Banking Details, we could surface a modal on the same page displaying those details along with additional fields that the Research team found out were most valuable to users. Further, we could include a secondary cta button in the modal to take them to the 'Receipt to order' page if they so desired to navigate there.
Full Page Layout Explorations
Next, I explored layout options for how to display the upcoming longer list of Banking Details—exploring layouts similar to what already existing, and new choices.
Research Data
The Research team returned with data from users on which additional fields of Banking Details would be most valuable to them to be shown.
Survey Results
From the results, we could validate which fields we should include in the design enhancement, as well as in what order they should be displayed.
Design Iteration
With the Research team's data on hand, I moved into mid and hi-fi designs.
New Menu Option
A new 'View details' menu option allows user to quickly view identifying bank information without having to open a separate flow.
View Details Modal
Now, while staying on the same page, users can view the identifying bank information without having to leave the page—while also having the option to advance to the related flow with an additional CTA button to 'Receipt to Order.' This covers all the bases, without requiring users to close the modal and head back into the menu.
Adjusted Layout
Further, the additional fields that had been researched also had to be included in the Receipt to Order page. I found using a three-column grid for this was a better use of space, preventing much of the page from falling below the fold also.
Further Research Data
Hi-fi design enhancements were further put up for usability feedback from current product users who approved the conveniences of the enhancements, except for one specific interaction.
Input Interaction
Users pointed out in the second round of research that on the 'Receipt to order' page, they had to repeatedly scroll up and down to reference the Banking Details in order to input certain fields of the Deposit Information.
Design Iteration
With this piece of feedback, I went back to rectify this by adjusting the layout once again.
Deposit Info Adjustment
Realizing this no-brainer, I adjusted the Deposit Information section to a three-column grid to match the section above it—this decreased the height of the page, bringing both sections to be easily visible for users referencing the top-placed info.
Modal Adjustment
After the success of adjusting the 'Receipt to order' page, I realized there was an opportunity to bring more continuity to the experience by adjusting the modal's content to a three-column grid. Now the info could be congruent in both the modal and the 'Receipt to order' page, while decreasing the height of the modal.
​
Lastly, although it's a suggestive interaction, I bought the 'Receipt to Order' CTA to the right side for higher visibility, based on the value of its interaction.
Easy UX to View Details
Comprehensive Flow
Additional Info for Users
Enhanced Existing UI for better UX
