Case Study
Pandle - Living Style Guide
Scroll Down
Background
Pandle is a bookkeeping app commissioned by a Canary Wharf and Wirral based accountancy practice, in active development since 2015. As features were added or updated, it became apparent that design inconsistencies were starting to creep in. In addition to this, as individual views became more complex, more and more code was being repeated to add additional UI elements.
Goals
- Minimize introduction of design inconsistencies across the Pandle UI as new features are added
- Promote and support DRY (don't repeat yourself) coding practices
- Create a "living" style guide where all components can be viewed and edited in a single location
Timeline
Dec 2017 - May 2018
What was needed
The component library needed to be built using the Ruby on Rails web application framework in order to be compatible with the Pandle accounting app. It also had to be implemented in such a way that any changes made in the component library would only need to be made once, but seamlessly cascade across the entire web app.
The component library itself had to cover all elements of Pandle’s UI, from modals and dialogues to data tables and navigation menus. Owing to time constraints and resource availability, it also needed to be an “off the shelf” solution, known as a Ruby Gem.
What I did
I believe research is a critical part of any new project, so naturally the first step was to spend some time looking into how others have addressed similar challenges. As part of my research I discovered a number of great proprietary solutions, a couple of examples being Polaris by Shopify 🔗 and Rizzo by Lonely Planet 🔗.
Both of these web apps are built with Ruby on Rails and both are extremely well designed and realised. The issue here, however, is that both of these examples have been designed and developed by dedicated in-house teams - simply too big for a single designer/developer to implement.
Whilst the concept of a component library or design system is not a new one, at the time there was a limited choice of Ruby Gems that fulfilled this particular use case. Fortunately, as a result of my research, I discovered a fully featured Ruby gem called “Mountain View” - directly inspired by Lonely Planet’s “Rizzo” design system.
After spending a little time with Mountain View’s documentation and with the help of a colleague who, coincidentally had used it previously (and written a Medium article about it, of which I was the most frequent reader) it became apparent that Mountain View was a perfect fit for the project’s needs.
Results
The wider development team quickly adopted the new design system and soon afterwards started identifying new components that could be added to it, saving more repeated work. There was also a significant reduction in duplicated code from all views that didn’t require unique templates or design features.
In addition to the code quality improvement and development time saved, implementing Mountain View recouped a significant amount of design time that would otherwise have been spent fixing accidentally introduced design inconsistencies or consulting with the development team on design issues.
