Project background
Pickles Auction specialised in auctions for commercial and government used cars. As the company goes through digital transformation, the design team faces the issue that there are too many dev teams to support and using the design system to streamline the process became vital.
I engaged the company's design team to lead the design system uplift as well as migration from Sketch to Figma to help streamline the process.
Challenges
The biggest challenge was inconsistency. As there were multiple designers involved in different times, different patterns were used for the same use case. There were also inconsistency in fundamentals such as colour variations, different font weight, different layout grid system etc.
To further complicate the story, Storybook (code version of the design system) was not properly implemented. Not only they look different from the design, there were also components available to in code but not in design, resulting further inconsistency.
Approaches
Update and align existing components
I initiated the collaboration between team members to set up ground rules and agree on the version to go ahead with.
- Agree on the fundamental such as font size, colour, layout and breakpoints
- Use case discussion for duplicated components and agreed on the ones to go ahead with
- Agreed on MVP version to build and support
Build out smart components in Figma
As there are non-design background team members, I initiated to build out smart components and auto layout templates to ensure easy consumption. This has also proven to speed up mockup turn around time for designers.
Streamline difference in fundamental and UI components in Storybook and Figma
I worked with the developers to establish the consistency between design and code. Apart from pixel perfect implementation, we also tried to align naming convention, structure and display method to minimise risk of confusion.
Streamline Structure and naming convention in both Figma and Storybook
Design System MVP in Figma
