![salt cover photo.png](https://static.wixstatic.com/media/c7912f_5ce494f886794d0a82adeb72be6b77e3~mv2.png/v1/fill/w_49,h_23,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/c7912f_5ce494f886794d0a82adeb72be6b77e3~mv2.png)
WeWander
![SALT_White-768x321.png.webp](https://static.wixstatic.com/media/c7912f_8aeb66d46c884ee3b7191ba0701c9dbd~mv2.png/v1/fill/w_114,h_48,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/SALT_White-768x321_png.png)
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](https://static.wixstatic.com/media/c7912f_9adae2e645b24b17814cad528689b404~mv2.png/v1/crop/x_172,y_56,w_1781,h_1879/fill/w_95,h_101,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/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](https://static.wixstatic.com/media/c7912f_dfb7933f9f2440069c9feed783665aef~mv2.png/v1/fill/w_57,h_115,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/home4.png)
![home 1.png](https://static.wixstatic.com/media/c7912f_bc5fc1b8d19a4de78a299eee55aab7da~mv2.png/v1/fill/w_57,h_115,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/home%201.png)
![home 2.png](https://static.wixstatic.com/media/c7912f_9a8d78e9cc4b4cf48442f57c93054d22~mv2.png/v1/fill/w_57,h_115,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/home%202.png)
![home 3.png](https://static.wixstatic.com/media/c7912f_2033ce96acb04ce0aa3a54a48bf5c081~mv2.png/v1/fill/w_57,h_115,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/home%203.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](https://static.wixstatic.com/media/c7912f_73b632356f174913bf8038b3546e8969~mv2.png/v1/fill/w_57,h_115,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/iPhone%2013%20Mockup%20Free7.png)
![iPhone 13 Mockup Free6.png](https://static.wixstatic.com/media/c7912f_189ae1c1ecb4458a89ee33f6ca3ceb52~mv2.png/v1/fill/w_57,h_115,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/iPhone%2013%20Mockup%20Free6.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](https://static.wixstatic.com/media/c7912f_c43d05e99a154b20b39e5e2d7876a973~mv2.png/v1/fill/w_60,h_122,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/dashboard.png)
![dashboard1.png](https://static.wixstatic.com/media/c7912f_22b9e992afff40a4914cda40b29b26b1~mv2.png/v1/fill/w_60,h_122,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/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](https://static.wixstatic.com/media/c7912f_03bb66ca57954484a873ed735fa56ab7~mv2.png/v1/fill/w_59,h_119,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/cl4.png)
![cl3.png](https://static.wixstatic.com/media/c7912f_1767ed5bccfe4c39ae14596b0c0f0120~mv2.png/v1/fill/w_59,h_119,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/cl3.png)
![cl2.png](https://static.wixstatic.com/media/c7912f_ff620e4aab9f424498f42ba6cf1b45b6~mv2.png/v1/fill/w_59,h_119,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/cl2.png)
![cl1.png](https://static.wixstatic.com/media/c7912f_1cfd34766a614163a1cf15fd099f19ef~mv2.png/v1/fill/w_59,h_119,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/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](https://static.wixstatic.com/media/c7912f_c43d05e99a154b20b39e5e2d7876a973~mv2.png/v1/fill/w_60,h_120,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/dashboard.png)
![manage5.png](https://static.wixstatic.com/media/c7912f_33161a50c29e4e95822208eaac0474f2~mv2.png/v1/fill/w_60,h_120,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/manage5.png)
![manage6.png](https://static.wixstatic.com/media/c7912f_d0380863042f42f699e13554e2293c5f~mv2.png/v1/fill/w_60,h_120,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/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](https://static.wixstatic.com/media/c7912f_c43d05e99a154b20b39e5e2d7876a973~mv2.png/v1/fill/w_60,h_120,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/dashboard.png)
![manage5.png](https://static.wixstatic.com/media/c7912f_33161a50c29e4e95822208eaac0474f2~mv2.png/v1/fill/w_60,h_120,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/manage5.png)
![manage3.png](https://static.wixstatic.com/media/c7912f_d2a6d53a28f545b1874be4190db28a64~mv2.png/v1/fill/w_59,h_119,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/manage3.png)
![manage2.png](https://static.wixstatic.com/media/c7912f_28b2ff83082b4a7b93dd72f4b7b8e2d1~mv2.png/v1/fill/w_60,h_120,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/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](https://static.wixstatic.com/media/c7912f_22b9e992afff40a4914cda40b29b26b1~mv2.png/v1/fill/w_60,h_122,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/dashboard1.png)
![spending scrolled1.png](https://static.wixstatic.com/media/c7912f_0fe9ebcded364bdcbdb8ee267ae3bf48~mv2.png/v1/fill/w_60,h_122,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/spending%20scrolled1.png)
![spending scrolled2.png](https://static.wixstatic.com/media/c7912f_c9fb0688087e4e6ab8c4ab77f8ee03e4~mv2.png/v1/fill/w_60,h_122,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/spending%20scrolled2.png)
![spend2.png](https://static.wixstatic.com/media/c7912f_4dc5811c42e4441f82fa013461929220~mv2.png/v1/fill/w_60,h_122,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/spend2.png)
![spend3.png](https://static.wixstatic.com/media/c7912f_4e796bc8d36543dca24265a91a91c79b~mv2.png/v1/fill/w_60,h_122,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/spend3.png)
![spend4.png](https://static.wixstatic.com/media/c7912f_146658f5dc234fc4ac96e5fbcd84ddc0~mv2.png/v1/fill/w_60,h_122,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/spend4.png)