AlphaPoint APEX:
White-label Digital Asset Exchange

Overview – AlphaPoint APEX is a white label exchange platform that enables people to trade cryptocurrency and other digital assets. Clients come to AlphaPoint to license technology (APIs and UIs) to help build a niche exchange. For example, a client would come to AlphaPoint if they want to run the preeminent Ethereum exchange of Indonesia.

Goal – Design a brand new experience for the platform that refines and enhances the existing feature set, while also building up the user experience and creating a templated set of UIs. The design and the code is supposed to make it easy for a client to customize the layout and visual theme. Additionally the platform was designed to be responsive

Role : Product Design Lead – AlphaPoint
1
Overview

Client operators had been using the platform for a couple years, and the executives at AlphaPoint were reticent to completely overhaul the UI. Before my involvement there were three base templates a client could choose from: Retail, Standard, and Advanced. These templates ran the spectrum from novice to experienced traders. While the templates covered a range of users, the hierarchy and presentation of features was confusing. Users knew how to buy and sell digital assets, but they had a hard time understanding how to transfer crypto in and out of the exchange. They also had a hard time trying to find the various actions users completed on the exchange. It just wasn’t clear where to find various features and information.

To improve the platform, I broke down the experience into the following activities:

  1. Trading digital assets between members on the exchange
  2. Learning the value of digital assets on the exchange
  3. Transferring funds to another wallet/exchange or to other on-exchange users
  4. Holding funds on the exchange
  5. Viewing actions performed on the platform

Defining these activities and organizing the features by context allowed for a simpler navigation hierarchy. For example, the number of  “pages” was reduced from 9 to only 5. We also decided to only support two templates, Retail (novice) and Advanced. The functionality can also be shared more easily between the two tempates.

2
Previous Templates

There were many issues with the previous templates for the exchange. These are some of the issues….

Retail UI
  1. Too many pages with duplicative content
  2. Hard to find the Deposit and Withdraw feature. Then, there is the notion of Send and Receive, which is similar to Deposit and Withdraw, but instead of transferring outside of the exchange, the user would transfer to another user on the exchange.
  3. No charting to determine how the prices change on the exchange.
  4. You can open the Advanced trading UI, but it is a completely different UI.
Advanced UI
  1. The main issue is that all the content is on one page.
  2. It is hard to find the balances for each asset. To find a balance, you have to choose an instrument pair with the type of asset in which you want to know the balance.
  3. Hard to find activity on the exchange. All tables are jammed in the same module, not grouped by type.

Part 1:

Defining the Framework

The existing exchange UI was designed by committee, comprised by smart people, but without a proper design process. The result was an application without a clear mental model for navigating content and functionality. With me onboard, I began by creating some user stories, user flows and a sitemap. I would have liked to have gotten to do proper wireframes, but there was a lot of pressure to quickly get a buildable UI to the developers. In the end, most of the UX happened in tandem with visual design.

3
Initial Sketches

While getting familiar with the crypto experience space, I began to study crypto and competing platforms. I began to sketch to generate ideas about what features we needed and how the platform should be organized.

4
Basic Sitemap

To kick off the project, we made a basic set of user stories based on the casual trader. This allowed us to itemize the functionality, and set up a mental model for how the exchange should be organized.

Side Note: While the experience is oriented for the casual trader, we have provided a seamless integration of the Advanced trading UI.
5
Getting Started with Wireflows

Knowing that I would have to quickly jump into visual design, I wanted some time to think about the content on each of the main pages as well as explore the steps needed for various functions such as sign up or transferring funds. So, I made some “wireflows” to help plan this all out.

Part 2:

Retail Template: Casual Crypto Trading

The goal of the Retail Template is to appeal to the casual trader who might use an exchange such as Gemini or Coinbase. This particular user wants a basic place to hold custody of their digital assets and to make simple trades.

6
Dashboard Context

We decided to add a proper Dashboard to the Retail Template so that the user can see the market, measure the overall worth of their balances, and review activity made on the exchange. The Dashboard is to give the user as much context as possible before engaging with the platform.

7
Making a Trade

As a white-label product, Apex software can serve the varied business requirements of many prospective client operators.  Typically the business plan involves what type of assets the exchange is intended to support and what type of clients are served. This can make the trading situation vary from exchange to exchange. Some exchanges will have a lot of products to buy and sell, while others have fewer. Additionally, the exchange will give users the option to make simpler and more complex trades. The goal of Apex is to provide a myriad set of options to appeal to a wide range of scenarios.

The following exchange types:
  1. Basic – Only allows for Market orders
  2. Advanced – Wide range of order types, with also Order Book and Recent Trades Widgets.
8
Wallet Balances & Product Activity

For the Wallet screen, we wanted to create a solid glanceable experience where the user can see their funds and view the value of the funds as converted in a national currency.  An exchange could have between 4 and 100 currencies. So depending on the amount of currencies, an operator can choose either a card or table view.

For each currency, you can view activity,  deposit from elsewhere, or send to another wallet account or user.

9
Sending & Depositing Crypto

When the user sends (withdraws) an asset to another user or external account, a modal “side panel” appears to help facilitate the transfer. We wanted to make sure this feels different from buying or selling an asset on the exchange.

If the user intends to deposit crypto into their account, they simply bring up a QR code with the deposit address.

10
Managing Settings

Of course, there is a Settings section where the user can do the following…

  1. Profile & Security: Change profile information, reset the password, and set the 2FA status.
  2. Verification Level: Apply for additional features
  3. API Keys: Create or delete API Keys
  4. Trade Reports: Create and download reports of activity as a .csv file
  5. User Contacts: Get a list of users that have either sent or received an asset from you
11
Icons

A set of unique icons was created for the exchange. Clients can use these or source their own icons.

12
Style Kit and Themes

While designing the experience, I provided a style guide to help with building out components. The example above showcases elements from the multiple themes.

13
Modularity

As the APEX crypto exchange is white-label for customers to add their brand and decide what features they want to offer their users, APEX is build to with modularity in mind.

Part 3:

Smartphone App

Early in my tenure at AlphaPoint, we worked on a basic native smartphone app template, for Android and iOS. The design directly reflected the architecture of the backend, as driven forth by APIs. I managed two developers in Ukraine to build out the apps.

14
iOS App

This is an example of the iOS variant of the app. You can see how this is founded on a “white-label” visual style.

Results
  1. 150 exchanges in 35 countries launched with APEX on web and mobile 

  2. 7.3 million end users

  3. 2 billion USD in transactions per month

  4. Hundreds of millions of single transactions per month

  5. Launched margin trading