Web App Dashboard FinTech Design System

Rise — Payments & Compliance Platform

A complete visual overhaul of a web3 fintech platform — enabling companies to pay contractors in fiat or crypto while ensuring regulatory compliance across countries and currencies.

Role Product Designer
Industry FinTech / Web3
Tools Figma, Tailwind CSS
Scope End-to-End Redesign
Rise Payments & Compliance Platform — Full Dashboard Overview

Rise is a payments and compliance platform that enables companies to pay contractors globally in fiat or crypto — while staying fully compliant across jurisdictions.

As Rise scaled rapidly, they needed more than a facelift — they needed a design language that communicated trust, modernity, and web3-native credibility. The engagement encompassed user onboarding, team dashboard, funding and withdrawal features, and Rise ID — all while building a scalable Tailwind-based design system for engineering independence.

Rise Platform — Desktop Interface Mockups

Rise had a powerful product — but the interface didn't match the ambition. Users found onboarding confusing, the visual language felt dated, and the design-to-dev pipeline slowed every sprint.

Complex Workflows

Financial processes that confused users and reduced confidence in making payment decisions across fiat and crypto.

Outdated Visual Language

The existing interface lacked the modern fintech aesthetic needed to compete with industry leaders and build trust.

Engineering Bottleneck

Design-to-dev handoff was fragmented — no shared token system, no Tailwind alignment, and designers were needed for every UI decision.

Before touching any UI, we established three core principles to guide every design decision throughout the project.

01

Native to Web3

The product should feel native to the web3 crypto space — modern, bold, and forward-thinking in every interaction.

02

Inclusive Design

Design should serve both crypto newcomers and experienced users with equal clarity and confidence.

03

Clear Actions

Key user actions needed to be obvious and confidence-inspiring — especially for high-stakes financial decisions.

Full Product Redesign

A complete overhaul spanning onboarding, dashboard, identity, and financial workflows.

Rise — Full Product Redesign Overview

The first impression matters — especially in fintech where trust is earned in the first 60 seconds.

The existing onboarding was described internally as "arduous and confusing." We transformed it into an engaging, easy-to-follow process that guides users through identity verification and account setup with visual delight at every step — reducing drop-off and building confidence from the start.

Rise — Web & Mobile Responsive Design
Responsive design across web and mobile breakpoints

Navigation restructured from horizontal to vertical — dramatically improving mobile usability and scalability.

The new menu architecture introduced Rise ID balance display at the top, a team switcher for multi-org users, and a light/dark mode toggle. The vertical layout scales naturally as Rise adds new product areas, while remaining instantly scannable.

Rise — Mobile Menu Design with Vertical Navigation
Mobile menu with Rise ID balance, team switcher, and dark mode toggle

The command center — expanded financial metrics for complete visibility into account activity, payments, and balances.

We redesigned the dashboard to surface critical financial information at a glance — active balances, recent transactions, pending payments, and compliance status. Marketing banners and promotional cards were thoughtfully integrated without cluttering the core experience.

Rise — Dashboard Mobile Responsive View
Dashboard optimized for mobile with expandable financial metrics

A flexible identity card that celebrates the user while serving as a functional authentication layer.

Rise ID was redesigned to support multiple verification states — unverified, onboarding, verified, and verified with active pay schedule. Each state has distinct visual treatment that communicates progress and trust level, making users feel accomplished as they complete verification milestones.

Rise ID — Multiple Verification States and Card Designs
Rise ID supporting unverified, onboarding, verified, and active pay schedule states

Split-screen layout enabling seamless switching between traditional bank accounts and crypto wallets.

The funding and withdrawal flows were unified under a consistent UI pattern — making the experience feel coherent whether users are moving fiat through traditional rails or crypto through wallets. Clear confirmation states and progress indicators reduce anxiety around financial transactions.

Comprehensive theming across every feature, flow, and component — because crypto users live in dark mode.

Every screen was designed in both light and dark variants, ensuring color contrast, readability, and visual hierarchy remained consistent across themes. The system was built with CSS custom properties, making theme switching instantaneous and maintainable.

Rise — Light and Dark Mode Design Implementation
Every component and screen designed for both light and dark themes

Built on Brad Frost's Atomic Design methodology with a TailwindCSS foundation — empowering engineering teams to ship independently.

Atoms

Icons, labels, color tokens, typography, and spacing scales.

Molecules

Buttons, inputs, selectors, toggles, and form components.

Organisms

Cards, navigation panels, data tables, and complex layouts.

Design Language System

A scalable system with predefined naming conventions for colors, typography, spacing, and shadows.

Rise — Design Language System Overview
Rise — Atomic Design Components: Buttons, Inputs, Icons, and UI Elements
Component library built on atomic design principles — from basic tokens to complex organisms
Scalable & Self-Sufficient

The system empowers engineering to build new features without waiting for designer input.

Rise — Scalable Design System Documentation

Bridging the gap between Figma and production with a Tailwind-first handoff pipeline.

Using FireJet.io, we converted Figma designs directly to Tailwind-compatible code — dramatically reducing implementation time. The design system's token names map 1:1 to Tailwind classes, making the handoff seamless and eliminating guesswork for engineers.

TailwindCSS-based token system with predefined naming conventions
Figma-to-Tailwind pipeline using FireJet.io plugin
1:1 mapping between design tokens and Tailwind utility classes
Self-sufficient system enabling engineering to ship without designer input
Rise — Figma to Tailwind CSS Development Handoff Process
Figma to Tailwind CSS handoff — design decisions translated directly into production code

Elevated Brand Position

The new design positioned Rise ahead of competitors in the web3 fintech space — building instant credibility with users and investors.

Improved Usability

Positive customer feedback on visual design and significantly improved onboarding completion rates.

Self-Sufficient System

Engineering teams empowered to ship features independently — reducing design dependency and accelerating sprints.

Final Deliverables

High-fidelity mockups ready for development — pixel-perfect and fully annotated.

Rise — High Fidelity Final Mockups
"The new design put us up on a pedestal compared to our competitors. That's really what made the difference for us."
Andrew Mauer CTO, Rise
"UX Cabin asked really good questions that had us rethink our business processes. That's a huge value that is hard to quantify."
"You guys were super flexible with scheduling, budgeting, and team allocation."

Next Project

Moen — Mobile App Redesign