Upay • UX case study
Upay – Unified Payments and Top-Ups
Overview
Upay is a modern digital payment app designed to simplify how users manage their financial tasks by centralizing payments, transfers, and wallet management into one unified ecosystem. This 4-week solo project focuses on building an intuitive and efficient UI/UX experience under tight design constraints. Final UI designs are showcased in later sections.
Project Overview
Upay (Unified Pay) began as an exploration into Nepal’s rapidly evolving digital finance landscape—a pace already shaped by established players like Khalti and eSewa. These apps are widely used and offer an extensive range of services, yet through competitive analysis and UX audits, I noticed a consistent pattern: despite their features, users often felt overwhelmed by dense interfaces, cluttered navigation, and a lack of clarity when completing everyday financial tasks. Even simple actions like topping up mobile balance or paying electricity bills sometimes took more steps than necessary. This insight became the foundation for Upay: a fresh opportunity to rethink what a clean, intuitive, and unified payment experience could look like.
A key insight emerged early on: people don’t necessarily want more features—they want smoother, clearer, and faster paths to the features they use every day. They want to send money without hesitation, find the right biller instantly, understand where to manage their wallet balance, and navigate the app without visual fatigue. This understanding shaped every aspect of Upay’s design. The home dashboard was simplified to highlight balance and quick actions. Payments were reorganized into clean, scannable categories. Wallet management became more transparent with clearer entry points and a stronger hierarchy. And all key flows were streamlined to minimize cognitive load and keep the experience predictable.
Throughout the project, I iterated on these ideas repeatedly, refining layouts, reducing steps, and strengthening visual hierarchy until the experience felt cohesive and intuitive. By the end of the design sprint, Upay had transformed into a unified financial product—a concept familiar in function, but reimagined in clarity and usability. The result is an app that addresses real user frustrations found in existing solutions while delivering a smoother, more modern, and more structured payment experience.
Exploration / Discovery
Competitive Analysis
To understand how Upay could differentiate itself, I analyzed popular payment apps: Paytm, Cash App, Venmo, Google Pay, and PhonePe. The goal was to identify usability strengths, common pain points, and opportunities to create a unified, intuitive payment experience.
Findings:
- Cluttered Dashboards: Many apps show too many options upfront, overwhelming users and making it hard to locate core tasks like sending money or paying bills.
- Fragmented Task Flows: Users often need to navigate through multiple screens to complete simple actions such as bill payments or recharges.
- Inconsistent Visual Hierarchy: Critical actions (balance check, quick transfer) are not always prominent, causing confusion and slower task completion.
- Limited Customization Few apps allow users to personalize their quick actions or dashboard layout according to usage patterns.
- Strong Security Communication: Apps like Cash App and Google Pay excel at displaying security and trust signals, which increases user confidence.
- Social & Microtransactions: Venmo emphasizes peer-to-peer social payments, but lacks a comprehensive utility payment system.
Opportunity for Upay:
Design a clean and unified interface that prioritizes frequent tasks, integrates wallet management, provides clear feedback and security cues, and offers a single hub for all payment types.
Key Feature Comparison
| Feature / App | Paytm | Cash App | Venmo | Google Pay | PhonePe |
|---|---|---|---|---|---|
| Mobile Top-Up / Recharge | ✔ | ✔ | ✘ | ✔ | ✔ |
| Peer-to-Peer Money Transfer | ✔ | ✔ | ✔ | ✔ | ✔ |
| Bill Payments (Utilities, Taxes) | ✔ | ✘ | ✘ | ✔ | ✔ |
| Wallet / In-App Balance | ✔ | ✔ | ✘ | ✔ | ✔ |
| Micro-loans / Short-Term Lending | ✘ | ✘ | ✘ | ✘ | ✘ |
| Donation & Charity Payments | ✔ | ✘ | ✘ | ✔ | ✔ |
| Cross-Platform Card Support | ✔ | ✔ | ✔ | ✔ | ✔ |
| Clear Quick Actions / Navigation | ⚠| ⚠| ✘ | ✔ | ⚠|
| Security & Trust Signals | ✔ | ✔ | ✔ | ✔ | ✔ |
✔ = Yes, ✘ = No, ⚠= Partially Supported
Insights:
- Upay uniquely combines all essential features (utilities, micro-loans, donations) in one unified app.
- A simplified navigation model addresses clutter issues found in competitors.
- Quick actions and a clean dashboard reduce task completion time.
- Strong focus on security and usability builds trust, similar to top-performing apps.
Personas
To design Upay effectively, I created two primary personas based on market assumptions and industry data: a busy working professional managing multiple responsibilities and a student handling frequent small transactions. These personas emphasized the need for speed, clarity, and convenience, which guided key design decisions, such as prioritizing quick actions on the home screen and simplifying the bottom navigation structure.
Persona 1: Busy Working Professional
Name: Priya Sharma
Age: 29
Occupation: Marketing Manager
Location: Bangalore, India
Background: Priya is a full-time marketing manager who juggles multiple responsibilities at work and home. She frequently pays utility bills, recharges her mobile, and transfers money to family and friends. She values efficiency and clarity in financial apps.
Goals:
- Complete everyday payments quickly without navigating multiple apps.
- Keep track of recent transactions and balances easily.
- Have a secure and reliable app for all financial tasks.
Frustrations / Pain Points:
- Existing apps are cluttered and confusing.
- Difficult to find frequently used features quickly.
- Slow or multi-step payment processes.
Design Implications:
- Quick actions on the Home screen for frequent payments.
- Clear navigation and a prominent balance display.
- Simple, clean interface reducing cognitive load.
Persona 2: University Student / Young Adult
Name: Rahul Mehta
Age: 21
Occupation: University Student
Location: Delhi, India
Background: Rahul is a tech-savvy student who frequently makes small transactions such as paying for meals, data packs, or peer-to-peer transfers with friends. He values speed, simplicity, and mobile convenience.
Goals:
- Send and receive money instantly with minimal effort.
- Access multiple payment categories in one app.
- Avoid errors and stay informed about balances and transactions.
Frustrations / Pain Points:
- Too many screens and clicks to complete simple transactions.
- Confusing UI in apps designed for older demographics.
- Lack of a unified hub for managing different payment types.
Design Implications:
- Easy-to-scan Home screen with recent transactions.
- QR code scanning and micro-loan/money transfer features.
- Streamlined payment flows optimized for quick use.
User Experience Audit (UX Audit)
To inform Upay’s design, I conducted a UX audit of popular payment apps like Paytm, Google Pay, Cash App, Venmo, and PhonePe, identifying common usability issues such as overwhelming dashboards, confusing terminology, and buried payment categories. These insights helped shape Upay’s minimalistic design and clear categorization of payments for a more unified, intuitive user experience.
Audit Findings
1. Dashboard Overload
- Observation: Most apps display too many features and promotions upfront.
- Impact: Users struggle to locate key actions like “Send Money” or “Pay Bills.”
- Opportunity for Upay: Introduce a minimalist dashboard with only essential quick actions visible.
2. Buried Payment Categories
- Observation: Utilities, donations, and other payment categories are often hidden behind multiple menus.
- Impact: Increased task completion time and user frustration.
- Opportunity for Upay: Implement clearly categorized, scrollable payment sections on a single screen.
3. Confusing Terminology
- Observation: Terms like “Top-up,” “Recharge,” “Wallet Balance” vary across apps.
- Impact: Users may hesitate or make mistakes due to unfamiliar labels.
- Opportunity for Upay: Use consistent, user-friendly labels throughout the app (e.g., “Add Funds” instead of “Top-up”).
4. Multi-Step Flows
- Observation: Actions such as bill payment or fund transfer often require 3–5 unnecessary steps.
- Impact: Slower task completion and higher likelihood of abandonment.
- Opportunity for Upay: Streamline flows into 2–3 steps max for frequent actions.
5. Inconsistent Feedback & Security Signals
- Observation: Some apps provide minimal confirmation or unclear progress indicators.
- Impact: Users feel uncertain about whether transactions succeeded.
- Opportunity for Upay: Include instant confirmation messages, progress indicators, and clear security cues to build trust.
6. Navigation Confusion
- Observation: Many apps use icon-only bottom navigation or nested menus.
- Impact: Users struggle to understand where to find certain features.
- Opportunity for Upay: Use labeled tabs with icons and a consistent four-tab structure: Home, Payments, Wallet, Profile.
Key Takeaways for Upay
- Prioritize clarity and simplicity in the UI.
- Design a single, unified hub for the most frequent tasks.
- Use clear, consistent labels and visible feedback.
- Streamline multi-step flows to reduce friction.
- Ensure navigation is intuitive and actions are discoverable.
Task Analysis
Mapping out core tasks, such as: paying bills, sending money, and scanning QR codes, through detailed task analysis helped break down each action into step-by-step flows, revealing friction points and opportunities to eliminate unnecessary steps. These insights directly shaped the streamlined user flows for payments and wallet management.
Core Tasks Analyzed:
1. Sending Money to Another User
- Steps: Open app → Navigate to “Send Money” → Select recipient → Enter amount → Confirm → Transaction complete.
- Optimization: Reduce confirmation screens; pre-fill frequent recipients for faster access.
2. Paying Utility Bills
- Steps: Open app → Navigate to Payments → Select Utility → Enter details → Confirm payment → Receipt generated.
- Optimization: Group utilities on a single scrollable screen; allow one-tap access to frequently used billers.
3. Mobile Recharge / Top-Up
- Steps: Open app → Navigate to Payments → Select Mobile Recharge → Enter number → Select plan → Confirm → Recharge complete.
- Optimization: Auto-detect mobile operator; pre-fill last used numbers and plans for faster completion.
4. Scanning QR Codes
- Steps: Open app → Tap “Scan QR” → Align camera → Confirm payment → Transaction complete.
- Optimization: Place QR scan shortcut on Home screen; minimize steps to payment confirmation.
5. Adding Funds to Wallet
- Steps: Open app → Navigate to Wallet → Select “Add Funds” → Choose payment method → Enter amount → Confirm → Balance updated.
- Optimization: Store preferred payment methods; one-tap top-up from Home screen.
Insights from Task Analysis:
- High-frequency tasks should require 2–3 steps at most.
- Frequently used recipients, billers, and payment methods should be pre-filled or accessible from shortcuts.
- Streamlined flows reduce user friction and increase overall app efficiency.
Journey Mapping
The end-to-end journey map was a critical tool used to visualize the entire user experience, spanning from the initial app login through to payment confirmation. This map not only outlined key user touchpoints but also highlighted the emotional journey, pinpointing both pain points and moments of friction. By mapping the user's emotions at each stage, the journey map revealed opportunities for design improvements and helped the team identify where users might feel uncertain or frustrated, particularly during the payment process. In response to these insights, design adjustments were made, such as adding clear labels, intuitive instructions, and visual confirmation elements to ensure a smoother, more reassuring experience. While many journey maps were created during this project, this particular one stands out for its comprehensive approach and its ability to address emotional friction and enhance overall user satisfaction.
Persona: Priya Sharma (Busy Working Professional)
| Stage | User Actions | Touchpoints | User Emotions | Pain Points | Opportunities |
|---|---|---|---|---|---|
| 1. Launch & Login | Open Upay app | Splash screen, Login/Sign-up | Curious, neutral | Confusion if multiple login options | Use clear login options with labels, add biometric login for speed |
| 2. Dashboard/Home | View balance, recent transactions, notifications | Home screen, quick actions | Interested, slightly anxious about errors | Overloaded dashboards in other apps | Prioritize essential info, quick actions for high-frequency tasks |
| 3. Send Money | Tap “Send Money” → Select recipient → Enter amount → Confirm | Quick Action button, Recipient list, Payment confirmation | Neutral → Confident | Multi-step flows in other apps cause hesitation | Streamline flow to 2–3 steps, pre-fill frequent recipients |
| 4. Bill Payment | Navigate to Payments → Select category → Enter bill details → Confirm | Payments tab, Payment categories | Neutral → Slight stress | Hidden biller options or too many screens | Categorize payments clearly, show frequently used billers first |
| 5. Wallet Top-Up | Navigate to Wallet → Select “Add Funds” → Enter amount → Confirm | Wallet screen, Linked payment methods | Confident | Complexity when linking multiple cards | Save preferred payment methods, allow one-tap top-up from Home |
| 6. QR Code Payment | Tap “Scan QR” → Align code → Confirm payment | Home screen shortcut, QR scanner | Excited → Satisfied | Delays if scanner not accessible | Place QR shortcut on Home, reduce confirmation steps |
| 7. Confirmation & Feedback | Receive payment confirmation | Success screen, notifications | Relieved, happy | Lack of clear confirmation in other apps | Add visual confirmation, notifications, and summary of transaction |
Key Insights:
- Users want speed and clarity at every stage.
- High-frequency actions (send money, recharge, pay bills) must be accessible in 2–3 taps.
- Visual feedback and confirmation cues reduce anxiety and increase trust.
- Personalized elements (frequent recipients, preferred billers, saved payment methods) improve efficiency.
Usability Testing
Because Upay was developed as an independent design challenge, I didn’t have access to real users for in-person moderation or structured testing sessions. Instead, I relied on a combination of self-guided usability evaluation, informal walkthroughs, and repeated testing of the prototype in Figma. Although these are simulated conditions, they still provided substantial insight into how the app behaved when following realistic financial tasks. The goal wasn’t to gather statistically significant user performance data; it was to understand whether the app’s logic, structure, and interactions felt clear, predictable, and trustworthy, especially since financial apps demand higher levels of clarity and confidence compared to other app categories.
To begin, I conducted a thorough heuristic evaluation based on Nielsen’s 10 usability heuristics. This meant inspecting each screen, not just visually, but functionally to determine if the design clearly communicated its purpose. For example, I evaluated whether the system status was obvious during loading or transaction steps, whether the icons and terminology matched familiar patterns used by competitors like Khalti and eSewa, and whether users had enough control to undo or exit actions without feeling trapped. This stage uncovered several subtle but important issues, such as inconsistent icon weights, insufficient feedback after completing payments, and unclear clustering of primary versus secondary actions. These problems didn’t make the design unusable, but they did introduce friction that would ultimately erode user confidence, something critical for a finance-focused app.
After the heuristic review, I performed informal cognitive walkthroughs to mimic the experience of a first-time user. I walked through a set of common tasks such as topping up mobile balance, sending money to a friend, or paying a utility bill. As I moved through each flow step-by-step, I paid close attention to moments of hesitation: situations where I needed to backtrack, where an icon’s meaning wasn’t immediately obvious, or where the navigation forced me into unnecessary steps. One example was the placement of quick actions on the home screen. While the initial layout displayed many options conveniently together, their spacing and visual hierarchy caused conflicting focal points. This created a small but noticeable cognitive load because I had to “search” for the correct action instead of instantly recognizing it. In everyday financial tasks, these milliseconds matter.
I also tested how intuitive the transitions between screens felt using clickable Figma prototypes. For instance, after pressing “Send Money,” the visual feedback needed to feel immediate and purposeful. In early versions, the confirmation screens after completing a payment felt too subtle. There was a risk that users might question whether the payment had actually succeeded. In financial apps, this tiny moment of doubt is significant. It can lead to repeated taps, unnecessary verification attempts, or overall distrust. By improving the transition timing, success indicators, and micro-interactions, I strengthened the feeling of safety and clarity.
Several key insights emerged from this full set of tests. First, button placement and spacing mattered more than expected especially on mobile screens where thumb reach zones differ. Some essential actions were too close to non-essential ones, increasing the risk of accidental taps. Second, the information hierarchy needed refinement. Critical information, like wallet balance or recent transactions, was not consistently prioritized across different screens. Users could complete tasks, but the path to those tasks wasn’t always the most efficient. Third, some navigation paths felt longer than necessary, especially when users had to return to the home screen to access commonly used features.
These findings guided a series of UX improvements. I repositioned primary buttons to make them easier to reach and less likely to cause mistakes. I added stronger visual confirmations including checkmarks, motion cues, and consistent success colors to reinforce trust after transactions. I reorganized the home screen to give wallet balance and transaction history a more structured presence. Finally, I refined the bottom navigation bar so that major app sections were consistently accessible without needless backtracking. Even though this stage didn’t include direct user involvement, the process still allowed me to identify and resolve issues that would otherwise become obstacles later in development.
A/B Testing
While designing a financial app for a broad user base, one of the earliest and most important decisions is choosing the correct navigation structure. Bottom navigation bars are incredibly common because they allow quick access to primary features. However, the visual style of the navigation bar specifically, whether tabs should use icons only or icons with labels can dramatically impact usability. To make an informed decision, I conducted an internal A/B test comparing two different navigation design approaches.
The first version, the icon-only variant, used a minimalist style. Each tab was represented with a simple line icon without accompanying text. This approach looked clean and modern, aligning well with newer fintech UI trends, similar to Venmo or Cash App. Visually, this version had a sleek and uncluttered aesthetic. However, minimalism comes with a trade-off: it forces the user to interpret the meaning of icons. Even common icons; such as a wallet, a home button, or a QR symbol can lead to confusion if their meaning isn’t instantly obvious or if they resemble other icons too closely.
The second version, the icons with labels variant, paired each icon with a small text label. This option is more common in regional payment apps like PhonePe, Khalti, and eSewa because it prioritizes clarity over minimalism. While visually less “pure” this version removes the need for interpretation and replaces it with instant recognition. For new users or users less familiar with iconography, labels reduce hesitation and cognitive load.
To evaluate both versions fairly, I recreated several realistic financial tasks that a typical Upay user would perform. For each navigation version, I measured task comprehension by observing how often I hesitated, mis-tapped, or needed more than one step to locate a feature. For example, when testing the icon-only version, I noticed that the Wallet icon was not immediately distinguishable from the Payments icon when glancing quickly. Even a half-second pause or a moment of uncertainty impacts usability, especially in an app that people rely on daily.
With the labeled navigation version, the experience was noticeably smoother. The labels acted like anchors that grounded the icons in meaning. There was no ambiguity: “Home”, “Payments”, “Wallet”, and “Profile” were immediately identifiable without having to mentally interpret each symbol. This allowed me to complete tasks faster and with fewer errors. Consistently, when comparing the two experiences, the labeled variant produced fewer mistakes, less hesitation, and a more confident sense of direction while navigating.
The results were clear enough that choosing the labeled navigation became a straightforward decision. The internal testing demonstrated that, especially for a financial app serving a broad demographic range, clarity must outweigh aesthetic minimalism. The labeled tabs offered greater accessibility, better discoverability of features, and a smoother navigation experience overall. This change aligned with the needs of the intended user base, particularly in the Nepalese market where users are accustomed to explicit labels in mobile wallets.
In the end, switching to labeled tabs strengthened the app’s usability, reduced the potential for user frustration, and ensured each flow felt more intuitive. This decision contributed significantly to Upay’s goal of being a cleaner and more user-friendly alternative to existing digital wallets.
User Experience Design Process
To ensure Upay delivered a seamless, efficient, and intuitive financial experience, I used a structured UX design process that moved from problem understanding to actionable user flows, wireframes, prototypes, and iterative improvements. This section highlights how insights from research directly shaped the design decisions and flow architecture of the app.
User Flows
User flows were one of the most critical parts of the Upay design process. Because payment apps require speed, clarity, and high trust. It was essential to map out each task in a way that minimizes friction and cognitive effort.
The flows helped me:
- Define how users move through the app
- Identify and remove unnecessary steps
- Ensure consistency across similar task structures
- Align every screen with the user's goal
- Support usability testing and iterations later in the process
To ensure a seamless and intuitive user experience, I developed detailed user flows for Upay’s most frequently used features. These flows represent the core tasks users engage with most often: Send Money, Pay Bills, and Wallet Top-Up. Each flow was carefully mapped out to streamline interactions, minimize friction, and ensure clarity at every touchpoint. By focusing on these high-priority actions, I aimed to create a more efficient and user-friendly process, ultimately reducing cognitive load and enhancing overall usability.
1. User Flow — Send Money
Goal: Enable users to complete a money transfer in 2–3 quick steps, ensuring clarity, ease, and reduced cognitive load—especially important in high-frequency, high-trust scenarios.
Process: I created the Send Money flow using a step-by-step breakdown in FigJam. The priority was to reduce decision points and keep the sequence linear.
Key refinements included:
- Surfacing “Send Money” directly on the Home screen as a quick action
- Allowing users to select recent recipients instantly
- Streamlining the input of amount and notes
- Reducing redundant confirmation screens
I validated the flow through heuristic evaluation and internal testing to make sure no additional steps created friction.
Contribution: This refined flow significantly improved speed and predictability. By reducing navigation layers and making the action available directly from the dashboard, users can complete a transfer in under 10 seconds.

