Clio Android UI kit

September 2016 @ Clio

Overview

When new designs were requested on the Android team, the Clio Product Designers were constantly recreating scaffolding elements like toolbars, navigation, views, buttons, and icons. This existing process slowed down the team while also causing the developers to wait until the designs were ready. We needed to spend more time focusing on the user problem instead of spending time creating existing UI elements.

Without a single source of truth to begin designing from, we were often looking into older projects and copying interface elements for use in new projects. This meant that our design components were scattered into many different Sketch files, making it very difficult for other team members to start new projects. By sacrificing quality in favour of speed, this also meant that there were inconsistencies with type sizes, colours, and margins between each of the projects.

To minimize confusion and improve the velocity of both the Android developers and designers, we needed a library of all the UI components in motion on the Clio Android app. A high level overview was also needed to understand the design elements currently at play within our various project files. This lead to the creation of the Android UI kit.

Clio Android UI kit - Icons and colours
Clio Android UI kit - Interface components

We created a UI audit to track the various components in the app. After identifying the pages at play, we broke them down into unique views (list, detail, and create/edit). We then used Sketch to layout the views and extract patterns. To maintain consistency and future proof the UI Kit, we relied heavily on Sketch’s symbol library, shared text styles, and shape styles. Having a consistent symbol library that included variations in colours, made it simpler to swap out one symbol for another depending on it’s state. Zeplin is also being used to provide the teams with an area to check measurements for styling, font sizing, margins, and colours.

Clio Android UI kit - Page views

After creating the UI kit, we’ve had success in starting new projects as there is now a single location to begin any project. We’ve improved our velocity significantly by not having to recreate our high fidelity mocks. The project doesn’t ned here though. The next steps will be to create a wireframe version of the Android UI kit to make prototyping faster as well. The challenges we face now deal with how to handle the constant iterations in projects from different designers and having it reflect back in the UI kit.