I was contracted by a semi-startup to design an app that was to be a part of their growing suite of products. With the client already having an established product and brand, I assumed there would be a design system to work off and expand on for the new product. Nope! No design system…UI kit…style guide…not even old design files, which the previous designer apparently absconded with.
The objective was to help setup this client for the future by building a scalable design system to support their growing suite of products.
I started with the arduous task of inventorying every field type, button, icon, colour, font, etc. until all states and variations of all UI elements were accounted for. With all the UI elements documented, I performed an audit to identify the various redundancies, as well as gaps and inconsistencies in the design patterns. I presented the audit to the client along with my various recommendations, and after several edits and iterations, we were left with an inventory of UI elements and UX patterns that was consistent, responsive, and met accessibility standards.
I began building the new design system in Invision. Working with the client’s frontend team, I was able not only to document the inventory UX patterns and UI elements, but also embed the frontend blocks of code associated with each component and element so developers could more efficiently reference and implement them in current and future products.
Together, we established a consistent, maintainable, and scalable design system that became the foundation for current and future products. By eliminating all design and frontend ambiguity and complexity, the client saved an immense amount of time on their design and development process. After completion of the design system, I worked with the product and development teams to design the app I was originally contracted to work on, and we were able to achieve consensus faster, collaborate more effectively, and complete the design and frontend in a matter of weeks, instead of months.