Case Study — Senior UX/UI Portfolio
Redesigning the Account Opening Experience
State Bank — Digital Banking & Investment Platform
Open checking
Takes less than 3 minutes.
Checking Account
Everyday Banking
Savings & HYS
High-Yield Investment
Continue
Portfolio Value
$142,580.24
+14.2% This Quarter
Quick Actions
Allocate Funds
Auto Loan Approved
Your rate is locked for 30 days.
Sign Agreement
01 / Project Overview
State Bank serves a dual audience: everyday banking customers looking for reliable checking and savings accounts, and active investors looking for mortgages, auto loans, and high-yield investment options.
The project focused on auditing and redesigning the entire account opening flow across multiple separate product lines. Our target was to eliminate structural redundancies, modernize the presentation layer, and build a cohesive ecosystem that bridges everyday banking with strategic investing.
01
Lower high drop-off metrics throughout multi-page dynamic form entry stages.
02
Build a single mental model for both checking account setups and complex mortgages.
03
Leverage progressive disclosure to protect users from sudden cognitive overload.
04
Design interfaces that project stability, institutional trust, and high security.
02 / Research & Insights
We performed a deep operational audit of State Bank's existing funnel analytics to pinpoint exactly where friction turns into structural drop-offs.
Illustrative baseline figures — a hypothetical audit dataset used to frame the design problem, not real State Bank data.
67%
Users abandon the form after encountering complex underwriting queries.
45%
System friction and confusing size/format limits drive upload failures.
3.8
Most applicants require multiple separate sessions to locate target files.
1.Product Selection
100% · 124.5k users
2.Identity & Personal Info
72% · 89.6k users
3.Underwriting & Financial Queries
48% · 59.7k users
4.Document Verification Upload
26% · 32.3k users
5.Final Review & Account Creation
12% · 14.9k users
We followed up quantitative data with 24 deep-dive moderated user interviews. We targeted three distinct user types to map out their core friction points.
“I was asked to upload my W-2 and three months of bank statements halfway through a mobile flow. I didn't have the files and there was no way to save.”
Sarah M.
First-Time Homebuyer Applicant
“The investment questionnaire felt like a test I was going to fail. I just wanted to deposit my funds, but the legal jargon made me hesitate.”
David K.
High-Yield Portfolio User
“I wanted to apply for an auto loan, but I had to re-enter my name, address, and SSN even though I've had a checking account with them for 5 years.”
Alex T.
Existing Checking Customer
Checking + High-Yield Investments
Wants to deploy idle capital quickly. Values seamless transfers, clear yields, and biometrics. Easily annoyed by redundant form fields.
“If it takes more than 5 minutes, I am going to drop out and try again next week.”
Mortgage Application
Applying for a mortgage is high-stakes. Needs extreme clarity on documentation requirements, tracking, and save-and-resume safety.
“I need absolute clarity on what documents I should locate before I even start the application.”
Auto Loan Matching
Comparing loan rates on their phone. Expects the system to pre-fill their existing checking data to unlock an instant loan decision.
“Why do I have to retype my address? You already send my checking statements there.”
Clustering qualitative quotes and quantitative funnel drop-offs revealed five foundational focus areas for the new product architecture.
Protect users from immediate cognitive overload. Divide deep underwriting processes into short, digestible chapters grouped by topic.
Always tell the applicant exactly where they stand, what steps remain, and what requirements are coming next.
Allow users to securely drop out of document-heavy loan steps at any point, with recovery links sent instantly via SMS or Email.
Present a clear checklist of required financial documents before the flow starts, reducing unexpected mid-flow exits.
Use the same form fields, progress meters, and verification layouts across Checking, Savings, and Mortgages.
03 / Low Fidelity Wireframes
We built structural low-fidelity wireframes to establish, iterate, and refine the core layout before committing to the final UI branding phase.
04 / Visual Direction
Deep Navy
Electric Blue
Success Green
Warm Gray
Display Title
Subtitle Medium Bold
Geometrical clean body copy with high readability at small scales on both desktop and mobile.
Focused value state...
05 / High-Fidelity Wireframes
WF1 — Select Account Type
State Bank
WF2 — Personal Information
Step 2 of 5
Legal Name
Date of Birth
Home Address
Next Step
WF3 — Identity & Financials
Verification
Drag & drop financial tax statements
W2_2025.pdf — Uploaded
WF4 — Review Submission
Step 4 of 5
Personal Information
Jordan Ellis, 128 Financial Way
Employment Details
Senior Product Designer, Tech Corp
Funding Setup
Initial Transfer: $10,000.00
WF5 — Success
Application Received
Your checking account is successfully established.
Account Number
•••• •••• •••• 9823
WF6 — Risk Profile Questionnaire
Investments
What is your primary strategic objective for deploying capital?
06 / User Interface
Checking Account Flow
Step 2 of 4
Let's verify your identity
Legal Name
Jordan Ellis
Social Security Number (SSN)
••• - •• - 9823
Continue
Review
Review & Submit
Personal Info
Jordan Ellis • 9823
Funding Source
Chase Checking •••• 8821
Initial Deposit
$10,000.00
Submit Application
Your Account is Ready
You are cleared to transact immediately.
Account and routing numbers shown are illustrative placeholders, not real financial data.
Go to Dashboard
Auto Loan Flow
Auto Financing
Select Loan Terms
Vehicle Type
2024 Tesla Model Y
Loan Term
Est. Monthly Payment
$582.40 / mo
Review Loan Offer
Accept & E-Sign
Approved & Disbursed
Funds allocated to Tesla Inc. dealer account.
View Loan Dashboard
Mortgage Flow
Mortgage Services
Property Purchase
Purchase Price
$650,000.00
Down Payment (20%)
$130,000.00
Continue
Review Application
Submit Application
Pre-Approval Letter Ready
Your official pre-approval is generated.
Assigned Loan Officer
Sarah Jenkins, Loan Officer
Download Letter (PDF)
07 / Impact & Results
Illustrative projected impact — conceptual project, not measured data.
An illustrative model of how these design changes were intended to move core banking metrics — projected outcomes for a conceptual project, not measured production data.
72%
+118%Previously: 33%
6 min
-57%Previously: 14 min
64%
+191%Previously: 22%
4.6 / 5
+43%Previously: 3.2 / 5
-43%
43% reductionPreviously: High Volume
Comparing completion rates at critical friction steps before and after implementing progressive disclosure patterns.
Product Selection
100% after · 100% before
Identity & Personal Info
92% after · 78% before
Underwriting & Financials
84% after · 56% before
Document Verification
78% after · 41% before
Final Account Activation
72% after · 33% before
Completion outcomes varied depending on complexity, showing massive optimization across all departments.
Checking Account
89%
Savings Account
87%
Auto Loan
74%
Private Loan
71%
Investment Account
68%
Mortgage Application
62%
“I was surprised how quick it was — I opened my account during lunch break.”
“Being able to save and come back made all the difference for my mortgage application.”
“The progress bar helped me know exactly what was coming next.”
A structured roadmap highlighting the sequential phase deployment model used to mitigate risk.
Week 1-2
Soft release to 10% of active customer base. Monitored onboarding drop-off and support call volume closely.
Week 3-4
Launched progressive high-yield investment portal. Integrated instant automated risk profiling forms.
Week 5-6
Rolled out simplified loan matching calculators. Enabled pre-fill features from active deposit account data.
Week 8
Deployed document verification wizard with secure save & resume recovery functionality.
Week 12
Global production release complete across all channels. All core KPIs met or exceeded target projections.
08 / Key Learnings
What auditing and modernizing the account creation pathways across complex product lines taught us.
01
Deep underwriting procedures become significantly less intimidating when broken into structured, thematic modules with clear expectations.
02
Informing users of required files (W-2, tax statements) upfront mitigates dropouts when complex uploading verification stages are reached.
03
Deploying identical structural systems (forms, input constraints, feedback banners) establishes deep cognitive alignment for users.
04
For long, multi-stage processes, ensuring recovery safety with SMS or email notifications protects ongoing progress values.
09 / Reflection
The State Bank project reinforced that even complex financial processes can feel approachable when we respect the user's time and cognitive load. By creating a unified, progressive experience across all product types, we helped users move from consideration to completion with confidence.
Thank you for reviewing this case study
State Bank — Senior UX/UI Portfolio Concept, 2026
State Bank is a fictional institution created for portfolio demonstration purposes. Any real company or product names appearing in this concept (e.g. as example funding sources or vehicle brands) are trademarks of their respective owners and are not affiliated with or endorsing this project. Account details, routing numbers, and application data shown are illustrative placeholders, not real financial information.