Skip to main content
Turning complex crypto payments into simple, usable interfaces through thoughtful UX, prototyping, frontend engineering, and more.

Case Study Overview

Who
bridge21 is a B2B and B2C fintech company using cryptocurrency to power more affordable international remittances (no actual understanding of crypto required for end users).
What
I joined the bridge21 team as a contractor before the company was even called bridge21. As an early team member, I wore many hats and had a wide range of responsibilities. Hired as a graphic designer, but swiftly took responsibility for all things UI/UX, print and digital design, and frontend development. I worked on pitch decks, branding, prototyping, microsites, strategy — and even explaining crypto to investors at a fundraising conference.
When
July 2014 – July 2018; Spring 2022

Main Website

The website went through a few iterations and tech stacks during my time with bridge21, so I had the unique challenge of implementing a very similar interface across different frameworks and languages.

The website integrated with our quoting engine as well as KYC providers and bank-linking providers. We handled authentication with Auth0 for local and social-based account registration. Later implementations of the site were also multilingual and had a language switcher — my first foray into i18n!

Though techniques like the blurred background in the header and the conical gradient in the progress circle are commonplace today, they were harder to pull off before some of the CSS3 features, and I was proud of my implementations.

Homepage of bridge21's remittance website. The top section has a large hero section with the text 'Money Without Borders' above a banner with international currency and a currency conversion calculator.
Screenshot of the identity verification page on bridge21's remittance website. The page has a clean, simple layout with a progress circle at the top and a form for entering personal information, including a drag-and-drop area to upload identity files.
Screenshot of the payment method page on bridge21's remittance website. The page has a clean, simple layout with a progress circle at the top and options for selecting a payment method, including ACH bank transfer or a wire transfer.

Back-of-House Dashboard

I created prototypes of the back-of-house trading interface using Figma, then helped implement them with the Material framework.

A screenshot of the bridge21 back-of-house dashboard, showing a clean interface with many content cards displaying current trades and balances.
A screenshot of a Figma design file showing the bridge21 back-of-house dashboard prototype. The same design is duplicated in another artboard with grid columns overlaid to show alignment.

Pitch Deck & Print Design

A mockup of slides from bridge21's pitch deck, featuring a clean and modern design with linear icons, charts in emerald and chartreuse, atmospheric images, and text outlining the company's market opportunity and product features.
A tri-fold brochure for bridge21, featuring aspirational imagery and information about the market opportunity, the product, and how it works.
A set of bridge21 business cards, featuring the company logo and contact information.

Conference & Demo

I represented bridge21 at the FUND Conference in Chicago… accompanied by my mom! We met with investors and talked about the bridge21 workflow. As someone typically behind the scenes and not involved in the sales process, this was an unusual role for me, but my team couldn't pass up the opportunity to have one of our locals attend the conference.

Explaining the product simply to a non-technical audience prepared me for investor conversations. I practiced the pitch with my mom; she picked it up fast and confidently handled conversations at the conference, which was a proud moment. As she works in a more traditional sector of the finance industry, we made a great duo to discuss the benefits of bridge21's innovative approach.

Stephy and her mom Jodi at the FUND Conference in Chicago, representing bridge21.
A table at the FUND Conference displaying information about bridge21's services, including a laptop with a demo video, brochures, and a large banner.

This is the demo video we played on the conference laptop — it's a little sped-up, but was recorded with real API interactions and not mocked-up at all. The video also features some voiceover work from yours truly.

Landing Pages

Unsurprisingly, startups pivot. The B2C space was difficult to break into, and the support required to assist individual users became very time-consuming. As bridge21 focused more on B2B clients, the team needed to create tailored landing pages for a new audience.

Many traditional financial institutions are more conservative and risk-averse, and talking about the marvels of technology didn't sell the right message. We needed to be fresh — but not too fresh. We focused on straightforward process-based storytelling to show how easy remittance can be.

Screenshot of an airy, clean website with large content sections in white and green. The website highlights available services and outlines the money sending process, from getting a quote to the recipient's funds arriving in their preferred payout method.

Themeable Prototype

Ahead of a meeting, the bridge21 team could add the logo and colors for the banking client in order to make the service seem more real — and also already a part of their brand.

The prototype was built with Tailwind, which has a built-in color palette. The team member running the meeting could quickly select a primary theme color from the list and all of the lighter and darker shades would be generated from the framework. There were two main userflows: sending and receiving money.

Screenshot of the themeable prototype in a red color scheme. The company's logo is in a lefthand sidebar and the right content area displays a group of cards titled 'Your Account'. In between placeholder white cards is a large red card with a headline, subheading, and call-to-action button.
Screenshot of the themeable prototype in a blue color scheme. The company's logo is in a lefthand sidebar and the right content area displays a group of cards titled 'Your Account'. In between placeholder white cards is a large blue card with a headline, subheading, and call-to-action button.

Sending Money

Screenshot of the prototype at the first step of sending money. The user is prompted to enter the amount they want to send and select the destination currency.
Screenshot of the prototype at the second step of sending money. The user is prompted to enter the recipient's contact information.
Screenshot of the prototype at the third step of sending money. The user is prompted to confirm the transfer and contact details.
Screenshot of the prototype at the final step of sending money. The user sees a confirmation message that the transfer was successful, along with the transfer details.

Receiving Money

Screenshot of the prototype at the first step of receiving money. The user is prompted to claim a transaction in the transaction table. Additional rows show transferring and completed transactions.
Screenshot of the prototype at the second step of receiving money. The user is prompted to select a payout method.
Screenshot of the prototype at the third step of receiving money. The user is prompted to enter their payout details.
Screenshot of the prototype at the final step of receiving money. The user sees a confirmation screen with all of the transaction details.
View the live demo
Loading portfolio projects...