PlusCash Design System
Designed and built a comprehensive design system from scratch, creating scalable components, design tokens, and guidelines to ensure consistency and efficiency across the platform while supporting UI updates and enhancements.
Visit Pluscash.club
Building a Scalable Design System from the Ground Up
The company's rapid UI changes and evolving brand identity created inconsistencies across the product, since there was no existing design system in place. As I took ownership of the project, my goal was to establish a robust Design System from scratch—one that would align with the new brand guidelines while enabling the development team to build a cohesive and scalable component library. This required structuring workflows between design and development to ensure smooth implementation and long-term scalability.
Established structured collaboration through meetings, agreement frameworks, design reviews, and standardized workflows across cross-functional teams.
Defined Figma as the single source of truth, integrating with Jira to streamline design-to-development handoff and ensure accessibility for all stakeholders.
Developed a component library and token system from the ground up, ensuring consistency and alignment with brand guidelines while collaborating closely with the development team for feasibility assessments.
Built a comprehensive knowledge hub to facilitate asynchronous learning and onboarding, empowering teams to leverage the Design System effectively.
DesignOps at Pluscash
Establishing clear workflows and alignment across teams was essential. With rapid changes and frequent agreements, proper tracking and documentation became a priority.To streamline onboarding, I created a README guide covering design patterns, standards, and best practices.
I also restructured Confluence to track decisions from design-dev alignment meetings effectively.Working closely with the team, we introduced pre-, mid-, and post-development assessments to ensure consistency.
Additionally, I formalized workflows between squads and the Design System team, defining how to request new components and communicate needs.To support asynchronous learning and onboarding, I introduced a library of video tutorials within the Design System, ensuring designers and developers could quickly adapt and stay aligned.
Building the Foundation of the Design System
I focused on defining core components, tokens, and design principles while aligning closely with development to maintain consistency.To keep things simple and efficient, I established a clean architecture from the start, avoiding unnecessary complexity and ensuring components were optimized for scalability. Working closely with developers, we defined clear naming conventions and structured documentation, making the system intuitive and easy to adopt.
Designers often work under tight deadlines, which can lead to inconsistencies in spacing and hierarchy. To solve this, I ideated and developed an automated spacing system that ensures uniform vertical and horizontal distances while maintaining design flexibility.
With this system, designers can freely compose layouts by simply centering and stacking components. Each element is pre-configured to respect spacing rules, ensuring consistency, improving hierarchy, and accelerating the design workflow for all system users.
Defining Core Design Elements
What We Achieved
A cohesive, scalable, and efficient design system that strengthens brand identity, eliminates design inconsistencies, and accelerates development workflows.
- Powerful Brand Presence – Ensured a unified, digitally native experience where brand and product speak the same language.
- Error-Proof System – Introduced structured components and tutorials to eliminate design inconsistencies and improve adoption.
- Business & Operational Benefits –Streamlined design-to-development workflows, and ensured UI consistency across products.