Design System - Nextiva
Creating scalability with design systems in SaaS products
Project Summary
Reviews of Nextiva’s platform demonstrated inconsistent design. A design system was proposed to alleviate this and help with scale.
My Responsibilities
Design Auditing
Project Tracking
Design Critique/Review
Interaction Design
Timeline
Continuous for over a year.
Interesting Facts
The project team was globally distributed; my visual designer and development team for the project were in Ukraine.
Originally developed as several separate products, when the organization began to grow, I was charged with leading the implementation of the product’s first design system.
The process in a nutshell:
Product audit - I audited the existing designs across the platform to identify inconsistencies in components
Order components - Using atomic design as a framework, I built a tracking matrix for us to keep ourselves in order as we built the system.
Define foundations - We designed foundational elements first (colors, typography, grids) before moving on to complex components.
Critique & iterate - The whole design team met regularly to conduct critique and offer feedback to ensure it met everyone’s needs adequately.
Conducting a design audit
I audited the entire SaaS platform, which included a CRM, analytics, web chat, admin tools, and sundry other applications all built by separate teams. Elements in different areas of the platform had design discrepancies that, while small, added up to confusion.
Getting organized with atomic design
After the audit, I decided we would benefit from using Brad Frost’s atomic design model. Our developers agreed this would make the most sense, so I made a matrix of every component we might have, broken out by atomic category. We used this to build our roadmap and timeline for the project, starting with foundational elements like grids, typography. and color.
Defining interactions and refining components
After the audit, I decided we would benefit from using Brad Frost’s atomic design model. Our developers agreed this would make the most sense, so I made a matrix of every component we might have, broken out by atomic category. We used this to build our roadmap and timeline for the project, starting with foundational elements like grids, typography. and color.
Critique, iterate, implement
I facilitated design critique sessions on a weekly basis with the design team; we would review any recently completed components in the design libraries and receive feedback or approval, then work with development to implement them.
A system in place for continuous iteration
The work of a design system is never done; it’s a living product to be continually maintained. We made huge progress bringing order to our foundational components, which would set us up to reduce design and technical debt as time went on.
