In 2019, Rovers design system was Material design on Android, HIG on iOS and Bootstrap (sort of) on web. The inefficiencies of this came to a breaking point and the company decided to invest in developing its own cohesive design system across all platforms. We would come to name this system “Kibble.”
My role as a product designer in this effort was 2-fold. 1) officially be the visual & ui design expert and 2) unofficially make sure that the new things we build and design are easy to find and use in Figma (design ops essentially)
Initial UI concept
When starting a new design system it’s important to know how it will work for your customer. Rover’s core customers skew a bit older and are more casual users of tech. Common complaints we would hear were “the text is too small”, “it feels boring”, or folks would describe the app as “all gray.” We wanted to make sure these core issues were fully solved at the DNA level of the system.
How might we make things bigger, more tappable, brighter, more fun? I made a quick mock up of how we could address those items on the “contact a sitter” screen. This was just an initial concept to get folks interested.
So many shadows…
Along the timeline we hired a design systems designer that I helped vet. He took on much of the interfacing with Engineering, but there was still lots for me to do.
The New Typography
A foundational principle of Kibble is consistency across all surfaces. We had 3 different typefaces for each app plus web, I was in charge of selecting the 1 we would use going forward. There were 11 contenders but it was pretty easily narrowed down to a few. I had 1 condition—we would not use Circular.
Evaluating in a focused screen context, but also in a conceptual style tile
It’s Averta❗️
You can now find Averta on any Rover platform sporting 2 open-type features: tabular numbers, and stylistic alternates of 2-storey a’s and g’s for legibility.
After our systems designer defined tokens for the typography and technical docs for engineering, I took those details and turned them into references targeted at designers. I created type blueprints and pattern documentation to be used by designers as a reference. This would be internal facing only and would be a companion piece to the system docs site.
Component Design - type utilities
To make certain type choices easy to make I created components for common page titles. heading-400s being commonly used for a multi-step process or wizard. heading-500s are a standard page title, like the inbox or bookings tab in the apps, and heading-600 for fancy brand pages.
Component Design - forms
During the component creation phase a working group of 4 designers met each week to discuss component definitions. There were things we had already agreed upon from the initial UI concept, like bigger rounded buttons, but how big? What sizes, margins, paddings, font sizes etc. all still had to be established. Typically I or another designer would design a few different options of a particular topic and bring to the group to discuss. I worked on a majority of the forms, controls, and type—specifying size, layout, and color for each element.
