Options are an integral part of the financial system.
They allow traders to manage risk, obtain leverage, and construct any payoff structure. It’s hard to quantify the market size of options in traditional financial markets. Some estimate ten trillion, others think it’s hundreds of trillions of dollars. What we know for sure is that this market is massive and the utility of options make them a cornerstone of the financial system.
When it launched in 2021, the Lyra Protocol was the first fully on-chain options market. This was a big deal because for the first time ever, defi users could simply connect wallet and trade options that were accurately and transparently priced. By building natively on an Ethereum Layer 2 (Optimism), Lyra implemented the first market-based, skew-adjusted pricing model which provided competitive pricing. Users could also provide liquidity through Lyra’s Automated Market Maker (AMM), which reduced the risks incurred by liquidity providers by delta hedging, allowing more liquidity to enter the protocol. This combined the best of traditional options market making (proven pricing and risk management) with crypto’s three biggest strengths at the time; self-custody, scalability and composability.
That’s where the product was when I joined the team in the summer of 2022.
Fresh off the $LYRA token launch and firing on all cylinders. The VP of Product was serving as Engineering Manager, Front End Dev and Product Designer. He had used some off-the-shelf templates and front-end frameworks that got the product this far, but there was a long and growing backlog of features to build and design had become a bottleneck.
Lyra v1
This is how the product looked when I joined the team.
A very clean and functional v1. The team had both a short list of additional features that needed to ship right away, and big ambitions for the next phase. To address the urgent punchlist of features, we agreed make some updates to the existing design, but save the majority of big changes for a full redesign, where we could properly showcase the big ticket items.
Punchlist:
A dashboard where LPs could deposit to liquidity pools and security modules
An additional underlying asset to trade (SOL)
Expanded view of the options contract for greeks
The ability to hide the price chart
The update included a light redesign, where I made boxes transparent with a very light stroke, added density to the information in the sidebar so it could have more utility than just the list of markets, and a few other tweaks. Mostly just testing the waters to see how difficult it would be to get some design changes into prod. It wasn’t difficult at all.
Lyra Avalon
The year was 2023 and Ethereum L2s were all the rage. The rollup centric roadmap, superchains, public goods funding, DAO governance and the metaverse were the narratives du jour. It was a light and positive time for crypto branding.
Design Inspo
New Brad Elements
In addition to the major feature updates, there was near consensus on the team that both the brand and the platform didn’t seem beginner friendly enough. Nor did it convey Lyra’s mission to build an open, decentralized and community-owned protocol.
The Avalon upgrade would address this. The new brand would be lighter and would reflect the optimism of the time. More importantly, the product itself would be more approachable and it would be positioned for retail.
The timeline for release of Avalon was aggressive. I had one week to refresh the brand language before I needed to move on to product. To that end, I kept the scope tight, settling on a new color scheme and a shape system that I designed from scratch using Figma and Blender. These elements were versatile enough to provide a foundation for the new brand, but much more would be added later.
New Landing Page
The landing page positioned Lyra as a decentralized and community-owned protocol, and showcased the key value prop of being the easiest place to buy and sell options on cryptocurrencies.
Product Upgrades
The Avalon upgrade centered around six main protocol changes:
Perpetual futures for every market
Anytime entry/exit for LPs: Allowing LPs to enter and exit market maker vaults (previously known as pools) at any time
Lyra LP tokens could be withdrawn as ERC-20 tokens
12-week rolling expiries and support for over 100+ strike/ expiry combinations
Partially collateralized options selling
Liquidation fees to LPs in the market maker vaults
Universal closing, allowing users to close positions regardless of delta or time to expiry
Design Priorities:
New landing page
Portfolio page with performance history as well as a comprehensive overview for traders and LPs
Perps page for every asset
Earn page positioning the LP pools as defi yield vaults
One column layout/ no global side nav
Option detail page with trade share card
Trade competition page
Mobile design for key pages
Light mode
Design system of reusable components
Wireframes
Extensive low-fidelity wireframes helped answer key questions on functionality and layout. Below is a small sample, we detailed hundreds of screens and states in this manner.
Once we had the portfolio page, trade pages and vault pages wireframed, I began applying the visual styles. From there, design and product/ engineering cycles happened in tandem.
As I designed more pages, the library of reusable components grew and successive pages were much easier to create for both design and engineering. To the point where we could create an entirely new page from idea to deployment in less than a day. This allowed for a huge amount of experimentation and testing. It also made us extremely responsive to user feedback.
Portfolio Page
The centerpiece of the portfolio page was the performance overview and time series chart. This component tracked overall settled account value (not open position P&L or funds deployed to market maker vaults).
Earn Page
User research found that there was almost no overlap between LPs and traders, so we decided to segregate the dashboards for these distinct user groups, showing trade details on the portfolio page and LP positions on the Earn page.
There were quite a few different variations of the Earn page over time, accounting for different incentives programs.
Competition Page
We held a few event-based trading competitions around things like the Ethereum Merge and Fed interest rate decisions. The competitions were so effective at driving volume that we eventually made into more of a persistent leaderboard, with prizes awarded every two weeks or so.
Options and Perps Page
The bread and butter of the platform. With the Avalon upgrade, Lyra became the most accessible options trading experience in DeFi. Predictable, programmable, deep 24/7 liquidity that lead to more fees for LPs, which drove more AMM liquidity, which in turn made a better venue for traders.
The option detail page contained information on the individual contract. It also featured a trade share card when the user has an open position.
Trade Form States
Results/ Community Response
In the months following the Avalon upgrade and design refresh, monthly active traders did a 4x and trade monthly trade volume more than doubled. AMM participation also increased, but not nearly as much as demand (a problem we would address in the next upgrade). The community response on crypto twitter, particularly with regard to the design update was also incredible to see.