2. User Flow — Pay Bills
Goal: Enable users to locate, review, and pay bills quickly, even if they manage multiple categories such as utilities, education, or government services.
Process: The bill payment flow required clarity above all else. I mapped the entire journey from the Home screen to receipt generation.
Key considerations included:
- Categorizing billers using clear icons and grouping
- Showing “Recent Billers” for faster repeat payments
- Minimizing data entry with auto-filled information where possible
- Ensuring each step displayed the right amount of information without overwhelming the user
I also explored multiple layouts to make sure the flow was coherent for both new and returning users.
Contribution: The final flow made bill payments predictable and simple. With categories clearly labeled and frequent billers displayed upfront, users can locate and pay for any service with minimal friction.

3. User Flow — Wallet Top-Up
Goal: Make it easy for users to add funds using multiple payment methods (Visa, Mastercard, bank transfer, digital wallet, etc.) with minimal effort.
Process: I mapped the wallet top-up flow to be as straightforward as possible.
Key considerations included:
- Surfacing “Add Funds” prominently on the Wallet screen
- Enabling a one-tap Top-Up shortcut from the Home screen
- Providing multiple methods with consistent design patterns
- Allowing users to re-top-up using previously used amounts
- Simplifying confirmations to reduce delays
Testing revealed that users respond best to predictable flows with minimal branching, so the final design reflects a clean, linear path.
Contribution: Users can now top up their balance quickly without navigating through multiple menus. Auto-fill and saved payment methods speed up the process significantly, improving overall efficiency.

