Select Business re-design
Commercial remote deposit capture portal
Key to streamline business client operations
Real-time back-office check management tool to enhance and streamline the check approval process.
Role: UX & Design Lead, Support in user research
Duration: 4months
Goal:
Redesign and launch the backend portal from scratch in 4months to be shown in the annual meeting and a conference.
My contribution:
I led design directions and created a site map; including, FI user role permissions, user stories/acceptance criteria, lo-fi wireframes & hi-fi screens, and a style guide with one other designer.
ChallengeHow might we deliver the vision of “quick & easy” approval process for complex business enterprise portfolio?
Current financial institution operators felt overwhelmed by the overloading information laid out in the tortuous navigation and outdated UI. Even if they managed to find the right place, they could easily get lost managing bulks of check deposits arriving from the merchant side on daily basis.
We were tasked to assess and revamp the current Select business portals on both (bank & merchant) sides to support users to digest the overwhelming incomings efficiently and systematize the account, location, and user connection.
What did the Select business portal look like before?
Home/landing screen
Enterprise deposit screen
Solution quick peekA new face of enterprise roadmap
We designed, validated, and delivered a new, fully responsive backend portal that focuses on allowing users to easily navigate, digest, & manage the complex enterprise product.
Process overviewIterate fast to lead project at different scales
While this tight deadline project didn’t begin with a defined set of requirements, we iterated rapidly to drive the project with design. Not having time for rigorous discovery research based on quantitative analytic data, we actually began designing at the very beginning. And along the way, every stakeholder demo and client service teams’ collection of real-time feedback became our source of data. We iterated and delivered wireframes & hi-fi screens to meet use cases, pain points, and feedback for interactions and new UI.
This approach helped us to validate assumptions at different scales, from evaluating project goals at the beginning to examining usability later on.
AlignAlign project goals with team and stakeholders with design
I also tuned up our personas to align the vision with the team and identify the goals and values for different types of users. This also helped us to communicate to stakeholders about why the site needed a revamp and what would be the expected outcome.
Financial institution user
Business merchant user
Design&validateIterate and validate assumptions through design
We first dived into delivering wireframes right away with assumptions based on stakeholders’ asks. The first version was delivered in a week to advocate and gain resources for the project to move forward. We then kept iterating and testing to uncover concrete user needs/goals from the field.
User need #1
Easy and digestible way to consume & overlook customers information
“There are way to much info in one screen on a same hierarchy level”
Previously, users had to depend on the system back button to navigate their way out. One major pain point we found out was that the blended information makes it hard to digest the information.
User need #2
Different goals lead to a different way of navigating
“I hope there would be an efficient way to view individual checks and the deposit at the same time ”
“I would like to see the error deposits/checks foremost”
Reflected on our personas, there are two types of users, banks and merchants that have different goals for the roadmap. While our early design failed to deliver two different needs, we iterated on the design to serve a diverse audience.
User need #3
Relevancy is the key
“I’ve seen the overview of FI page somehow, but can not find out how & where”
Feedback for our early iterations turns out that bank operators find it hard to discover the Financial institution page (mother account) as they get lost in annoying navigation. Engaging with the content without disrupting the user flow is the key practice we keep in our minds.
DeliveryCross-organizational teamwork with a tangible outcome
To ensure smooth design delivery, we created sitemaps, specs, and prototypes to communicate design, and synced daily with devs, CSM, and DevOps to guarantee we covered different states of design. I also developed a style guide to make sure our design was consistent among all other backend products.
Re-design analysisClear navigation for complex data
We broke down and grouped customers’ 3 main tabs (location, account, and merchant user) into one tab and re-defined the information architecture. It allows users to overview the incomings more easily and offered the ability to dive deeper.
Financial institution client logo (White-label solution)
Breadcrumbs: Always locate at the top for a clear traceability
Customers tab: Switch to view different customer sections on the same screen
FI enterprise overview (Full-side panel)
(#) Needs approval
(#) Submitted deposits
Profile link button
Sub-location expanded list view
Enterprise info view (Side panel): View accounts, merchant users, and FI members managing this enterprise
The goal of this redefining navigation sector was to increase the user’s awareness of the control and task-oriented user experience. Therefore we could lower user frustration levels and increase approval checks on a daily basis.
Different paths for 2 types of users
We define 2 major user journey based on the personas:
Bank operator
Deposit filter dropdown: Always feature “Deposits with errors” as a default
Location dropdown: Switch to enterprise or sublocations to view deposit & checks
Secondary menu: Settings or Audit menu
Check filter dropdown: Always feature “All checks” as a default
Amount search field
Deposit card expanded view
Check card expanded view
Business merchants
Bank full logo
All deposits dropdown set as default
Unsubmitted tab is set as default
Create new (deposit) button locates at the top
Add new (checks) button locates at the top
Personalization to drive relevancy
To make the roadmap relevant to users, we introduced a new feature: personalization. Taking advantage of account-based user entries, the new roadmap can keep users updated about their existing permission roles, and recommend them roadmaps based on their permission on the site.
ImpactRe-evaluate product vision
Revamping Select Business was originally treated as a financial institution backend portal revision. Our new designs bring focus to take action on the bulks of check incomings and maximize the efficiency of daily approvals.
Our result led to the new branch of service idea of “Select Business Merchant First”, which is sold directly to merchants that allows them to settle with multiple banks. This idea is in our backlog for milestone 2.
ReflectionHow to make design scalable for changing requirements?
While the following QA and support of the redesigned portal is an ongoing process, our design and research insights have been the foundation to keep driving the product direction.
One of the biggest challenges of this project is changing requirements. Initiating as a “proof of concept”, the project goals turned into production halfway with the executive decision. We strive to maintain thorough documentation, design style guide & design system and work closely with dev teams to support this decision. I also learned that presenting mid, final design sometimes is not just taking in feedback and iterate, but it is also a way to communicate back to stakeholders about our vision and why we think this is important.