Sigma IQ Design System
I helped Sigma IQ build the foundation of their digital product suite which enabled them to streamline feature development, improve UX and UI consistency and remain flexible in their design approach.
Sigma IQ This work included a design system following the Material Design principles so that current and future employees would always abide by the most current industry-standard UX/UI guidelines.
Sigma IQ was moving quickly and building new features as fast as possible, but they were also incurring design debt. Creating a robust and scalable design system enabled them to standardize interactions across the application as well as prototype and deliver features faster.
To get a better idea of the application’s current state I conducted an audit of the entire user interface. I collected screenshots of all of the different UI elements such as buttons, inputs, menus and split them into groups. This revealed a number of inconsistencies across many different areas of the application.
From this collection, I was able to boil down to the basics and create standards like a consistent color palette and typography guidelines. With these foundational items in place, I started to recreate core elements using the new guidelines. Elements became standardized – for example, a simple button was now the basis for other types like a CTA, disabled or outline button.
After creating Sketch and Figma UI libraries, along with a prototype master template, I began building out the React components. Creating controlled components that leveraged semantic props, these dynamic components could be easily updated app-wide as the design matured.
One manifestation of this system was a set of Sketch and Figma libraries which were used by designers to quickly construct prototypes. With the little things solved, the team could focus on creating a clear hierarchy of information and consistent call to action patterns.
Designers could make changes to these core libraries and see the changes across all designs using that library. Teammates work from the same libraries so all changes are synced to each person’s computer keeping the whole team on the same page.
