Uniswap
A unified design system for a seamless onchain experience
Collaborators:
Tech Stack:
- Next.js
- React.js
- Tailwind CSS
- Docusaurus
- Contentful
Uniswap is the largest onchain marketplace for buying and selling crypto, but its digital ecosystem spanned multiple platforms, each with its own user experience.
Sanctuary Computer collaborated with Uniswap to synthesize its design system, improve user support, and refine site functionality, creating a seamless, consistent experience across Uniswap’s diverse digital touchpoints.
Project Overview
- 1.
We applied Uniswap’s existing design system across its blog and help center, ensuring a cohesive user experience across platforms built on different technologies.
- 2.
We developed Uniswap’s help center to improve self-service support by enhancing FAQs and restructuring help content within a more flexible and expandable front-end to better support future design and functionality updates.
- 3.
We focused on accessibility and user navigation, making Uniswap’s ecosystem more intuitive and discoverable.
A Unified Design System
Uniswap’s digital presence spanned multiple platforms, each built on different technologies, including a Next.js blog (Contentful CMS), a Docusaurus-powered technical documentation site, and a Zendesk help center. Our goal was to apply a consistent design system across all three. The documentation site was not part of our development scope, but we led a redesign effort to help align its eventual user experience with the rest of the ecosystem.
To achieve this, we implemented Tailwind CSS as the core styling framework, allowing Uniswap to share configuration files between its various platforms. This ensured that design components and typography were identical, no matter where users interacted with Uniswap’s content. We worked closely with our design team, XXIX, to take the project from design to launch, refining elements of the design system for greater consistency and flexibility.
Integrating Dark Mode
Additionally, we introduced a dark mode feature that carries across our work with Uniswap, creating a more immersive and personalized user experience. By storing user preferences, we ensured that switching between these platforms felt fluid and intuitive.
Solving Support Issues
A major pain point for Uniswap was repeat ticket submissions—users were struggling to find answers to common issues and resorting to support requests instead of self-service solutions. We revamped the FAQ and help center, making it easier for users to navigate information and solve problems independently.
To reduce repeat ticket submissions, we developed a related articles feature that intelligently suggests helpful content based on a user’s selected support topic. This solution, built as a workaround to Zendesk’s native limitations, gives Uniswap agents more editorial control and helps users solve issues before submitting a ticket.
Creating a Better User Flow
Beyond design and support, we focused on improving accessibility and overall usability. Our accessibility audit led to refinements in color contrast and typography, ensuring that Uniswap’s platforms met WCAG standards and were easier to navigate for all users.
To improve user navigation, we optimized Uniswap’s blog and documentation by leveraging Contentful’s tagging functionality. This improved site structure, making it easier for users to find relevant content through related sections and internal linking. As a result, content became more discoverable, enhancing user engagement and time on site.
As Uniswap continues to evolve, its digital infrastructure is now primed for future growth and innovation. Because in DeFi, as in design, consistency is key.