SaaS Design System

Company

A web app platform that helps communities across the U.S. manage and deliver thriving publications and digital content that connect residents to hyper local stories.

Users

Corporate staff, publishers their staff, and their advertisers.

Challenge

On the verge of celebration 15 years as a company, the Development team realized their lack of visual/UX consistency across the SaaS platform was hurting their efficiency tremendously.

Role

An end-to-end Product/UX designer with in-house Engineers.

Design Audit

To kick off the project, I took screenshots of the existing web app and began dissecting each page into elements that would comprise a design system.

I organized each type of UI element into sections and categories and made notes to review with the team.

This process highlighted the lack of consistency in UI elements and further validated the need for a design system.

But the team had a good laugh when I showed them the near 50 shades of grey used, varying from warm to cool.

My original plan was to find each of the UI elements in Figma designs to use in created the design system components but this was only relevant in a few cases and most of the components needed to be created with new component designs.

Team Feedback

I wanted a plan to get feedback in a variety of ways from my team. First was a discussion of the design audit. This wasn’t meant to shame any past decisions but rather understand the circumstances in which they were made. I learned much of the web app hasn’t been touched in a decade and has legacy programming languages that are begging for a refresh.

I also had a quick brainstorm about what values the Development team wants to focus on. I had seen this used in various other design systems and loved how it could inform the design process to focus on the team’s top values to collectively make quick decisions.

And finally, I planned to present the design system to the team once it was at a good stopping point to get their invaluable feedback.

Basic UI

I started out establishing a system for how we use structure, spacing, colors, and typography.

• Structure: I specified the desktop column structure based on what kinds of layouts currently exist and how we could narrow them down to be more consistent while keeping the general grid intact.
• Spacing: The team uses Tailwind CSS which is where I pulled spacing guidelines from. This was used throughout the system to inform spacing within components and design patterns.
• Colors: I worked closely with the company’s marketing team to develop a color palette that both pairs well with the corporate brand while being accessible and functional for use in the web app.
• Typography: While there was some consistency with fonts, I narrowed down from two sans serifs to one that works best for web apps.

Cohesive Components

Because no design system existed, I was able to start fresh.

I used the audit to inform which components to add, establishing a rule that 3 or more of an object would require a component added to the design system.

Engineers provided continual feedback on missing component states and styles and I continued to refine the designs until I felt they were ready to test.

Testing the Components

While the system will be continually refined as we continue to update and add to our platform, I wanted to test out the design system with current pages of the web app to make sure it works in practice.

I selected a wide variety of pages to see how the system could be applied.

In some cases, it was a 1 to 1 swap and in others, I may need to do some research and flush out how to improve a screen before we apply the new components.

Feedback

In the final steps of the project, I demoed the whole system along with my page examples and also gave a quick demo of some Figma features I had found weren’t widely known or understood by the Development team.

While the team does use Figma designs currently to build their work, they hadn’t had much experience with seeing a complete set of component states and styles. I received a bit of pushback on the 3 styles of buttons but once I showed how they would be used, it was chalked up as a misunderstanding.

Launching

With the excitement high, the team planned out a launch, divvying up components to the front-end engineers to begin working through. We agreed to have a review a week in to make sure everything was running smoothly.

Next Steps

If there is one touchy subject with this team, it’s responsiveness of the web app. While it is always important to allow for varying screen sizes, the team had previously excluded a mobile view from consideration because of the typical content of each page in the web app is a table with 10 or more columns and dozens of rows. We reviewed options and selected a style solution that compresses tables to a more vertical view if necessary.

For Documentation, the team agreed the goal is to eventually build documentation outside of Figma but as we build out the new system, we wanted to focus on having less to keep up to date if we need to quickly pivot.