Empower user to take quick actions on the market.
1 billion USD daily trading Top 10 crypto exchange 6 months deadlineThe information in this case study is my own and does not necessarily reflect the views of Woo Network.
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.
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?
The 3 exchange platforms that have the highest amount of daily user (Binance, FTX and Huobi), also share the same concept of home page:
- 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?
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.
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!
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).
Based on previous user interviews, traders want to see and take actions quickly, so we designed a home page with 2 components:
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.
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.
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...
After days of wireframes and figma boards, we came up with this finale solution:
The following designs shipped publicly to everyone across the world.
Home page
Market page
Trading page
Trading page - left panel
Deposit BNB
Staking page
Staking page - Confirmation
Referral page - Create new code
Home page - Quik Buy
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!"