Introduction
O1JS is a TypeScript library built by O1 Labs to help developers get started with zero-knowledge applications on the Mina protocol.
While the library itself was clear and well-structured, the documentation didn’t offer the same simplicity. Important pages were hard to find, search results felt repetitive, and the content sat inside the wider Mina ecosystem, which made it unclear what belonged to O1JS.
We worked with O1 Labs to reorganise the documentation into a standalone, developer-first space with better structure, clearer navigation, and a more readable visual system.
Challenges & Solutions
O1JS pages lived inside the Mina protocol documentation. Developers often weren’t sure which content applied to the library and which applied to Mina itself.
We separated the documentation into a dedicated O1JS site. Content categories were redefined, naming was adjusted, and each page now clearly signals its context. Developers know exactly where they are and what the page refers to.
The previous navigation mixed unrelated topics and didn’t follow a clear hierarchy, which made it hard to move through the material naturally.
We rebuilt the information architecture:
-
Defined new categories such as Getting Started, API Reference, Browser vs Node, ZK Patterns
-
Structured sidebars around logical grouping
-
Standardised naming
-
Added breadcrumbs for orientation
The new structure lets developers browse without guessing where things live.
Even though the system used Algolia, search results repeated the same titles and didn’t show where each item belonged, which slowed developers down.
We improved the metadata, rewrote titles and descriptions, and added contextual grouping. Search now shows results with clear labels, such as Browser Usage → Field Type or Node Module → Field Class. Developers can immediately recognise what they’re clicking on.
New users were dropped straight into reference material without a starting point or suggested route similar to what they expect from modern documentation systems.
We added a Welcome page that introduces O1JS, outlines quick start steps, and highlights key capabilities. Each section now follows a clear progression: concept, example, integration, and advanced patterns. This structure supports both learning and everyday reference.
The original formatting used heavy all-caps styling and tight spacing, which worked for brand identity but wasn’t practical for long technical content.
We proposed two design approaches. O1 Labs selected the option with the redesigned Welcome page and updated layout. We refined typography, reduced all-caps usage, and established a hierarchy that makes code, headings, and text easy to read. We also supplied a set of diagram and graphic templates so the team can create their own visuals consistently.
Outcomes
-
O1JS now has its own documentation site with a clear identity and structure.
-
Navigation is simple and predictable, supporting both onboarding and deep dives.
-
Search results are contextual and easier to scan.
-
The visual system prioritises readability while staying aligned with the brand.
-
The O1 Labs team has reusable templates for diagrams and graphics, making future updates faster and more consistent.
Why this matters
For tools like O1JS, documentation shapes the developer experience as much as the library itself. By creating a clearer structure, improving search, and updating the visual system, we reduced friction and made it easier for developers to get real work done. The result is documentation that supports learning, everyday use, and long-term adoption.
Your product is solid. Your docs should be too.
If your documentation slows developers down, we can fix the structure, navigation, and readability.
