Description
Create DeFi’s best advanced trading platform.
Context
To build Oku, I cross-collaborated with leadership, engineering, and the Uniswap Foundation to maximize Uniswap v3's potential with features like advanced limit orders, live order books, robust analytics, and simple order management.
About
While centralized exchanges where never what crypto was about, the prevalence is understandable given the lack of accessible alternatives.
Decentralized exchanges lack multi-chain data with essential features like order books, live trading history, and limit orders. Users must rely on external tools, like Etherscan, and balance multiple tabs to source their information.
Oku provides a unified platform by providing users with the data that matters, to bridge the gaps between platforms and facilitate seamless trading.
The Brand
Our goal was to create a user experience that was neutral and recognizable. Familiar enough to a centralized exchange where tradfi users could connect and use the platform freely. Unique enough to improve on existing features specific to decentralization.
Building a strong community was important from day one. The visual identity would need to feel trustworthy, authentic, and clean. To concentrate on universal elements. Round shapes, clean lines, and imagery reflecting liquid, or the element of water as a way to best capture the interest of our audience.
Scalable Frameworks
Setting up performance across devices was one of the first specifications designed. Early on, our assumption was a. desktop (Mac, PC) would be the preferred device for making a trade and b. preferred desktop browser window sizes would span a range from extra large - medium.
The simplest way to ensure a reliable framework (no matter screen size or device), was to design the platform such that charts respond, as oppose to containers. That way, despite screen height all information can be viewable at-a-glance, preventing the need for vertical scroll. Smallest desktop screens designed first and scaled up.
However, not every framework chosen early on was a "happy path". While quick to develop, having built all charts and tables from scratch proved overall inefficient. Lacking the cohesion necessary to scale, a migration of all data structures to formal frameworks was completed post launch.
More Data
We found many users were generally unfamiliar with how liquidity providing works. While Uniswap's minimal UI looks amazing, it leaves significant opportunity to create learned behavior and provide actionable insights such as:
• Historic data with interactive charts
• Picking a predetermined price range of 12.5%, 25% 50%, 75%, and 100%
That said, I didn't quite get it right the first time around (see 2nd image). Between user testing and stakeholder requests, Oku's position maker left much to be desired if we were going to provide real, unique value, and thus we added more advanced features to the dashboard including:
• Tick price and value
• Annualized APR and fees within 30, 60, or 90 days
• All active and past user positions including date, fees, and value in one place
The ability to simulate annualized APR for any given position (in addition to viewing PnL and projected fees) provided the most value for both users in understanding how they stand to benefit from their position and how.
Tight Spaces
Following our north star for maximizing real estate in the cleanest way possible came a number of iterations with Oku's bread and butter: the order form. Paying particular attention to cross-chain UX and tokens with insanely long names, we redesigned the order form time and time again to improve on overall efficiency.
Unique indicators were added for clear communication on unique use cases. Limited tick sizes, minimum order amounts, and instances where limit orders have not been set up yet were among some of the indicators added.
Transaction states were also meticulously tested to ensure clear communication with the user at each stage of the transaction process.
And with accessibility in mind, we adjusted typography on high priority items like data tables and increased color contrast on drop downs to ensure visibility for color blindness
Discoverability
While the original intention was to provide an advanced trading terminal for Uniswap, once the closed beta was launched, users expressed interest in having both advanced and traditional swap experiences in one interface. Given the freedom in real estate, Oku explored ways in which we could utilize the space to improve the swap experience altogether.
Through internal sprints and discussions surrounding opportunity, our team centered around "discoverability" as a desirable element to any trading interface and thus, the trending and overview tables were added. There, users could satiate their FOMO and explore markets trending by TVL, Total Swaps, Volume, Top Gainers, and Top Losers.
Oku and Beyond
While building a scalable framework with limited time and resources proved challenging for Oku's feature dense interface, the solutions built to target such challenges would enable quick iterations for generations to come.
From day one our goal was to create a sophisticated trading experience for web3. One that rivaled the likes of centralized exchanges. And from day one of launch, thanks to the Uniswap Community and Oku's talented team of traders, engineers, and visionaries, we were able to lead with a very smooth product.
At present, Oku has scaled to reaching 150k users, a total of 24k followers across social media, and 11 chains.