07

Shiftbase Case Study

  • Role Lead UI/UX Designer
  • Tools Figma
  • Type B2B SaaS · Web3 Payroll
  • Prototype Desktop Mobile
UI/UX Design Web3 FinTech SaaS Figma 2026
Shiftbase — Web3 payroll platform overview
Overview

The Concept

Shiftbase was conceptualized as a premium B2B SaaS platform for borderless Web3 payroll and multi-chain settlements. The primary goal was to design an enterprise-grade interface from the ground up that makes complex cross-chain treasury operations feel effortless for finance teams operating across borders. By leveraging a clean, light-mode canvas with a confident violet accent, the platform signals institutional trust while keeping every workflow frictionless.

The process centered on translating dense financial and compliance logic into a clear, high-converting landing page and a calm, confident product experience. Every touchpoint was structured to prove that a Web3-native solution can meet the exact same bar of polish and reliability that enterprise finance teams expect from traditional institutional software.

Multi Chain settlements
B2B Enterprise grade
0% Hidden fees
Conversion path
Approach

Institutional trust, Web3 speed.

The landing page was built to convert skeptical finance decision-makers, leading with clarity on compliance and settlement speed before diving into product details. Inside the product, the user experience guides teams through payroll batches and multi-chain settlements with minimal clicks, all reinforced by a strict component system that ensures every new flow inherits the same enterprise-grade polish.

Design System

Component-Driven Design

Every element starts from a single source of truth, a token-based system with a strict palette, typography scale, and a component library built for consistency from a landing page to a dense settlements dashboard.

01 — Color Palette

A clean, near-white canvas keeps dense financial data legible. A single confident violet powers every primary action and live settlement state.

Background #F7F8FC
Surface #FFFFFF
Elevated #EDE9FE
Accent #7C3AED
Text / UI #111114 · #6B7280
02 — Typography

A single typeface at varied weights keeps dense financial data legible while preserving a premium, institutional tone.

Hero Shiftbase Plus Jakarta Sans · 800
Heading Settlements Plus Jakarta Sans · 700
Body Payroll batch confirmed on-chain. Inter · 400
Label Wallet Address Inter · 400
03 — Space & Motion

An 8-point grid keeps dense dashboard data aligned. Smooth easing makes settlement states feel premium, not abrupt.

8px
16px
24px
32px
48px
6px
Sharp
12px
Cards
24px
Modals

Pills
Easing
cubic-bezier(0.4, 0, 0.2, 1)