Skip to main content
Sanctuary Computer

Swell

A documentation site for a company pioneering the future of headless ecommerce.
Composite of Swell docs UI components: a Storefront API card, a code panel, and a stack of navigation labels.

Collaborators

  • XXIX

Swell needed a fresh documentation site to help developers power their e-commerce sites. We designed and built a speedy site to make it easy for developers to find what they need, and reduce customer service inquiries.

The Swell docs side navigation, listing Getting Started topics in a guides drawer.

Setting new standards

Swell is a headless e-commerce company that gives developers, agencies, and merchants around the world the tools and infrastructure to sell on the internet the way they want.

We worked with them to design and build a documentation site developers want to spend time in: searchable, cross-linked, and easy on the eyes during long sessions.

Since then, we've continued our partnership to build tools, community features, and user-specific features for the future.

Swell docs search results for “variants,” showing categorized matches across guides and API references.

Streamlining dense information

Swell’s documentation needed updating, spread across disparate platforms. Our team’s first task was to complete a comprehensive audit of all existing materials and those from competitors, partnering closely with the Swell team to workshop this into a user-friendly information architecture.

Inline tooltip definition for “Model Explorer” within a Swell docs article.
Mobile view of the Swell Glossary with popular terms and an A-Z index.

Connected concepts

Our search experience balances speed and exploration to help developers quickly find what they need while encouraging users to discover new content. In order to do so, we researched the best open-source search and analytics options in the business.

Concepts from the documentation are tied to glossary and search results, helping our users develop links between complex concepts, literally and figuratively.

Code samples in the Swell docs showing Cart errors with example response bodies.
Light and dark mode toggles for the Swell docs, shown as sun and moon icons.

A scalable design system

Swell collaborated with Faculty on a new brand identity. We extended that identity into the docs: cleaner typography, more breathing room, and light and dark modes tuned for readers who stay for hours.

We designed the site just as developers would approach it: building components into a modular design system that would serve as the foundation for our tailored and scalable CMS. This design system has served as the foundation for all our subsequent work with Swell, flexing based on our needs while keeping the brand universally aligned.

Composite of Swell docs UI components: a Storefront API card, a code panel, and a stack of navigation labels.