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