Sayeed AhmadProduct Designer
Book a call

Making crypto payroll as clear as a bank transfer

Rise pays contractors in 190+ countries, in fiat or crypto, and keeps every payment compliant. The engine worked, but the old interface didn’t explain it. I redesigned the product end to end, from onboarding to timesheets, and built the design system engineering ships from.

The Rise payer dashboard in dark mode, with payment totals, action items and a 30-day forecast.
Role
Product designer, end-to-end UI and design system
Company
Rise, via UX Cabin
Product
Payroll web app for payers and payees
Period
5 months, 2023

The work in numbers

Designing for two people at once

Every screen has two readers. The payer is a company funding an account and paying a team. The payee is a contractor who needs to get verified, log time and get the money out. Both share one Rise ID and one dashboard layout, so neither side learns a second product.

Payer, the company, funds the account, pays the team in one run, checks costs and timesheets. Payee, the contractor, gets verified, logs time and sends invoices, withdraws to a bank or a wallet. Both share one Rise ID, one dashboard layout, one component set.

How I worked through it

Four steps. Audit listed what the old app made hard, page by page. Map rebuilt the structure for payer and payee. Explore tried several layouts per page before choosing. Systemise turned what worked into tokens and components.

Four decisions that shaped it

1Ask about crypto before assuming it

Most contractors have never owned a crypto wallet. Onboarding asks one question first. Make it easy for me, give me a new wallet, or I already have one. Beginners get a Rise security key they unlock with a password, and only people who bring their own wallet are asked about networks.

Rise onboarding, wallet step, with three choices, make it easy for me, I don’t have a wallet but I want one, and I have a Web3 wallet.

2Bank or wallet, one withdraw screen

Bank accounts and wallets sit in one list. Pick either and the screen stays the same, showing the amount, both fees and what actually lands, all before Confirm. Only the destination block changes.

The withdraw screen with three highlights. 1, pick a destination from bank accounts and wallets in one list; 2, the same every time, amount, both fees and what lands; 3, only this changes, bank details or a wallet address.

3A Rise ID that shows how far you are

The Rise ID card is the user’s identity and login in one. It moves through five states, from unverified to a verified company with a pay schedule, so people can see what’s left before they can get paid.

The Rise ID card in five states, unverified, onboarding, verified, company and pay schedule.

4Timesheets that show where the time goes

Payers open Timesheets to check hours before they pay. The page reads top to bottom, starting with this month’s totals, how the days compare, then each entry with its status.

The Timesheets page with three highlights. 1, totals first, hours, billable, non-billable and uninvoiced above every row; 2, week or month, one switch changes the chart’s range; 3, status on every row, draft and submitted look different at a glance.

A system engineers can build from

Every token is named after the Tailwind class it becomes. An engineer reads primary/600 in Figma and types bg-primary-600 in code, so nobody translates a swatch by hand. Both themes were drawn in full, for every component.

Design system overview. One purple in eight steps, Figtree for money, a type anatomy of real Rise cards, token name equals class name, every input and button state, and one dashboard split between light and dark.
“The new design put us up on a pedestal compared to our competitors.”
CTO, Rise

What I carried forward

  1. 1Ask, don’t guess.One question at the start let each person skip the parts of crypto they didn’t need.
  2. 2Keep money screens identical.When only the destination changes, people check a bank wire and a crypto transfer the same way.
  3. 3Name tokens the way engineers type them.Nobody had to translate a swatch into a class name, so design and code stayed in step.

Message Sayeed