Clear Books software style guide

Issue

Initial impression of the application flagged up inconsistencies with the UI due to the overuse of inline styling used throughout the product. On closer inspection we discovered this led to slow page load, heavy cognitive load for the user and also meant a longer workflow for the engineers working on the product. Our hypothesis lead us to believe that the inconsistent application style was also affecting the conversion rate by driving away potential customers.

Solution

To bring unity in the visual style and speed up the development process, we designed and delivered a style guide. This style guide serves as a fully functioning toolbox for engineers to build consistent and beautiful pages which reduced design resource necessary per project.

 


Introduction

The aim of the Pacioli movement is to bring usability improvements and consistency to Clear Books software design. Improving the legibility throughout the system is the main scope of this project, and this includes development in responsiveness down to tablet size devices, being mindful of accessibility issues and also limiting the use of icons.

This project seeks to produce a superior level of usability for all Clear Books products using the minimum amount of styling and code possible, whilst working within the constraints of our current system. We seek to remove unnecessary styling and actions which do not aid the usability, legibility or the accessibility.

Project Pacioli strives to create a flexible system which can be easily reused whilst following the guidelines. This style guide hopes to give everyone the power to design consistently beautiful and easy to use features. Design standards and ideal usages for the most frequently used features and components were listed in this guide.

Our rule of thumb

– Only build what is necessary.
– Minimum of WCAG (Web Content Accessibility Guidelines) 2.0 AA grade.
– Design and build for reusability.
– Allow for easy global change in future.
– Maintain current brand style where possible.

Team

Project lead Myself
UX Hemi Trenholm
Design Sheila Cheung & myself
Front end developers Edd greer, Gergő Izsáki & Fiona Przybylski

Skills list

R&D, UX design, wire-framing, user testing, Adobe illustrator CC, UI design, grid-set, CSS, HTML, JS, SASS, training customer service, project management, JIRA, Agile and Scrum.