nanopay Design System
Overview
Over the last 4 months, the nanopay design team has been working on re-evaluating and revamping nanopay’s design system. This was done in order to help standardize and streamline the product suite and also provide designers with reusable base components to build on top of. Unfortunately, as this is an in development, I am unable to share any specific details about the project.
My Role
As the sole designer on this project, I had to audit our current design system and design a scalable design framework that can be used across nanopay products. I worked with the rest of the design and engineering team to identify problem areas with the current system and used that research to create a robust design system.
The Need
nanopay products have been following a rough foundational design system however UI components were design and maintained in product specific flows. While this approach worked initially, it became difficult to manage as the product suite grew. This pushed us to work towards a completely new design system and UI kit to ensure we followed a consistent design language and made it easier for us to grow.
Key Considerations and Goals
Create a comprehensive design system with string foundations and an easy to use component library.
Due to the nature of nanopay products it was essential that this any components we designed were highly customizable by end users making the design system essentially a part of the product suite.
The current UI kit was also only designed to work on desktop but the with the broadening of the product suite we needed the newer components to be designed with mobile apps as a part of the considerations as well
The Process
Perform an audit of the existing UI library in the codebase and in various design files
Work with engineering, product and other members of the design team to gather requirements
Prioritize component requirements and standardize foundations
Design and implement the UI library and evaluate performance of the system
The Impact & Next Steps
We are in the final stages of designing and developing the UI library with parts of it already in production, early signs point to an extremely usable design system that has simplified our design process. Next steps would including further testing and education about the design system as well as making improvements based on both designer and developer feedback. Because of the adaptable nature of the foundations of this design system, it has been an interesting challenge to balance the robustness offered by design systems with the customizability we desire.
You can find parts of the deployed design system in this front end repository.