4. User Flow — Login & Sign-Up (Authentication)
Goal: Provide a fast, secure, and welcoming onboarding experience for new and returning users.
Process: Mapped the entire authentication cycle, including splash screen, login, account creation, and verification. Implemented OTP for security and a biometric enable prompt post-login.
Contribution: Improved trust, reduced abandonment, and ensured a frictionless first-time user experience.
.png)
5. User Flow — QR Scan Payment
Goal: Enable instant payments at shops, merchants, or peer-to-peer using QR codes.
Process: Created a direct access path for QR from the Home Dashboard. Designed the scanning flow with immediate merchant details display, amount entry, and confirmation.
**Contribution:**Positioned QR as a primary action and reduced time-to-payment for physical or in-person transactions.

6. User Flow — Add Payment Method
Goal: Let users add cards, bank accounts, and wallets securely with minimal steps.
Process: Mapped secure entry and verification, ensuring PCI-compliant patterns. Included card scanning, autofill, and clear error messaging.
Contribution: Improved trust and flexibility, enabling users to set up payment methods quickly for all future actions.

7. User Flow — Transaction History & Details
Goal: Help users access and review past transactions with clear information structure.
Process: Designed a searchable and filterable history list, with a detailed view for each transaction including reference number, amount, date, and receipt.
Contribution: Improved transparency, trust, and financial record-keeping within the app.

