Menu
Dove
Design System
Product Design Lead
Product Design Lead
Strategy
Product thinking
Сustomer experience
Interactions design
Creative Direction
Leadership
Before becoming Kudosity, our ecosystem was fragmented products were scattered across domains, lacking a unified identity. As we developed an AI-driven conversational messaging platform to help businesses automate and personalise SMS interactions, we recognized the need for more than innovation; we needed cohesion.
The solution was the Dove Design System: a scalable framework that ensured consistency, streamlined development, and empowered teams to deliver efficiently. It became the foundation for turning our vision into reality.
Dove System Principles and Approach
The Dove System focuses on simplicity and scalability, using a component-based design strategy instead of traditional design tokens and atomic design.
My role
Design System Owner, Contributor & Coordinator
Scope
Led 0→1
Design system initiative from the ground up
Initial Team
Designer + Developer
Collaborated with 1 front-end developer to build the foundation over 6 months
Team Growth
Collaboration
After 1 year, onboarded additional 2 designers and 2 front-end developers
Ongoing Work
Scalable design system
Created, scaled, managed, and maintained the design system across teams
Intial Assets
- Created colours, typography, and spacing for SaaS product ecosystems.
- Adopted Inter font for visual identity (blends well, not too strong).
- Used Radix UI for behavior-rich, accessible, customizable components.
- Standardised Streamline icons for consistency.
We developed the foundation and components based on the Conversr product, including:
- Buttons
- Navigation
- Tables
- Popover
- Breadcrumbs
- Lozenge
- Input fields
- Switch
We also partnered with developers to establish Storybook as a centralised and synchronised component repository.
Component Development
Design System Structure
Strategy for Evolution
- Collaborated with frontend developers to anticipate and refine scalable components.
- Tackled edge cases and scenarios with stakeholder feedback.
- Continue to prioritise accessibility by ensuring appropriate color contrast and font sizes to align with WCAG guidelines.
- Grouped assets into 3 squads for better development and management.
- Foundation: Based on Conversr UI, developed the Dove Design System with a focus on scalable, simple assets for a unified ecosystem.
- Initial Collaboration: Worked with a front-end developer to build the system by selecting key UI components.
- Team Growth: Expanded team with two additional designers to create global assets, unify application needs, and standardise the system.
- Versatility: Generalised components for diverse use cases, adhering to UX best practices and UI trends.
- Developer Collaboration: Maintained regular check-ins with developers to streamline collaboration and improve development efficiency.
- Future Focus: Emphasised scalability and reusability, consolidating components to address multiple problems and enrich the global component library.
Style Guide Development
As some product features required migration to a new stack and more complex UI interactions, challenges emerged, such as insufficient developer information during initial UI mockups and alignment issues in Storybook. To address these, we prioritised creating detailed style guide documentation six months into the project to ensure clarity and consistency across all components.
Ongoing Management
Integration
Coordinated design and frontend discussions, secured approvals, and aligned with leadership for cohesive implementation.
Execution and tracking
Initially used Notion for schedules and progress but shifted to Figma and Confluence for smoother team management. Delivered five component style guides per quarter, achieving 80% completion in a year while embedded in the squad as BAU.
Continuous Improvement
To ensure a smooth and consistent implementation of our design system, we’ve decided to improve the tracking of past and current component developments by:
Version Update
- Dove Design System 1.1 established in one year with assets accessible in Figma and Storybook.
- Began style guide implementation post-foundation.
- Maintaining official records on Confluence pages.
- Recording actions and updates within the shared Figma file.
Adaption
- Reduced manual efforts through reusable components.
- Maintained focus on efficiency and alignment with company goals.
Our App Is On Fire
Key Achievements and Highlights for B2B Product Design System
The Dove Design System has made significant progress, with a strong foundation in place and a clear roadmap for future enhancements. The team is well-equipped to continue delivering high-quality, scalable design assets to support the product’s evolution.
Developed components
0
+
Completed styleguides
0
+
Component Library Growth
Expanded the component library with 49 versatile components since 2022, aligned with evolving UI/UX needs.
Streamlined Design Consistency
Developed 30 styleguides in collaboration with design and tech teams,
The design system will continue evolving with enhancements for richer, more flexible components, focusing on advancing key elements like date range calendars, drawers, and flexible tables. Backed by adequate resources and team commitment, it is well-positioned for sustained growth and innovation.
