Since starting at Sweepr, I had always planned to implement a design system sooner rather than later. To get started I used the book: Design Systems A practical guide to creating design languages for digital products, alonsgide my own knowledge and research to give us a good platform. As we hired another Senior Designer, I thought that project would be a great opportunity to do some proper design work in the first few weeks for them. We went on to create a fully designed product and set in place documentation alongside it for designers and developers alike. We documented the DS in the tool; Zeroheight.
Firstly, we did a complete audit of anything that had ever been built in Sweepr to date. From the audit we were able to get a very clear picture of what was needed and what was required to be refurbished. We started with our primitives colour, fonts, spacing etc. and established design tokens for these items. Once the foundations were in place we could then go on to build a plethora of components, their states and patterns.
What I wanted to established with the design system, was a very clean and concise visual pattern library for sweepr's suite of tools, without losing brand personality. We did this by applying our design values throughout the DS. Our design values were established as part of our DS worskhop and applying those to each and every part of the system; Be Bold, Serve the experience and Care generously. A major advantage of developing a DS, is giving engineers a library of all the components you will use throughout your product, this was something that we were in need of to maintain visual consistency and quality between design and build environments.
As you would expect, we shaved a lot of time off our design phases with projects due to the fully established design system within Figma. We still are incrementally implementing it within the development team, but it's something that we keep pushing in order to for it be across all aspects of the product. All in all an extremely successful start to the project.