SchoolsFirst Redesigned
BANKING
Friendly service, now 100% more user-friendly online.
SchoolsFirst (SF) is great: World-Class Personal Service and the largest credit union in CA.
but their Mobile App?
Not the best.
As an everyday user myself, what's not working so well?
Yup. You got the picture.
So let's work on this and bring a create a better SF online banking experience!
x Before
-
Firstly, fix that Zelle asap.
-
App is optimized with necessary functions
-
eDeposit is low contrast and hard to follow
-
Limited control of account view & balance
-
Confusing use of icons
-
No budgeting tools
✔️After
-
An one-step-to-use Zelle
-
A friendly UI with not distracting quick action buttons
-
WCAG color and size contrast compliance
-
More control over account view with budgeting tools
-
Easy to understand instruction/steps
-
Become more intuitive and engaging, especially for younger users
I said what I said
First, let’s make something clear.
You’ll see these throughout my design:
Consistency is key!
Colors
Keeping two already established main colors of SchoolsFirst, I created a variations of darker and lighter shades of blue and brown to make the app looks more attractive but still maintain brand identity.
Accent and grey colors are also selected for different states.
Typography
To create trust as an online banking app but still deliver values of a credit union, a sans-serif font will be a compliment to a clean, modern, and easy tp skim and scan user interface for both young and senior users.
Icons
Clear and familiar icons with text labels will make them easy to understand for users of all ages
Buttons & Inputs
Modern, clear, and lots of space for finger movements
Second, let's crack the problem with some sketching!
I sketched my ideas to brainstorm, refine, and bring them to life. It was a fast and fun way to turn concepts into something tangible and ready to explore.
Onboarding:
Account Details & Budget
And after multiple trial-and-error (and some draft napkins),
my version of the SchoolsFirst Mobile is here.
-
Newest promos & best products
-
Available to first time users
-
Get users familiar with brand identity
-
A more attractive user interface for younger users, but still user-friendly to the older
DELIVERABLES
Who said we can’t create onboarding screens & add the newest promos?
↗️ Onboarding:
↗️ Log In/
Create Account:
Newest updates and notifications right on the first screen for instant access
Easy to follow Log-in instruction
Don’t want to log in with passwords nor biometrics?
Use Passcode Log In.
Remember log in information for easier future access
Don’t have time to log in or open more apps for other functions?
No worries. You’re covered with convenient quick access buttons:
-
Branches/ATM locations
-
Today’s Rates
-
Accessing company’s website instantly
-
Contact customer services
↗️ Home Screen/ All accounts & Total Balance
Total available balance of all accounts.No math needed.
Recap of current month’s total deposits and spending
Introducing: Quick access bar on main screenNo more “I can’t find Zelle anywhere!!”
Convenient features:
-
Search: look up any amount & merchant
-
Filter & Sort: manage accounts that users want to display to protect privacy and prevent frauds
The Icons bar: Goal: Provide a ultimate You-can-do-everything-with-your-phone experience
↗️ Home Screen/ All accounts & Total Balance
Account Summary/ Insights
User’s Spending and Budget Summary is conveniently placed inside an accordion menu for an instant access:
-
Transactions are classified into different categories
-
A graph displayed monthly spending
User’s Spending and Budget Summary is conveniently placed inside an accordion menu for an instant access:
-
Transactions are classified into different categories
-
A graph displayed monthly spending
Account View
Display available account balance
& recap of total deposits and spending
Convenient features:
Search: look up specific transactions
Filter & Sort: display transactions based on time range, amount, merchants, etc.
Categorized transactions:
Daily transactions is labeled
Quick balance is displayed below each posted transaction for easier financial managing
↗️ eDeposit/ Deposit checks with mobile app
No more confusing eDeposit checks process.
Pose, snap, pose.
Check deposit instructions are now moved to the right column with a dark background.
When all requirements are met, check images will be automatically capture. Users will no longer have to struggle pressing “Capture” button while trying to put the check in frame.
Multiple checks? Bring'em on!
A clear & simple review
Users are now able to deposit multiple checks by choosing to upload up to five checks and put in their total dollar amount.
A now better UI with clearer form filling.
No more worrying about when the fund will be available with the new “Expected Available Date” feature.
CONCLUSION
The SchoolsFirst App Redesign was a fast-paced, one-week project, but in that short time, I was able to dive deep into research, sketching, and problem-solving to deliver a solution. Despite the tight deadline, every step was driven by a clear focus on the user's experience.
The biggest takeaway from this mini-project was the importance of viewing the design from the user's perspective—something that truly shapes effective UX/UI design. This experience reinforced how critical it is to understand user needs and behaviors in order to create meaningful, intuitive designs.
I’m excited to tackle more real-world app redesigns in the future, where I can continue honing my skills and delivering even more impactful user experiences.
.png)