PebblePad Design System
To ensure the consistent application of UI design across the suite of PebblePad products and to aid with the implementation of design by multiple development teams it was obvious that we needed to introduce a design system as a key feature of the design teams output. Capturing all the various components, applying consistent styling and ensuring the accompanying handover code was fit for purpose were the key challenges.
Also, we needed a central repository for the design system to live and grow, giving easy access to anyone that required it. Promoting the design system internally was also essential to raise awareness and to ensure it met the requirements of the developers charged with bringing the design to life. As this was the first design system to be rolled out at PebblePad, there was also a training and PD element for the design team, ensuring we followed best practice, realising a scalable and manageable system that was future-proof.
The goal was to roll out a scalable design system that met the needs of an organisation that valued a consistent, high quality user experience based on a solid, consistent UI. We needed to address not only the demands of the business wanting to present itself in the very best way it could through its products, but also the demands of multiple development teams requiring clean, usable code, and a product team wanting to implement rapid change and improvements whilst maintaining a clean, simple, elegant and accessible user interface.
We also wanted to centralise the system, providing easy access to anyone who needed it.
The roll out of the PebblePad design system has been a big success. We now have a centralised repository of all design components needed to build a PebblePad interface. We also have a clean code base that ensures the development teams can apply the design confident that it will be consistent. The process of expanding the system is on-going and is made easier by its central, easy to access location and structure.
The process of designing UI's within the PebblePad ecosystem has become much quicker without compromising quality or style. Handover of code is quick and painless, and any designer can approach the challenges of updating, improving or expanding the user interface confident that they will not deviate from the PebblePad design principles.
