SR Design System ● Diana Tzinis

The accidental creation of the new SoftwareReviews Design System.

From sticker sheet > pattern library > design system.

The SoftwareReviews pattern library was a collaborative effort between myself, Alejandro G., Ariel W., Juan N., Shelby D., William C., and Randall B. Our combined expertise and creativity resulted in the successful kick-start of the pattern library, and continues to contribute to a better system with each passing day. Here's the story of how it all happened.

Organization
Info-Tech Research Group

Industry
IT

Role
Project Instigator and Design Collaborator

Timeline
November 2022 – Present

When I arrived at SoftwareReviews, we were using several different greens.

Being a new hire, it was difficult for me to understand what colours, type treatments and imagery to use when working on product features and redesigns. This knowledge lived only in the minds of my teammates. I noticed that we had been using different greens (our main brand colour) across our product, marketing, and collateral pieces.

To help with my day-to-day tasks, I had identified several different instances of the SoftwareReviews green to understand usage, with some instances proving to fail WCAG AA standards.

I started a Figma file to help me keep track of brand assets and common patterns.

This started with colour and typography.

I brought Shelby in to help me investigate where we could start aligning our greens (and other colours) to remove discrepancies and keep tint stacks robust. Alejandro presented a solution a while later: use the ITRG green colour (our parent brand).

I also created an accessibility matrix with all our new colours to visualize contrast pairings.

It morphed into a pattern library for my own personal use.

I created pages for each component, organizing patterns as I came across them. Preliminary patterns within the initial file included colour, typography, iconography, buttons, and collateral clusters (what we call our custom flat illustrations).

After compiling an extensive collection of assets, I slowly introduced the system to the rest of my teammates.

The whole team was on board once I shared my initial Figma file. A project I started to help myself keep track of common patterns ballooned into a team-wide project that everyone was excited about. We all started looking into boosting our consistency and aligning with frontend and backend teammates to estimate the effort required for future implementation.

In addition to compiling our common patterns, we started looking into improving them.

We got buy-in from design leadership to prioritize the first phase of the library.

The most challenging part of this project was to communicate the value of our pattern library to our business stakeholders. We positioned our work to address the following:

► Boost professionalism on the main site by ensuring consistency across all pages
► Create a single source of truth for designers, developers and other collaborative partners to streamline work processes
► Increase efficiency using common components, reducing cost in the long run, maximizing upon the return on investment a design system will bring

Soon enough, all designers were contributing and collaborating to make our system better.

Our journey took us from a sticker sheet to a pattern library (and we’re currently on our way to a full design system). We created components and robust guidelines surrounding:

► Colour
► Typography
► Iconography
► illustration (flat graphic clusters)
► Buttons (primary, secondary and text links)
► Shadows
► Dropdowns
► Radio and Checkboxes
► Tabs
► Navigation
► Simple menus
► Grids
► Spacing

Now, we’ve got a standardized green (and many, many other elements).

This has helped us achieve consistency throughout our product and in our day-to-day design processes. Our design system has given designers the confidence to easily take components and use them in their product/feature work. The cherry on top? Our green colour is now accessible, and has its own tint stack!

Our next step? Implement.

Our team is currently working on the gradual roll-out of new design system components, starting with new product features and page redesigns and working backward. Our goal is to establish a single source of truth that design and development teams can easily reference and use in daily product/feature work.