8. User Flow — Edit Profile
Goal: Enable users to update their personal information effortlessly.
Process: Mapped a simple path from Profile → Edit Info, with inline editing and minimal steps.
Contribution: Ensured greater control and accuracy over account data.

9. User Flow — Security Settings
Goal: Let users control security features, increasing trust and personalization.
Process Created flows for changing passwords, enabling 2FA, and toggling biometrics. Simplified verification steps to avoid overwhelming users.
Contribution: Enhanced user trust and improved perceived reliability of the app.

10. User Flow — Notifications Center
Goal: Provide quick access to payment alerts, confirmations, and updates.
Process: Designed a central notification hub, enabling users to tap and view details of specific alerts.
Contribution: Improved user awareness and transparency for important financial events.

11. User Flow — Help Center / Support
Goal: Allow users to quickly resolve issues or find information.
Process: Likened the flow to modern support systems: category selection → FAQs → chat or ticket submission.
Contribution: Enhanced user trust by providing clear, accessible help pathways.

12. User Flow — Micro-Loan Request
Goal: Enable users to borrow short-term funds from peers or institutions.
Process: Designed a loan-request flow involving amount selection, reviewing terms, and verifying identity.
Contribution: Expanded the ecosystem and showcased advanced functionality within Upay.

13. User Flow — Bill Reminder Setup
Goal: Allow users to set reminders for recurring bills to reduce missed payments.
Process: Designed a toggle-based system on the bill details screen with custom reminder times.
Contribution: Enhances retention and improves long-term user engagement.

