Crypto Payment System

Cryptocurrency-based payment system that allows users to send money fast and cheap.
MARKET RESEARCH
UX DESIGN
UI DESIGN
USABILITY TESTING

BACKGROUND AND BRIEF

People need a simple, fast and cheap way to send and receive money.

CW allows you to easily send or receive money around the world. This cryptocurrency payment system delivers customers funds fast, in hours not days. It makes CW stand out from other similar cryptocurrency payment systems. My task was to design the entire product from scratch. I started with conversations about who CW customers are and what they expect from the product. I adjusted designs to work for someone who has very little or no experience with crypto payment systems but is a need of sending funds electronically.

START OF THE PROJECT

I started my journey with a list of user stories:
– Buy and sell currencies.
– See their balance in different currencies.
– See a list of transactions.
– Send funds to themselves/someone.
– Deposit funds using different payment methods.
– Save or create contact.
– Access their account settings.

I prioritized user stories by the projected frequency of use. I went through several whiteboarding sessions to figure out how the app should be structured. The most important features that CW customers would use all the time are on the home screen of the application. I came up with the idea of Bootstrap wizards. These wizards looked like a perfect solution because it would have made it clear how long the flow was and how to return to previous steps.

Before moving forward with wireframes I did research and checked various ideas of what potential users would expect from a cryptocurrency payment system. I was able to understand that most customers already use some payment systems like PayPal and Venmo, and they have certain expectations from the UI. It becomes clear that the modern, clean, and simple product needs to be created.

WIREFRAMES

Defining The Problem

Creating wireframes is one of the most important steps in UI design. I began some initial brainstorming as to how those features would be incorporated into the site. In this process, I used common design patterns and established the sizing & placement of content elements. I focused on keeping consistency across screens. Once I was sure I couldn’t simplify user experience anymore, I focused on the product’s style.

STYLEGUIDE

Designing The Solution

This style tile was my opportunity to start to piece together the visual direction of this design to be implemented in the UI. I designed an initial UI style guide and kept updating it until the entire project was completed.

DASHBOARD SCREEN

While sketching, I started designing the product based on the most common user scenarios. I realized that for better user experience all essential features should be accessible from the main screen of a dashboard. I needed to focus on the following features: transactions, contacts, account settings, balance, adding funds, sending/exchanging money, and viewing recent transactions.

When designing the dashboard I realized that I needed to split Send Money and Exchange Currency features onto 2 separate steps for the sake of saving space and keeping a flow simple. Sending money is the main product’s feature and it’s available off the bat, but to access the currency exchange feature, the user needs to hit the switcher.

TRANSACTIONS

Transactions are the section where the user can access information about all completed and pending transactions. There's a simplified version of transactions on the dashboard to give the user a short overview of the recent transactions. However, to see all the details and filter transactions the user needs to visit the transaction screen on the navigation bar.

CONTACT LIST

Defining the features

While creating a contact list I came up with the idea that sometimes users want to request money not only send it. I implemented this feature on the contacts screen. Users can save contacts to avoid adding all the payment details every time they send or request funds to the same person. Furthermore, they can see some statistics such as how many contacts they have or how much money they send/received.

ACCOUNT SETTINGS

Account settings contain the usual items: email, phone, password and MFA settings, linked cards as well as bank accounts and API keys. The account settings page is another important flow. This page contains the usual items: password, phone, MFA settings, linked cards, and bank accounts.

LINKING BANK ACCOUNTS

Users could search globally site-wide as well as narrow their search by looking for the results in a particular area. It helps simplify the search process and makes the application user-friendly.

EXCHANGING CURRENCIES

Exchanging currencies is one of the most important features of this application. On the dashboard, a user has to choose what currencies they want to convert and how much they were looking to exchange. If the result is satisfying, the user would see a confirmation screen with a timer showing for how long the exchange rate is locked and what fees would apply to this transaction.

SENDING MONEY

The next step in this project was creating a user flow for sending money. Sending funds to another person is a multi-step process. It took me a few attempts to create a low smooth and easy flow.

RESULTS

Test, iterate and test again... and again

With this project, not only did I create a beautiful, intuitive design to help users effectively manage their funds and exchange currencies, but I also gained valuable knowledge I will be able to use in future design projects. This project was a fantastic learning experience. I created a beautiful, human-centered, and intuitive design that helped to grow both my skill set and knowledge base as a designer.