Usyra – Finance Web App
UI & UX design case study – Responsive web app design
Platform
Responsive web application built for desktop, tablet, and mobile.
My Role
Product Designer – UI/UX
Duration
9 months in 2025 while in CareerFoundry's Product Design Program.
Tools
Figma, Adobe Photoshop, Adobe Illustrator, Google Forms, Zoom Video Meetings, Google Meet, WhatsApp.
About this project
Usyra is a user-centered financial web app designed to make everyday money management feel simple, secure, and trustworthy. It reduces friction in digital payments so users stay informed, confident, and in control. Usyra targets users aged 16–45, mainly professionals, freelancers, and small business owners who need secure, rapid, and transparent money transfers.
Overview
Usyra helps users send money, review transactions, manage payment methods, and adjust security settings through a clean, consistent interface. It's built around three key features: quick and secure money transfers, an integrated banking hub, and smart notifications and security alerts.
The story
Usyra was created to solve common finance-app frustrations — unclear transaction feedback, complex onboarding, and trust concerns. Through iterative design it evolved into a calm experience powered by biometric sign-in, device verification, key-locker protection, end-to-end encryption, real-time alerts, and easy bill-splitting for everyday use.
Design Process
Eight phases — from research to a tested, shippable product.
Understand
Problem
- ▶Security concerns.
- ▶Complex onboarding.
- ▶Lack of trust.
- ▶Slow processing time.
- ▶Inconsistent experience across devices.
Solution
- ▶Biometric authentication + End-to-End encryption.
- ▶Guided user-friendly onboarding.
- ▶Transparent security controls + clear confirmations.
- ▶Real-time transfer status + faster flow feedback.
- ▶Consistent responsive design system.
Problem Statement
Usyra users need a secure, sensible way to do business because they fear online fraud, find traditional payment methods inconvenient, and want a faster, more convenient way to split payments and send money.
Solutions meet their expectations with enhanced security features, seamless onboarding, and seamless income allocation.
Competitive Analysis
I have analyzed Usyra's two competitors Wise and Western Union based on their market presence and features.
A deeper competitive analysis was performed on Wise.
Competitor Comparison
SWOT — Snapshot
Wise
STRENGTHS
Transparent pricing, user-friendly UX
WEAKNESSES
Digital-only, internet dependent
Western Union
STRENGTHS
Global reach, physical presence
WEAKNESSES
Higher fees, slower digital evolution
Early assumptions — Evidence quotes
Wise
“Users trust platforms that are transparent about fees and transfers.”
Western Union
“Traditional services feel reliable but slow and expensive.”
Pov
Primary Persona — Jahid
Jahid represents our core user: a migrant professional sending money home twice a month. His goals are speed and certainty; his frustrations are hidden fees and unpredictable arrival times.
User Journey
User Statement
A busy user who cares about trust needs a simple and safe way to manage their money. Right now, financial apps are hard to understand, don't work the same way on all devices and are risky, which makes it impossible to know where their money is.
Ideate
User Flow
Information Architecture
Early concept ideas
During ideation, I explored multiple directions including security-first interactions, simplified onboarding, transparent transactions, consistent multi-device layouts, and a calm visual language. These concepts were refined and combined into the final Usyra experience.
Test
Usability testing plan
Key findings
A/B testing results
Iteration Highlights
User Insights
Login – before
User 3: It looks clean. I prefer centring the beginning text "Welcome to Usyra".
Final Solutions
login – after
Center-aligned the intro text "Welcome to Usyra".
User Insights
notifications bar – before
User 2: Notification read/unread is not clear.
Final Solutions
notifications bar – after
Unread notifications are now bold for better visibility.
User Insights
send money – before
User 2: I didn't understand in first look what is delivery option.
Final Solutions
send money – after
Labelled with "Select Payment Method" to make the process clearer.
Prototype
Three of the highest-traffic screens were prototyped and iterated against the research findings. Each was refined until task success climbed above 90%.
Final High-Fidelity Screens
Tell story
Layout Decisions
A clear layout and consistent spacing reduce load, while highlighted primary actions support quick task completion.
Color & Trust
A calm violet palette builds trust and professionalism, while accent colors highlight key actions and states.
Typography & Readability
Clear typography improves readability across devices. Strong headings guide attention and comfortable spacing makes financial content easier to scan.
Brand Identity & Emotional Design
The U-shaped Usyra logo and Google Material Symbols create a friendly, modern feel and build user confidence.
Accessibility Considerations
Accessibility influenced color contrast, font sizing and touch target spacing to ensure the interface remains usable for a wide range of users. Including first-time and low-confidence users.
Present
The shipped product collapses the remittance flow into four key moments — sign in, review balance, send, and verify activity.
Video Walkthrough
Product Walkthrough & Design Explanation
A walkthrough of the final Usyra interface. Explaining key design decisions, core flows and usability improvements based on user feedback.
Summary of Outcomes
The final solution delivers a clear, trust-focused financial UI/UX interface. Improves task flow and user confidence and validates key design decisions through user testing.
Next Steps
Future improvements include AI-driven financial insights to support smarter decisions, a business analytics dashboard for deeper financial tracking and mobile app expansion to enable convenient on-the-go use.