Company
AGI Digital
Role
Lead Designer
Year
2022
Project
Shipped
The Suretrack platform was using inconsistent elements, spacing, typography, etc…and interviewing developers revealed they often had trouble tracking down the right components and icons used in designs. There was a clear need to reign things in and build a design system.
*All components shown were designed by myself.
Developers were often frustrated when locating design elements from handoff files.
A slowdown in new projects lead me to initiate designing a design system for Suretrack. I kicked things off with a design audit of the platform. Over 2,000 screenshots were taken and combed through to find inconsistencies in elements and locate areas of improvement.
I used the results of the design audit to get early support from the development team and stakeholders. I involved the lead developers early in the process to hear constraints, concerns, and iron out a shared language between design and development.
It was also imperative that new components wouldn’t drastically alter the platforms’ layout as we wouldn’t have the opportunity to redesign individual pages.
Colors were fine-tuned for their specific uses.
A context-based color system was created using the existing colors as a basis. Colors were defined by usage like Surface, Action-Primary, Text, Accent-Alert, and others.
Context was used for the color scheme to have a stronger relationship to how a color would be used on the platform.
Spacing was wildly inconsistent across the platform, so an 8pt system was created to reign it in. We allowed for finer spacing within components of 2pt and 4pt.
Component specs were red-lined in Figma, defining individual elements with design tokens. Guidelines covering usage, best practices, accessibility, definitions, and more were written and available to all on Confluence.
All the most-widely used components were redesigned. The extent of redesigning components varied, but all were at least updated to be consistent in color, typography, spacing, border-radius, and behavior. Functionality was improved on many components. Due to project scope limitations, we had to take care that any new design and functionality wouldn’t break existing layouts once the React components were pushed live.
© Todd Zlab 2023
