Client
Robots & Pencils
Duration
6 Months (Mar 2020 - Present)
My Role
User researcher, building design libraries, project managing governance team.
Tools
Sketch
Robots & Pencils is a small technical consulting company that designs and develops products for a variety of clients. These clients span a diverse range of industries, from finance to education technology.
A design system would help unify styles across those projects, strengthening R&P's brand. However, how might this system remain flexible enough to accommodate different clients' needs and use cases?
A set of design libraries called “Quicksilver” that is flexible and fast enough to accomodate different client requirements, while still maintaining a strong foundation to systematize design and development.
Quicksilver also features informational support, like this cheat sheet, to facillitate a stronger understanding of how design systems work. This acts to onboard designers or developers with less design system experience.
Quicksilver truly began as the Mobile Login Crank idea: a project to systematize rote work so that we had more resources to devote to custom work.
We could create our design system while including the cranks as “templates” in the system.
The login crank reflects login screens that would be mostly the same across all client projects. By creating a standard flow, we could accelerate the design and devlopment of these screens, freeing up more time for cooler work.
Before we started creating the system, we needed to learn what our designers wanted to use. Further, we wanted to evaluate the first draft of our library structure.
Secondary Research
Reviewed atomic structure, dark mode best practices, and other mental models.
Survey Responses
Tested prototype structures and learned about designers' experience with design systems.
Focus Groups
Interviewed designers and developers to learn preferences and test designs.
We evaluated these two structures in our survey. We also questioned what values designers saw in these structures and their experience with design systems.
From these results, we re-articulated the values that our designers wished for in a design system. These acted as pillars to center Quicksilver around.
Efficiency
Ability to ship designs quickly
Flexibility
Ability to mold to any client project
Usability
Facillitating the comprehension and use of Quicksilver
Simplicity
Eliminating redundancies, unused components, etc.
To begin creating the system, we started with the Prime UI toolkit as a foundation for all of our components. We then built out the rest of the libraries using Sketch libraries and Abstract for version control.
We created two sets of libraries for both iOS and Android products. We followed the Atomic Structure system, creating a Base Particles library that contained common elements across iOS and Android. From there, the libraries branch out into 3 layers of complexity: Atoms, Molecules, and Templates.
Once our first version of the design system was finished, we wanted to evaluate its utility. We scoped out a few client projects that could use Quicksilver and implemented it while soliciting some feedback from clients to learn what was working and what was not.
Product Development Lead
Ed-Tech Company
“Wow. This is going to save us so much time!”
Software Engineer
Ed-Tech Company
“We’re really impressed with the work we’ve seen from this team so far.”
Looking forward, we needed a way to make sure we could still make progress on our design system in between client projects. Since this was mainly volunteer work, we couldn't always work full time on the system.
To create some infrastructure and continuity, I assembled a governance team made up of 5 roles: Design Czar, Documentation Czar, DSM Czar, Project Manager, and Developer Ambassador. I wrote the descriptions for these roles and currently serve as the project manager.
There's plenty for us to work on. Some of what we hope to accomplish in the near future is: