OKX Lite - Crypto trading for one and all
Updated: Oct 22, 2024
Introduction - Throughout the development of the OKX Lite mode MVP, I supported 7 core feature squads in strategising and producing UI content for in-app flows, as the sole Content Designer. The content also include push notifications, emails, SMS and FAQs. The core features were: buying and selling, sending and receiving, market, portfolio, earn, trading and architecture. Objective - With a simplistic interface and guided transaction journeys, OKX Lite seeks to democratise crypto trading and increase accessibility for the masses. An accompanying mission in the process is to reduce customer tickets, due to awkward English content on the more dominant Pro mode (they read as if they were machine translated in bulk from Chinese). My role - I worked closely with Product Designers and Product Managers to digest product requirements, before executing the content on Figma based on the lo/mid/hi-fi design flows. For partial ownership projects, I functioned as the advisor and reviewed placeholder texts to ensure consistency with the voice and tone, as well as the glossary of terms. I also wore the hat of a 'Content Engineer' whenever I was called on for content keys bug bashing by the engineers. Challenge - OKX's brand awareness and identity were lacking, compared to household names like FTX (fronted by Sam Bankman-Fried), Crypto.com (endorsed by Matt Damon) and Coinbase (the go-to spot trading platform). The OKX Lite mode MVP is a shot at the moon to gain new user base and retain them using an easy-to-use UI, clean language, and identifiable elements.
What each sprint looks like:
1. Start alongside everyone else at product kick-offs 2. Tag-team with Product Designers (async/face time) through lo-to-hi fi designs 3. Lo/Mid-fi - Content explorations 4. Hi-fi - Final content iteration, peer review with fellow Content Designers 5. Trigger localisation on Lokalise 6. Review returned translations 7. If need be, troubleshoot content bugs or keys with developers
Showcase #1: Send crypto to a friend or your other crypto wallets
The background
Much discussion was had on the end of the Send flow, where users see increased anxiety. After confirming the transaction to send crypto to someone, a status tracker follows, and it indicates that users' crypto funds are on the way to the recipient, and they have to endure a wait.
This status tracker comprises of 3+1 statuses: Submitting request, Verifying details, Final confirmations, and an edge case for delays.
The 'Before' state
As there's plenty of real estate on these status screens, the PM desired an detailed explanation of the blockchain confirmation process that determines how much time the Send transaction will take (i.e. BTC requires 3 rounds of confirmations, ADA requires up to 120 confirmations etc.).
On the PD's end, she wanted to take a cue from certain delivery and transportation apps, in which statuses dynamically flit from the present continuous to past tense states. This would mean a build of 6 statuses for us (i.e. Submitting, Submitted, Verifying, Verified, Confirming, Confirmed). Moreover, she needed an idea on how to deal with delay cases in this status progression flow. The 'Just a little while longer' status had not existed back then.
The 'After' state
I lent my expert content design opinion that even though there's literally room to educate users on what's happening behind the scenes, having a large chunk of text breaking down the technicalities of blockchain confirmations would do little to value-add to the user experience at this point. Moreover, based on our content guide, we should strive to be as layman as much as possible.
It could also be a good idea, as instructed under the 'Request submitted' status, to let the users know they can leave it running and do something else. There is an estimated time indicated, after all.
To assist the PD's conundrum, I suggested that we could do it like food delivery apps (leveraging on my GrabFood experience) and add a 4th status (Just a little while longer...) whenever a delay is triggered, replete with a FAQ at the bottom of the page. By dedicating a special 'Status 4' screen, we could make use of the body text to assuage users that the team isn't leaving them hanging. In fact, the issue is currently being worked on.
Before & After comparison
Let's take a look at how the header and body content under the status screens metamorphasised from the exploration to production stage.
| Before | After |
The 'Verifying details' screen (Status 2) | Getting there... Your transaction is reaching the blockchain to be processed. This may take a few minutes depending on the crypto amount and network volume. | Request submitted. Verifying details now. We'll let you know once your request is complete. You may close this for now. |
The 'Final confirmations' screen (Status 3) | Confirming... Preparing for a send-off anytime now. The number of confirmations to clear on the blockchain varies per crypto. You may notice differences in time taken. | Final confirmations Your crypto is about to make its way to your recipient... |
What happens when you tap on 'Cancel' halfway:
What happens when you tap on the 'X' button on the top left:
Link to OKX Lite Send Figma
Showcase #2: An unconventional 'Market' page for users to explore crypto
The background
Every other crypto exchange has a standard Market 'list view' where users could explore available crypto and their current prices. From there, users could tap into individual crypto to learn more info or to perform transactional actions. What would make OKX Lite's any different? Is it worth reinventing the wheel to attain higher user retention and engagement?
What the research said
This is also 'What the issue was'. The user research study's main conclusion pointed towards a thirst for knowledge: users want to have as much information at hand as possible to make an informed decision before transacting a crypto. For example, by being readily exposed to information such as the position most other users are taking, or the most popularly traded coins in the last 24 hours, they can be more confident about buying into a coin.
The traditional 'list view' of a Market page is limited, things would get overloaded if we took the research study results literally.
Squad kick-off
The squad and myself kicked off the project with a 'Crazy 8s' exercise; under a timed interval, each member composed random sketches of what the 'Market' page would look like. It resulted in a switchable view that you wouldn't see on most other crypto exchanges: a resource-rich 'Explore' tab, and a traditional 'List' view tab.
The 'Explore' view's design is also visibly more vibrant compared to the 'List' view, to encourage greater readership.
To me, the 'List' view is still a must-have to play to users' existing mental model. They may be intimidated by the 'Explore' view's foreign environment if they are switching over to OKX Lite from other crypto exchanges, where they're used to browsing crypto and prices under a traditional view.
We introduced some level of interactivity under 'List' as well, with filters and a dynamic content string that explains the crypto category in a line.
The role I played with content
With respect to the 'Before & After' comparison below, the 'Explore' view on the left-hand side ended up looking extremely busy during the exploratory phase. Stakeholders were zealous about populating the page with category descriptions and crypto knowledge. Neon illustrations, big and small, were contributing to a sensory overload as well.
I advised the squad on ways to strip down the page to only its essentials. An example was how I worked my magic to turn all category descriptions into snappy one-liners and to clean up all technical jargon. Lengthier explainers on what each category entailed (i.e. DeFi, GameFi) were hidden under 'i' icons. Help users make an informed decision in a smart way.
What I wrote for the other category descriptions
Content sample: 'Before & After' of the expanded 'What's hot' category
Showcase #3: Error messages
Showcase #4: Empty states and errors
Showcase #5: Buy crypto flow
KYC flow: An additional step for card payment
Showcase 6: Crypto Gifting
New feature launch: Crypto gifting. It was a timely initiative introduced before X'mas season.
A new widget takes up residence on the homepage. There are two versions of the descriptive text; one for festive seasons, one for regular occasions
For the instructional guide page, both marketing and product considerations were thoroughly discussed and baked into the UI copies
Users would receive slightly different email content, depending on whether they're new-to-OKX or existing
New users would receive a reminder email after 7 days of inactivity
Mini-guide on what to do with crypto / Upselling opportunity
Introducing a touch of personification to crypto with the language
Consistency of enthusiasm and joy throughout the experience
Showcase 7: Sign-up Page
Sign-up page (left screen): To ride the rocketship to the moon, you'll have to take the first step. That's the idea behind the copy to persuade users to sign up for an account on OKX. The copy also establishes congruency with the illustration.
After clearing the sign-up process (right screen): The choice of language fosters a sense of togetherness in the journey (i.e. 'Let's start...'). Compared to the 'Buy crypto' option, 'Receive crypto' may be less obvious for beginners (am I supposed to get a friend to send me crypto?). So we borrowed commonly used terms in banking (i.e. transfer) to suggest that this option is intended for users with existing crypto holdings.
Comments