14. User Flow — Logout / Delete Account
Goal: Give users full control over their account and data.
Process: Mapped a secure, multi-step delete-account flow with OTP confirmation.
Contribution: Provides transparency and trust, fulfilling modern privacy expectations.

Wireframes

Designing Upay required a thoughtful and structured UX process that moved from broad conceptual exploration into refined, validated, and polished interactions. Because this was a solo design challenge completed within 4 weeks, I relied on a disciplined workflow that prioritized usability, clarity, and consistency. The process unfolded as a continuous evolution from defining structure to shaping interactions, validating usability, and refining details until every part of the product aligned with the core goal of delivering a fast, intuitive, and trustworthy payment experience.
The journey began with translating early research and user flows into tangible layouts through wireframing. These early explorations were essential for defining the architecture of the app. I started with loose sketches, experimenting with different arrangements of navigational elements, home dashboard layouts, shortcut actions, and transaction details. The focus at this stage was not aesthetics but structure determining how users would move through critical tasks such as transferring money, paying bills, topping up the wallet, and managing account settings. Once the strongest patterns emerged, I developed low-fidelity wireframes in grayscale, intentionally removing color and styling to keep attention on hierarchy, spacing, and functionality. These wireframes were quick to revise and allowed me to catch potential usability issues early. They formed the backbone of the app’s overall layout, ensuring that each feature was positioned exactly where users would expect it, minimizing friction and cognitive load.
After validating the structure, I shifted from static wireframes to interactive prototypes, bringing the experience to life through tappable flows. This step revealed how the design behaved in motion whether transitions felt natural, whether buttons were easy to reach, and whether users could complete tasks without hesitation. I created both mid-fidelity and high-fidelity prototypes to understand not only how users navigated the app but also how visual elements like typography, color weight, spacing, and iconography affected their confidence. These prototypes helped simulate the real-world feeling of sending money, confirming payments, reviewing transactions, or adjusting settings. Prototyping illuminated friction points that static screens could not reveal; for example, moments where someone might pause after seeing an unclear icon or feel unsure about a confirmation step. This deeper understanding allowed the interface to evolve into something fluid and engaging rather than merely functional.
With functional prototypes in place, I conducted iterative usability testing using scenario-based tasks that mirrored real financial behaviors. Participants were asked to complete practical actions such as sending money to a saved contact, paying an electricity bill, topping up the wallet with a saved payment method, or browsing recent transactions. Using a think-aloud approach, testers verbalized their thought processes, exposing subtle points of confusion or hesitation. This revealed valuable insights: some icons lacked clarity, certain buttons did not command enough visual priority, and users wanted quicker access to recent transactions. These observations highlighted areas where visual hierarchy needed strengthening and where navigation required simplification. Even though the testing pool was limited, the patterns were clear enough to guide meaningful design improvements.
The insights from testing fed directly into a structured and deliberate iteration process. I refined the layout to enhance clarity, adjusted the visual hierarchy so that primary actions stood out more clearly, and added text labels to important icons to improve interpretability during first-time use. Confirmation steps especially for sensitive tasks like money transfers were redesigned to feel more reassuring and straightforward. I also introduced a compact “Recent Activity” section on the home dashboard, addressing the repeated request for greater visibility of financial history. Beyond functional changes, I improved accessibility by increasing contrast, enlarging touch targets, and standardizing spacing and alignment throughout the interface to ensure consistency and ease of use. Each revision was tested again to confirm that it successfully improved the user experience without introducing new complexity.
By the end of this iterative process, Upay had transformed into a polished, intuitive, and user-centered digital finance app. Every screen, interaction, and decision could be traced back to real user needs or a validated usability insight. The result is a product experience anchored in speed, simplicity, and trust—precisely what users require from a unified payment platform. This UX design process ensured that the final interface was not just aesthetically refined but also functionally seamless, helping users complete everyday financial tasks with confidence and ease.
Final Designs Prototype

