The Problem
When I arrived at Progressive Leasing, the majority of the design system existed in code as well as in a Sketch pattern library. However, because no central place existed for potential users to learn about the existence of the system, or how to use the system's patterns, few designers or developers utilized the system in their products.
Research
Because a documentation site isn't completely novel, we were able to begin knowing some key information about our users. Our primary users would be developers, and our secondary users would be designers. To understand these users better, we made an empathy map. We then audited a large number of existing design system sites, and documented what we found to be successful and unsuccessful patterns they had implemented.
Wireframes & Testing
At this stage we began exploring wireframes. We then wired these screens to create a simple prototype that could be tested against other design system sites.
We also came up with a few tasks for our internal developers and designers to complete in the GRIT wireframes prototype as well as other existing design system sites. We then observed and recorded their actions. We also interviewed these users to gain further insight into what they expected from a design system site, as well as what they would like.
High Fidelity
From our interviews and testing we were able to refine and improve our wireframes, and then begin building out the information architecture of the website.
From here, we were able to define the types of pages we would need, and began refining our initial wireframes into high fidelity templates. We wrote documentation for a few pages to make sure we knew what needed to be included in each page.
Refining UI
After some iteration, we decided to change to a "dark mode" design. We did this for a few reasons: First, Progressive Leasing exists in a highly regulated industry, which makes changes to its consumer facing products time consuming and challenging. The design system, however, is an internal product, so iteration can happen quite quickly. This made it the perfect place to experiment with a dark palette. Second, very few designers at Progressive Leasing had experience designing with a dark palette, and we wanted the design system to be a central location for UI expertise. Designing the majority of the site in a dark palette made us the most knowledgable about the subject on the design team.
Illustrations
From the beginning, we felt that it was important for the design system site to have its own unique identity. We defined a logo, color palette, typography, etc. early on, and I felt passionate about including illustration as well.
After some discussion, we decided to move forward with an illustration metaphor of "exploration." Space exploration, in particular. We felt that this evoked our desired perception of the design system. We wanted people to be curious about the system, and to learn more. With this in mind, I developed a hero illustration and several spot illustrations for the site.
Final Designs
With all of the content written, pages created, and illustrations completed, our site was developed. V1 launched in February of 2020 🎉
