Overcoming Barriers to Accessibility and Adoption
The biggest hurdle was creating a smooth, responsive experience for users across all devices, especially mobile. Since this was my first Web3 project, adapting to its intricacies added complexity. Beyond mobile responsiveness, we encountered an additional challenge: how to graphically represent complex swap and trade configurations in a way that users could easily share on social media to build interest. Lastly, gas fees were a major barrier to adoption, significantly impacting the user experience and usability of the DEX.
Optimizing Usability and Accessibility for a Web3 Audience
Using the existing tech stack (React, Typescript, Chakra UI, Metamask), I focused on improving mobile responsiveness and creating a clear user journey. Here's how we approached the problem:
Mobile Responsiveness: I restructured the UI components using Chakra UI to make the DEX screen-width responsive, particularly on mobile devices that handle crypto wallets.
Social Sharing Representation: For social sharing of trades, I proposed an approach using a DOM-based image generation library. This approach would allow users to share graphical representations of their trades, but we ultimately archived this feature due to the added complexity of storing images in a database.
Gas Fee Approach: To mitigate the high gas fees that deterred users, we opted to launch the DEX on the Polygon network, which offered lower fees compared to Ethereum, making it more accessible to users.
Marketing Landing Page: I also built a custom marketing landing page for the DEX on Squarespace to communicate the product's value and features. This involved working within the established design system and extending it for marketing purposes.
Shaping the User Experience and Reinforcing Accessibility
As the project's UX lead and the newest team member, I took charge of creating a clean and responsive user experience across all devices. I recommended changes to our API data schemas to improve content delivery and built the custom landing page on Squarespace. I also designed and tested potential solutions for social sharing challenges and was responsible for manually testing the DEX across multiple browsers and devices, documenting bugs and documented and resolved. Lastly, I contributed to the product's walkthrough documentation, making it easier for new users to navigate the platform.
Driving Early Adoption and Informing Future Development
My work drove the alpha release of the DEX, gaining initial traction while the NFT market was peaking. Despite not pursuing further releases, the project provided valuable lessons and is now used internally as a case study for improving our Node API infrastructure. The knowledge gained from scoping the user experience early on has informed future projects, particularly regarding how we can improve the developer experience.
Scope early to avoid roadblocks
Planning for features like social sharing upfront prevents decisions that can block smooth user experience later.
Failed projects teach valuable lessons
While the DEX wasn't expanded, it informed improvements to Node API development and highlighted the importance of flexibility in product design.
Responsive design drives adoption
Building for Web3 reinforced that user experience and device compatibility are critical to supporting product adoption.
Priced Before It Runs
An offline pricing engine for GraphQL. Point it at your API once, then price any query before it runs. No server, no signup. Free and open source.
Productizing {Blockchain Data}
Pivoting to a service-first approach, this project focused on creating scalable APIs providing blockchain data, aligning with market demands and future growth.
The Innovation of Brokering On-Chain
A new approach to NFT brokerage built from the ground up for transparency and fun.