Cryptocurrency Payment System

Role: UX/UI Designer & Researcher

Timeline: 4 weeks, 80 hours

Deliverables: High-Fidelity Mockups

Problem

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

Solution

Designing a cryptocurrency-based payment system that allows users to send money faster and cheaper than all banks or other creditors.

Overview

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. This 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.

Competitive Analysis

The main takeaways from the competitive analysis were learning which features were expected from asthma management tools and why the products may have low usage. Therefore, Inhale must be a product that is accessible to the everyday user and includes automated processes that make for a more intuitive and usable app.

Before moving forward with wireframing 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

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.

POV & HMW

After defining who Matthew is as the target user, I created point-of-view statements based on user insights and needs. From these statements, I created how-might-we questions to encourage ideating solutions to Matthew’s problems.

Styleguide

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 to 2 separate steps for the case 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

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.

Search Process

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.

Linking Bank Accounts

After finishing the design main screens I focused on linking bank accounts since it is an essencial user flow when interacting with the application. I had to make it simple and thorough for everyone. I did make a few mistakes trying to find the best practices and after several iterations, I ended up having this process.

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 low smooth and easy flow.

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, 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.

Results

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.