About

Mature design system made from scratch. Adjusted to current and future needs; scalable foundations and components. Responsive elements for mobile, tablet and desktop pages. Written in single language, based on Vuetify.js

Discovery phase

The colour palette seemed to never have been set for this product. Styling for buttons, icons and other UI elements used on the portal was very inconsistent. Typography also consisted of many different font families and had no hierarchy.

Process

1. Document pages of every scenario on current design
2. Meet with Lead developer to decide on language and study it - Vuetify.js
3. Focus on creating key elements like Typography, Colours, Icons and Grid system
4. Define standards for states like Active, Focused, Disabled etc.
5. Build components like Inputs, Controls, Dropdowns, Modals and many more
6. Build Master components and Variants for every page and section

Solution

I managed to set a meaning behind main colour palette along with Primary, Neutral and Semantic colour standards. Created Design System enables future work to be created and replicated quickly and at scale. Building process of Design System was supported by Lead developer in order to follow standards of Vuetify Design Framework as much as we can hence adding my touch of creativity. It helps create visual consistency across whole product.