Creating a Design System for Paystack’s Legacy Products
A good Design System is one that works for product, and not the other one around.
Project Snippet
At Paystack, we saw a chance to make our design process smoother and more intuitive. With numerous components and libraries in play, our goal was to build a design system that simplified choices and reduced repetition. By creating a unified system, we aimed to make life easier for both designers and engineers, helping everyone work more efficiently and ensuring our web and mobile products felt consistent across all platforms.
Vision & Strategy
Set Design Principles
The objective is to improve operational efficiency, starting with the design team and cascading throughout the rest of the company. So I outlined principles by which we would conduct the work:
Coherence over Consistency Our products have different requirements and user needs, that’s why it is important for our Design System to maintain coherency rather than enforcing consistency across all products.
Usability and Accessibility We aim to build products that are intuitive, effective, and accessible to all users, regardless of their abilities.
Efficiency over Speed By providing pre-built design components and templates, our designers can focus on problem-solving and user experience.
Collaboration between designers and developers helps establish and maintain a shared understanding of design principles, styles, and components.
Scalability As we grow and expand, a design system helps ensure that new products can be added quickly and easily by old and new designers, while still maintaining coherency.
The Process
I won’t cover every step in detail, as the process is fairly standard for most design systems. Instead, I’ll focus on what set our approach at Paystack apart and the pivotal moments that shaped our success.
Implement & Integrate
Changes weren't limited to the design team or Figma alone; they needed to be integrated across products and platforms.
The plan involved:
Building Design Tokens first to set the foundation for the design system.
Integrating the Design Tokens within our products in the code library, ensuring consistency between design and development.
Creating master component libraries for key components across desktop and mobile, ensuring both designers and developers could use them.
Establishing a Figma Components library, making it easier for designers to access and identify the correct components and colors.
Definition of Success
The Design Tokens has been integrated with web and mobile.
The product component libraries are being used by designers.
The component libraries for different products have been integrated with mobile and web.
Audit → Design & Document → Implement & Integrate → Adopt & Train → Maintain & Evolve
Design & Document
Documentation played a key role throughout our design process. I provided weekly updates to the design and engineering teams through digests or reports, detailing our completed work, current tasks, and upcoming plans.
This practice helped us align on timelines, scope, and resource allocation, ensuring both design and engineering were in sync.
The Result
Revamped design tokens across Figma and codebase, ensuring alignment and scalability throughout our products.
Established 3 Figma product libraries, enabling designers with easy access to consistent components and simplifying the handoff process for developers."
Successfully migrated 2 products to the new design system with full code integration.
Screenshots
Final Thoughts 💭
60% of my work was with developers
My key takeaway from this process is that developer involvement is crucial to the success of any design system. Collaboration between design and engineering, though might seem like a given, is what truly drives the system forward through constant synchronization. In our case, the design system we have today was made possible by the design team’s willingness to embrace engineering-driven methodologies, such as componentization, modularity, and version control.
This alignment with development practices was not just a practical decision; it was a strategic one. By adopting these approaches, we ensured that the design system was not only easier to implement but also scalable and efficient in the long run, enabling smoother cross-functional collaboration and long-term operational efficiency.