Design system for We Deliver
In a nutshell
When I joined the team in January 2020, We Deliver had been developed for several years and was facing typical front end challenges of a grown product:
No reuasable components
Building the product with its underlying design system still in development led to a large variety of components and patterns, all of them being slightly different and therefore hard to maintain.
No easy updates and changes
Updates of rooted style guide components led to broken frontends. Adapting our frontend to other brands had to be done manually style by style, resulting into complex code.
No source of truth
Having neither consistency in design and code, nor things properly documented slowed the whole team down, especially when new team members had to be onboarded.
We needed a design system, that does not only bring consistency to the look and feel of our product, but enables our team to make faster decisions and collaborate better.
Even though we were already using VW’s design system, it didn’t meet the needs of a product that is adaptable to different brands. What we needed was our own design system that uses VW’s as a reference, but with components that can be managed by us.
Before we could start, I had to create awareness for the problem and convince my team that our own design system is the solution. I gave a workshop and spread knowledge about design systems during the whole process by sharing daily progress, references and material on Slack.
Once we set out a plan, I designed components in Sketch, wrote the documentation and defined style differences per brand.
Note: Due to budget restrictions as a result of the corona crisis, product development got stopped end of May 2020, so that we were not able to execute all steps we planned.
After we learned that We Deliver will be handed over to another team at Škoda, the goal of the design system shifted from solving our own problems to giving the new team a solid design and code foundation they are happy to take over:
We pointed out a clear direction of how the product should be developed further.
We tidied up our design and code using state-of-the-art methodologies.
We provided a source of truth so that the new team can work when we’re out of reach.