Product Design
Collable
About
Collable is a project management and knowledge base tool for product teams. The idea was to create a tool that allows teams to create and structure vast amounts of information, present it in the shape of landing pages, and work with data in the form of smart tables.
Challenge
The challenge was to create a unified visual and interactive system that works for different kinds of document creation: document editor, web builder and smart tables. As the second designer on the project, I inherited a massive legacy of designed features and a complex design system.
Result
Completed the full redesign of the app (Collable 2.0) along with the website and table editors. Product components were assembled in a detailed and annotated design system.
Document Browser
The document browser is where users browse all documents and select which to work with. Here they can open recent works and browse the whole team folder.
Web Builder
The web builder document type allows users to combine blocks freely to get a desired document layout. It was responsive and intentional. Users could select the type of navigation — tab navigation for fewer pages, sidebar for wiki-type documents.
Smart Table
The second document type was smart tables — they allow working with databases in a way similar to Airtable or Notion. Users could also transform the table to a kanban board for project management purposes.
Document Mode
A special document mode provided a simplified interface to help users focus on writing rather than constructing with blocks.
Design System & Delivery
For such a large project, a thorough and detailed design system was created. Flows were presented with conditional states, helping developers see all choices a user may have at each step. A separate TOC page was created with all internal links to the flows.