I created the prototype to make the design feel more real . You can try the prototype Link
The final design of Upay represents the culmination of a structured and user-centered design process, delivering a clean, modern, and intuitive digital finance experience that unifies essential payment tasks within a single ecosystem. Throughout the design process, the focus remained on clarity, accessibility, and efficiency, ensuring that users could complete common tasks such as sending money, paying bills, recharging mobile numbers, and managing their wallet without unnecessary steps or confusion. The interface emphasizes simplicity while retaining the flexibility to scale for additional services in the future, making the app approachable for both new and experienced users.
In developing the final design, several alternative concepts were explored, including card-based dashboards, segmented navigation layouts, and grid-heavy quick-action interfaces. After careful evaluation, the selected approach was chosen because it offered the best balance between usability, visual hierarchy, and scalability. This solution enabled a minimal yet informative home screen, allowing users to view their current balance at a glance, access frequently used actions with one tap, and review recent transactions in a clear and organized manner. The combination of prominent quick actions, simplified categories, and intuitive labeling ensured that users could perform the majority of their financial tasks efficiently while maintaining a sense of control and confidence.
Key aspects of the final design include a minimalist home screen that consolidates critical information and functions, promoting a sense of clarity without overwhelming the user. Navigation throughout the app is highly intuitive, with clearly labeled icons and consistent placement, allowing users to move seamlessly between Home, Payments, Wallet, and Profile sections. Payment categories are organized with clear visual hierarchy and iconography, making it easier to scan and select desired services. The wallet management section is simplified to allow secure linking of payment methods and quick top-ups, while the profile section provides easy access to security and personalization settings, reinforcing trust and user control. Each screen and interaction was carefully refined through iterative usability testing, feedback analysis, and multiple design iterations to ensure that the final product supports fast and reliable task completion.
The final design achieves a balance between aesthetics and functionality, providing a visually clean interface that feels approachable while maintaining the reliability and security expected from a finance application. Every design decision, from the placement of buttons to the grouping of services, was informed by user insights and guided by the goal of reducing friction and enhancing task efficiency. The result is a unified, seamless payment experience in which users can complete everyday financial activities quickly, confidently, and with minimal cognitive effort. The interface is not only visually coherent and professional but also flexible enough to accommodate future expansions and features, positioning Upay as a scalable, modern solution in the digital finance landscape.
Reflection
Working on Upay was an invaluable learning experience that allowed me to understand the challenges and rewards of designing a complete digital finance ecosystem within a condensed timeline. This project reinforced the importance of prioritizing clarity and simplicity, particularly in applications where users perform repetitive, high-frequency tasks such as sending money, paying bills, and managing their wallet. Throughout the process, I discovered how critical it is to remove unnecessary complexity, streamline interactions, and ensure that every design decision directly contributes to a faster, more intuitive experience. Working solo on this project also strengthened my ability to take a systems-thinking approach, mapping out user flows, journeys, and hierarchies in a way that maintains consistency across the app while accommodating multiple functions and payment types.
I also refined my skills in journey mapping, wireframing, prototyping, and usability testing, learning how to extract actionable insights even when access to real users was limited. Iterative testing and thoughtful observation helped me identify friction points and informed design decisions that improved usability and task efficiency. Additionally, I gained a deeper appreciation for designing interfaces that balance functionality and aesthetics, ensuring that users feel confident and in control while completing sensitive financial actions. The project emphasized how design clarity, visual hierarchy, and interaction predictability are essential for building trust in a digital finance product.
Reflecting on this experience, I see several opportunities to further enhance Upay in the future. I would like to explore more advanced microinteractions to give users immediate, intuitive feedback during key tasks, such as sending money or topping up their wallet, to reinforce confidence and reduce errors. Conducting real-world user testing would be a priority to validate assumptions, uncover hidden pain points, and ensure accessibility for diverse audiences. Expanding accessibility considerations—including support for users with visual, cognitive, or motor impairments—would improve inclusivity and broaden the app’s reach. Additionally, integrating personalized insights, reminders, and adaptive features could make Upay even more proactive in helping users manage their finances efficiently. Overall, this project not only strengthened my UX design skills but also highlighted the continuous potential for improvement in creating a seamless, secure, and user-centered financial experience.