Responsive image

Future of Mobile Trading

Empower user to take quick actions on the market.

1 billion USD daily trading Top 10 crypto exchange 6 months deadline

The information in this case study is my own and does not necessarily reflect the views of Woo Network.

Context

Compared to traditional finance, the cryptocurrency is an emerging market and has less actors. This means that the market is volatile: a few traders can influence the all eco-system. That is why crypto-traders need to take quick decisions in order to succeed.

Problem

Those decisions are most of the time selling or buying a certain asset. So, how to implement the existing features from WOO X desktop to a mobile app which empower user to take quick actions?

My Scope

  • I led the global user interactions and collaborated with two other designers on the Home, Market, Trading and Settings pages.
  • I came up with interaction, information architecture and the user flow which ended up as our final solution.
  • I collaborated and iterated several times with an engineer team based in Shanghai.
  • In addition, I worked alongside one UX Researcher, two UI Designers and two Product Managers.

Design Process

Responsive image

What I learnt

  • Effectiveness: Proposed multiple design solutions in a short period of time.
  • Trading World: By working hand in hand with traders, I learnt trading strategies, analysis and charting techniques.
  • Collaboration: Collaborated with Engineering team located in an other country.

EXPLORATION

Competitors Analysis

The 3 exchange platforms that have the highest amount of daily user (Binance, FTX and Huobi), also share the same concept of home page:

Responsive image

- Is it really what the user is looking for?
- As a trader, is it the first thing I want to see when I open the app?

User Flow

We chose to go further and analyse the user flow of the most critical actions done by a user: buy, sell, close a position and check a price (those actions have been defined during the UX Research).

Let’s take an exemple from Binance app. User needs 4 steps to perform a trade. In the case of market crash (i.e. market prices are suddenly dropping), user is not able to adjust its strategy properly.

Responsive image

Interviews with daily crypto-traders

In order to find out weak signals and help us in the design decisions, we conducted user research. Several interviews have been done from the UX Researcher hand-in-hand with international crypto-traders.

None of the current exchange platforms answer to those needs.

Let's design and answer to user's need!

INFORMATION ARCHITECTURE

We wanted to involve all the design team for building the information achitecure. That is why, I organised and led 2 design workshops.

Below is the output we got after the workshops. For this portfolio, I chose to showcase the Quick Trade feature, located in the Home page (2.5).

Responsive image
Responsive image

IDEATION

Traders like to see the balance

Based on previous user interviews, traders want to see and take actions quickly, so we designed a home page with 2 components:

Empower traders to perform fast trades

User can expand each row and have access to the quick trade panel. From there, user can perform simple actions, such as close a position, buy, sell. If user wants to perform more complex trade, the bottom right button redirects to the trading page.

Responsive image 1st hand sketch
Responsive image 2nd hand sketch
Responsive image Final wireframe

Small but powerful

In order to keep the layout net and easy to understand, we iterated the structure until we found a good balance between functionallities and context. The purpose here is not to create a new trading page within the wallet, but to provide the minimum features needed to edit a strategy in a rush time.

Responsive image

Several iterations with traders

Hand in hand with high trading volume traders, we conducted several usability tests and obtained enriching feedbacks.

As a part of the experiment, we realized interaction research for a version 2 of the quick trade panel. However I am not able to detail those research in this portfolio...

Final Quick trade component

After days of wireframes and figma boards, we came up with this final solution:

FINAL DESIGNS

The following designs shipped publicly to everyone across the world.

Responsive image

Home page

Responsive image

Market page

Responsive image

Trading page

Responsive image

Trading page - left panel

Responsive image

Deposit BNB

Responsive image

Staking page

Responsive image

Staking page - Confirmation

Responsive image

Referral page - Create new code

Responsive image

Home page - Quik Buy

People love WOO X

The launch of WOO X app was a huge event for the WOO Network team and the community members:

"This will be a game changer. The app, the myth, the legend!
@WOOnetwork"
"WOO X iOS app is Smoooothhhhhh!!!
Love It!!!
Bullish $WOO"
"Only up. $WOO
Btw, what a nice layout on the WOO X app

@WOOnetwork
#WAGMI #WOORIORS"
"WOO X IOS BETA looking fineeeee"
"@WOOnetwork’s new app looking insanely nice! Free trading for all till Sep 2nd, 1800 $WOO [...]
Let’s go!"
"$WOO iOS app beta 🤩🤩"
"Beautiful interface and smooth run
Really impressed, hope to see more and more currencies listed in the future"
"Perfect
Good user experience, may add long-term PBL tracker?"
"Impressed trading experience!
Great experience!"