Spiceworks Design System

Our Design Team had built up numerous UI libraries for Sketch to help streamline our design process, but found that we were “breaking” components off whenever needed and there were no written guidelines for how to use anything, what interactions were expected or documentations for patterns we used frequently. We found ourselves making the same UI decisions over-and-over, re-hashing the same questions about interactions and patterns month-after-month.

After going through an acquisition that left our team with just 2 Product Designers, I saw an opportunity (and need) for us to re-visit our libraries, organizational system and develop guidelines to help us work more effectively and efficiently.

Goal: Develop cohesive UI guidelines and design patterns for use across projects.

Tools: Figma

Team: Myself and our other Product Designer (focuses on tools)

My role: Lead designer

Deliverables:

  • UI libraries we could use for quickly and easily building new features without overthinking the basics.

  • Documentation of basic design patterns to reduce the need for micro-decisions and make our product experiences feel more cohesive.

Challenges

  • Old UI toolkits lingering around in various Sketch libraries, Invision DSM and internal websites.

  • New Spiceworks branding that had been inconsistently rolled out to the products over the past few years.

Review UI and Develop the building blocks

While we wouldn’t be able to utilize any engineering resources to ensure the UI was developed in a consistent and re-usable way, I decided it was worth-while for our team to have our own consistency as we are designing features. It would keep us aligned and allow us to spend more time thinking through user problems and less time building UI and thinking through patterns that’ already been established.

My first step was to take inventory of our existing UI and identify inconsistencies as well as commonalities across our products. I was pretty well-versed in the Community and Product Reviews UI, but had a blind spot when it came to our Help Desk. So I worked with the Lead Product Designer for our tools to ensure I accounting for their needs as well, keeping in mind that their user’s needs would be different than those of our Community users.

Sample of frequently visited pages across Community and Cloud Help Desk.

I started with the basic UI components (typography, buttons, form elements, etc.) that were used across products and built out a library of all of these elements so we could start utilizing them in our current projects. As I was building these re-usable components I wrote basic documentation around how we currently used these elements to help keep ourselves consistent. Our Design Team met on a regular basis so we could review any progress and provide feedback on how the system was working, both on the UI library side and the documentation side. Was the component built in a flexible way? Are all variations and states documented? Is the documentation clear about usage and implementation?

During this time many engineering teams were transitioning to Vuetify for their UI components, so when possible I would include links to the Vuetify documentation to ensure design and engineering were on the same page about the component implementation.

Transitioning to new design tools

The initial setup for the new system was established using a combination of Sketch component libraries and the Invision DSM tool for documentation. In early 2021 the team decided to transition off of Sketch + Invision and over to Figma, where we would be able to design, prototype and gather feedback and all in one tool. There was definitely a learning curve to adopting this new tool, but it has proven it’s worth to our team many times over (auto layout! 🙌 ). Once I got comfortable working with Figma, I quickly moved over our UI library and existing documentation.

Refresh with current branding & expand documentation

As we transitioned to Figma, I saw this as an additional opportunity to refresh the UI and incorporate our updated branding provided by the Marketing Team. This way the tone of our outreach materials would align with the experience users could expect when they visited any product in the Spiceworks family. Everything would feel modern, friendly and professional. Any projects moving forward would incorporate the updated UI and we each works with our Engineering Teams to ensure a smooth transition.

I took the color scheme that had established by marketing and adapted it for our UI, ensuring we limited ourselves to an array that fit our needs (with a bit of wiggle room for any future experiences). After all, how many different greys do we really need for text (culled from 20+ down to 3)? We also adopted the Material.io icon system both for their updated, easy-to-read appearance, as well as it’s ease of implementation. Which was a great improvement over the custom set we’d been working from whose original files were long gone.

As I moved over our documentation I would review, revise and expand it to include best practices for use that we’d been implementing, copywriting guidelines based on what we were already doing, how the user would interact with the component and any associated design patterns. I would note any UI that was not compliant with Web Content Accessibility Guidelines (WCAG) and needed further review by the team.

Wherever we used color for text I tried to ensure it provided enough contrast to meet the WCAG standards (at least AA). Some of our old brand colors were being used for text and buttons, but weren’t providing enough contrast; and if we simply applied the colors provided by our Marketing Team (again) they wouldn’t have even met AA contrast ratios.

Call-to-action

Optimizing our primary CTA colors, “dusk” and “trappist” was my primary focus. We use “dusk” for text links and primary CTAs throughout the UI, so it definitely needed to be accessible. Using online tools to fuss and tweak the color to find something that provided the contrast we wanted, while staying close to our original color, I was able to find a version of “dusk” that fit the bill.

However, the “brand” button is a style we use less often throughout the UI, so it was a lower priority for it to meet the AAA contrast ratio (AA would be okay for now). I also discovered through this process that orange can be quite a difficult color to work with when trying to maintain it’s vibrance and not muddy it too much all while ensuring there was enough contrast.

Results

Design team

The base set of UI components and guidelines have been rolled out to the Design Team and we are using it for any new projects. The Help Desk Product Designer was able to collaborate with their engineering team to ensure the UI system was adopted and integrated into their workflow in a re-usable and consistent manner to make it easier for them to create consistent UI and move more quickly.

Each Product Designer is developing a secondary UI and pattern library for guidelines that are specific to their product’s needs, that feeds down from the primary UI library. Any patterns that are to be used at a global level, are reviewed and discussed by the team then added to the main Spiceworks Design System.

Engineering teams

Once we had our baseline UI system and documentation ready, we scheduled time to walk the entire engineering organization through Figma and how the documentation was laid out. Overall feedback has been positive and we continue to develop the documentation with their assistance to ensure any details they need to work effectively are available.

Being able to see other users live when they’re in a file has been particularly helpful in pointing engineers in the right direction to find something, and collecting their input directly in the design file helps us stay on the same page about what we’re building. No more worrying whether the latest UI has been sync’d to Invision. 😉

Utilization on current projects

Our topic pages were going through a re-write, so this was a great opportunity to start updating one of our core features that gets the most traffic. While the whole system was relatively new to the engineering team, they were able to take it and run on this new project with minimal back-and-forth between us about some of the basic UI elements. This project is currently in-progress with guests already experiencing the updated UI, but you can read a bit about our progress so far.

In 2022 our sister site, Toolbox.com, was moving under the Spiceworks brand and along with this change we acquired another Design Team member. They were able to utilize our UI library and guidelines to re-skin the site to align with the Spiceworks brand with minimal friction, creating a cohesive experience between our editorial content, forums and tools. (Screenshots coming soon!)