top of page
salt cover photo.png

WeWander

SALT_White-768x321.png.webp

CRYPTO-BACKED CREDIT CARD APP

From early exploratory studies to development, my amazing team and I created the digital experience of a brand new consumer-facing product integrated into the SALT ecosystem.

My Role

User Research

Wireframes

Information Architecture

UX/UI

Visual Design

Database Design

Employer

SALT

OVERVIEW

As a product designer, I helped the SALT team build a brand new credit card program from idea through development. I led several research, design, and marketing initiatives to understand customer segmentation, establish our GTM strategy, create an ideal user experience, and integrate it into the existing SALT product ecosystem.

mockup1.png

Business Context

As a leader in the crypto space since the days when Bitcoin was an obscure concept, SALT has been setting the standard for the crypto-backed-loan industry. SALT was among the first companies to allow crypto holders to use their digital assets as collateral to take out loans in their native currency.

The original product that made SALT successful was its term loan, which is a simple cash loan paid out in a lump sum and paid back over a period of months or years. However, this comes with its limitations in growth potential, as user groups are limited to those who already own substantial amounts of crypto, and who have a certain degree of financial savvy-ness. The credit card was solution that aimed to introduce the idea of spending against crypto holdings to a more mainstream audience by lowering the barrier of entry from both a financial and educational perspective.

Challenge

There were three major obstacles this project needed to overcome.

 

The first was education;  how we take a niche product for a very specific audience, who already is highly educated on the economics of crypto and the various ecosystems within it, and present it to a more casual audience.

The second was how we integrated this new product into our existing UI for the original term-loan product in a way that makes it accessible to casual crypto users while also functioning in a way that's familiar and intuitive to existing customers.

The third was how we balanced the functional requirements for managing a traditional credit card against the unique needs of managing a line of credit backed by crypto.

To solve these problems, we went through countless iterations of messaging strategies and UI design strategies, based on feedback from users collected via interviews, surveys, A/B tests, and observed user sessions.

Research

PERSONA BUILDING

PHYSICAL CARD DESIGN

MESSAGING

FEATURE PLANNING

DESIGN

02 A/B Testing

We A/B tested multiple versions of the credit card landing page explaining the concept of the credit card to help us tailor our messaging and get a sense of the preferences of our audience. We used signups to the credit card waitlist as the definition for a successful conversion.

01 Surveys

We released several surveys on our marketing website, as well as through our email list, that helped us understand who our audience was, what their understanding of the macro and micro-economics of crypto are, and what kinds of features they would like to see in a crypto-backed credit card.

03 User Interviews

We hosted dozens of one-on-one interviews with users who had signed up for the waitlist, as well as current borrowers using the term-loan product. Our questions were designed to get a sense of their spending habits, level of effort they put into managing their credit cards, their knowledge of crypto, and their knowledge of crypto-backed loans.

04 User Testing

We tested our potential designs by having users click through Figma prototypes of our UI and complete various tasks, while narrating their thought process to highlight pain points and moments of confusion. This was immensely helpful for creating intuitive flows for audiences of various levels of digital, financial, and crypto-specific literacy.

Designs

Information Architecture Reconfiguration

In order to accommodate a new account type for the credit card, which required completely separate functions from the original term-loan product, we came up with a new "Home View" that gives summaries of all vital data points of each active product, with the ability to dive in further into individual product dashboards.

The Home View also includes an agnostic Custody Wallet for crypto assets not allocated to collateral for a specific product. Collateral funds can be transferred between accounts by hitting the center button on the bottom navigation.

home4.png
home 1.png
home 2.png
home 3.png

Choosing a Credit Limit

Since crypto is volatile, and the collateral that backs a line of credit can't ever dip too low relative to the borrowed amount without being liquidated or stabilized, we had to make sure users were educated on the relevant data points so they could make the most financially responsible decision they can given their own personal risk tolerance.

After copious testing, we found that the best way to educate users and incentivize them to set a safer credit limit was what we found to be the most potent incentive when choosing a new credit card: Cash-back on spending. Lower credit limits in relation to collateral value (LTV) are tied to higher cash-back rates on spending.

iPhone 13 Mockup Free7.png
iPhone 13 Mockup Free6.png

Main Dashboard

We carefully arranged the various functions required to use the credit card by importance. Time-sensitive items, such as balance, payments, and credit health, are placed above the fold, while the prompt to set up Apple Pay and the transaction ledger are further down the page.

Higher Urgency = Less Scrolling

dashboard.png
dashboard1.png

Emergency Volatility States

When the market declines and a user's collateral loses value, we implemented a series of 'emergency state' UI changes to assist a user in the process of fixing their credit health. We used a series of carefully crafted instructions to give users the exact information that they need to solve the problem without overloading them with information. We also used banners with clear CTA's and color coding.

cl4.png
cl3.png
cl2.png
cl1.png

Virtual Card

We included the ability for a user to spend on their credit line without physically swiping their card with a merchant. Since this action is directly monetizable, we needed to make it as easy to access as possible without competing with the more urgent features of Credit Health, Current Balance, and payments. The perfect balance between monetization and responsible use was the place it in the Manage Card page, which is right above the fold. 

 

To cut down on the mental strain of memorizing a credit card number and switching between tabs, we included buttons to quickly copy card number, date, and security code. 

dashboard.png
manage5.png
manage6.png

Security

During the state of high alert and stress of losing a physical card, it's crucial to make security functions as easy as possible to access. The 'Manage Card' page is placed above the fold, and includes quick flows for replacing a lost card, changing a pin, locking the card, or calling customer support for help.

dashboard.png
manage5.png
manage3.png
manage2.png

Spending

Spending is categorized by merchant type to help users reflect accurately on their spending habits over a period of time. Transaction details and specific data points around their balance are easily accessible through the dashboard.

dashboard1.png
spending scrolled1.png
spending scrolled2.png
spend2.png
spend3.png
spend4.png
bottom of page