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.
That’s really what made the difference for us.
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 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.
That’s a huge value that is hard to quantify.
‍
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
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.
‍
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.
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!
Finding talent is difficult and you guys have it.
‍