Building the Cabells Design System

Guidelines and UI components for improving communication and development efficiency between teams

Building the Cabells Design System

Guidelines and UI components for improving communication and development efficiency between teams

My Roles

Product lead, UX/UI, research, project management, QA, frontend development

Team

Designer (me), 2 developers

Tools

Figma, TailwindCSS, Vue, Strapi, Confluence, Jira

Year

2021

My Roles

Product lead, UX/UI, research, project management, QA, frontend development

Team

Designer (me), 2 developers

Tools

Figma, TailwindCSS, Vue, Strapi, Confluence, Jira

Year

2021

Problem

Our designs lacked consistency, hurting user experience and brand image. Without a single source of truth, collaboration between design and development teams was a challenge and limited our ability to quickly scale up with new features and products.

Solution

We designed and developed a comprehensive design system that tackled the challenges of inconsistency and inefficient collaboration.

It provided a single source of truth for all design assets, including UI components, style and content guidelines, accessibility compliance (WCAG AA), best practices, and code snippets.

We used tools like Figma for design mockups, Confluence for documentation, and Jira for project management. It was built with live code using TailwindCSS and Vue while being controlled by a customized headless CMS (Strapi) for content management.

Impact

Development time for new features was significantly reduced within the first few months of implementation and collaboration improved between design and development teams. It was successfully used on the initial launch of Journalytics Medicine.

While there’s always room for improvement, the design system serves as a strong foundation for future Cabells teams to build on and deliver a unified experience for customers.

Process

Early style guide

Sketches

Project management in Jira

Project management in Confluence

Search platform UI using the design system