CASE STUDY

Rise Payments & Compliance Platform

UX Cabin helped Rise redesign it's initial application with more intuitive web3 user experience across all major workflows

UI/UX Design
Design System
Tailwind
Product Strategy
Crypto / Web3

Overview

Rise partnered with UX Cabin to visually overhaul their web platform for contractor payments and compliance. UX Cabin worked on:

  • User onboarding
  • Team Dashboard
  • Funding & Withdrawing
  • Rise ID


A key component of the engagement was the hand-off from Figma to Tailwind CSS. This required the design and engineering team to closely collaborate on structuring the design system.

Andrew Mauer
CTO, Rise

Background

Rise is a platform that enables companies to pay their contractors in fiat or crypto. Regardless of country or currency, Rise ensures that the payment process is compliant. The Rise team was in need of a visual upgrade as they scaled their customer base. UX Cabin's visual design helped bring credibility to the platform and position Rise as a leader in the web3 fintech space.

Design UI

Design Process

Payment platforms are historically dry and boring. UX Cabin continually pushed the boundary to create a visually exciting and engaging product experience. The experience needed feel modern and cutting edge without sacrificing usability.

Andrew Mauer
CTO, Rise

Principles

  • The product should feel like it belongs in the web3 crypto space
  • The design should cater to crypto newbies and experts alike
  • The user experience should make key actions clear and obvious
Design dachbord

Objectives

• Create a visual language that was engaging, modern, and flexible
• Establish a design system that was based on TailwindCSS to empower the engineering team
• Simplify complex processes and workflows to give user confidence in their financial decisions.

Onboarding

We first refined the onboarding journey, a pivotal experience for every new user. The UX Cabin team enhanced the platform's visual design, and simplified the user experience. This turned an arduous and confusing workflow into an engaging easy to follow process that looked great.

Onboarding

App Menu

The original menu impacted usability on smaller screens and wasn't as scalable for adding new menu items.

The redesign streamlined the experience with a vertical layout. This provided more flexibility and future proofed the design. Menu items could display chips, display nested items, etc. We also updated the Rise ID account balance, team switcher, and added a toggle for light and dark modes.

Rise mune
Meun bord
this show the mobile view how it looks

Dashboard

The dashboard provides an overview of account-related activity, forecasting, and action items. The redesign expanded financial metrics to provide more visibility into account activity, upcoming payments, and account balance.

Marketing banners and cards were also introduced to give the Rise team more opportunities to promote offers or announce new features.

Rise ID

The Rise ID is one of the most important individual elements in the platform. This card is a representation of a user’s identity and is used for displaying profile information and authenticating transactions.

Users could be unverified, onboarding, verified, and verified with an active pay schedule. The card needed to be flexible to accommodate for these different states and to show different amounts of profile information. It was also an opportunity to really pump up the visual flair and celebrate a user’s identity.

Funding & Withdrawing

Funding allowed account owners to deposit money into their Rise account. Funds could be deposited either by bank transfer or as a blockchain transaction and then used to pay your team.

Withdrawing allowed team members to move money out of the Rise platform. They could send it as a bank transfer or as a blockchain transaction.

These features shared similar UI components since the workflows were quite similar. We landed on a split screen layout that allowed the user to quickly switch between accounts. It was common for users to have both a traditional bank account and crypto wallet linked to the platform.

Design Language System

A design system and language was built on top of an existing library that was tailor made for TailwindCSS. This meant that naming convention for color, type, spacing, and shadow styles were pre-defined.

As we progressed through the design of the platform, styles and components were updated to reflect any needed changes or additions.

Atomic Design

The Design System was created and maintained with Brad Frost’s “Atomic Design” philosophy. In this model, the smallest UI elements are referred to as “atoms” (ie, icons, labels) and are assembled together in order to create components referred to as “molecules” (ie, buttons, inputs). Molecules are put together in order to create more complex components called “organisms” (ie, cards).”

Principles

Some examples of these design molecules include:

  • Buttons & Selectors
  • Inputs
  • Icons

Hand-off

Figma's default inspector wasn't compatible with Tailwind's unique code format. However, the paid FireJet.io plugin generated Tailwind-friendly code, aligning with our style names and significantly optimizing our development process. Using FireJet saved us a lot of time.

Results

  • Positive feedback from customers on the visual design and improved usability of key features
  • A design system and visual language that the engineering team is able to use without designer input
  • Happy Rise stakeholders!


Table of contents