Arival Bank (Web)
Send money flow
I redesigned the payment process from the ground up to make it faster and easier to follow. Shorter flow, restructured information architecture, and a clear review screen. Recurring payments got flexible settings, and a new timeline shows transaction details and status at every stage.
Over time, the one-time payment flow had become overloaded. Users faced repeated steps, a cluttered review screen, and limited control over recurring transactions. Transparency was also an issue. It was hard to tell where a payment stood or what came next. The goal was to shorten the flow, make statuses obvious, and give recurring payments proper settings.
The new flow became shorter, cleaner, and more predictable. Users completed payments faster and with fewer mistakes, and confusion during the review stage almost disappeared. That fed straight back into support: transfer-related questions dropped noticeably.
The challenge was turning a fragmented set of B2B requirements (roles, access rules, approvals, limits) into one simple, logical flow that works for both everyday users and complex business cases. Balancing clarity and flexibility was key.
Workflow
- 1 Audit
Pulled feedback from users, support, and stakeholders, then cross-checked it against analytics. The pattern was clear: repeated steps, a cluttered review screen, and almost no control over recurring payments.
- 2 Restructure
Regrouped fields to shorten the decision path. Rebuilt the review screen so everything is clear before sending. Designed recurring payment settings within the business rules for roles, limits, and approvals.
- 3 Prototyping and edge cases
Prototyped full end-to-end scenarios for single and recurring payments, then ran them with the team and real users. Each round caught something: an unclear label, a missed edge case, a step that still felt unnecessary.
- 4 Handover
Delivered Figma specs with every state and edge case, then stayed through design reviews and QA so the final build matched the intent.
Design solutions
- 1 Consistent review and success screens
I built one shared review and success pattern for all money-related flows, including Receive Money, Invoices, and Internal Transfers. One pattern to maintain instead of four, and a predictable experience across the product.
- 2 Recurring payments
Rebuilt recurring payments with flexible settings. Users can now control frequency, total number of transactions, and amounts independently, and clearer visual feedback makes it harder to set something up wrong.
- 3 Payment overview
A new overview screen shows all recurring payments, including frequency, dates, and total amounts. It gives users full visibility and makes it easy to manage ongoing transactions.
- 4 Sidebar navigation
A sidebar shows every step of the process, so users always know where they are in a multi-step flow. Less backtracking, less second-guessing.
- 5 Transaction timeline
Transaction details are now presented as a timeline that shows each payment’s history and current status. Over 40 statuses were unified into a clear, readable structure.
- 6 UX improvements and microinteractions
Tightened up the animations, transitions, and small interaction details across the flow: recipient selection, amount entry, field states.
Teammates module
I built the Teammates section from scratch: roles, permissions, invitations, approvals. The hard part was making access control powerful enough for real B2B teams while keeping it simple to use day to day. Owners grant exactly the rights that are needed.
The product had no way to manage team access. Owners couldn’t invite colleagues, assign roles, or control who could approve what. I needed to design all of that as one system that still felt native to the rest of the product.
Owners can now invite teammates, assign roles, set limits, and define approval rules per operation. Nobody gets access until it’s explicitly granted. The model is simple enough to read at a glance but flexible enough for complex company structures.
Designing a role model that’s flexible for complex B2B setups but doesn’t overwhelm someone who just wants to add a colleague. Finding that balance took several passes.
Workflow
- 1 Scoping
Mapped the scenarios with the business and ops teams: invitations, roles, access, approvals, activity tracking. Reviewed how other B2B products handle permissions and where their setups get hard to use.
- 2 Role model and flows
Two levels, Owner and Employee, with explicit permissions and nothing inherited by default. Built the invitation flow around temporary links. Made the admin path sequential, so it’s always clear what to set up next.
- 3 Prototyping and edge cases
Tested the main scenarios with the team and real users, then hardened the parts that break trust when handled badly: permission conflicts, role changes for active users, expired invites.
- 4 Design system and handover
Added the new patterns to the design system with all states (roles, access tables, invite statuses), then delivered specs and a full permissions matrix. Stayed on through reviews and QA.
Key screens and scenarios
- 1 Users list and statuses
The list shows every teammate with a clear status: Active, Invited, Inactive. Each row opens a detail card with that person’s info and the actions you can take.
- 2 Roles tab
Shows each role’s name, how many people have it, and a description. Owners can create, edit, or delete roles and add teammates right from here.
- 3 Activity log
A central log filtered by user, event, and date. It records sent transactions, recipient changes, and other key actions.
- 4 Add teammate flow
Step by step: enter their data, pick or create a role, set personal limits, review, confirm. The common case takes as few steps as possible.
- 5 Create role flow
Start with permissions (account access, payment approval), then name and describe the role, then review before saving.
Dashboard redesign
I led a full redesign of the dashboard: how users navigate, find key data, and handle their daily actions. Along the way we introduced modular widgets, standardized their structure, and added variables to the design system.
The redesign came during rapid company growth and a shift in positioning. We needed a modern, easy-to-use product: a better everyday experience, a refreshed design system, and room for the business to grow.
Core flows became faster and more intuitive. The new design system made features easier to ship, cut maintenance costs, and simplified extending navigation and components.
One of the toughest parts was rebuilding the product while creating a scalable design system from scratch. That meant revisiting a complex component library, unifying patterns, and introducing variables. Every screen had to be carefully migrated to keep things consistent across different user flows and product areas.
Workflow
- 1 Discovery and audit
Collected feedback from users, stakeholders, and support, then dug into analytics and ran a UX audit. The problems clustered around navigation, hierarchy, and content density, and the old layout had no room to grow.
- 2 Direction
Set the goals with the team: easier daily use, support for new business cases, and an interface aligned with the updated brand. Framed the redesign as concrete hypotheses and pressure-tested them against the technical and organizational constraints.
- 3 Design and prototyping
Rebuilt the information architecture and navigation, then prototyped the main screens and widgets and tested full journeys internally and with real users. A few feedback rounds later, the design system, key patterns, and tokens were locked in.
- 4 Handover
Delivered every component and spec in Figma, then stayed through design reviews and QA so the build matched the intent. The system keeps growing with new widgets and features.
Design solutions
- 1 Navigation and information architecture
The horizontal top menu moved to a left sidebar, which made navigation easier to scan and gave the layout room to grow. We removed the decorative illustration and freed up space for widgets. Accounts got their own section, so the dashboard focuses on summary data and quick actions while details live on separate pages. The account switcher stays in the top-left corner: one tap opens a menu to switch between companies and individuals, check the current plan, or jump to settings and teammates.
- 2 Typography
Simplified the text hierarchy and standardized spacing. Easier to read, easier to scan.
- 3 Widgets
- Available balance & Payments: now combined into one main widget with multi-currency support and quick actions for send, receive, internal transfer, and generate docs.
- Promo banner: a reusable, dismissible banner in the top-right corner, used across different promotions and announcements.
- Company limits: a new widget with the remaining monthly limit and a progress bar.
- Recipients: redesigned based on usage data, improving overview and quick access.
- 4 Status model
Updated the status model to reflect the user’s onboarding stage more accurately. A total of six statuses were revised.