OPPORTUNITY

Pluralsight is built by many autonomous teams on multiple technologies. However, before the design system there was a lack of common UI elements and design standards. There were previous attempts at unifying design and the front end, but none were adopted. The company grew, patterns were reinvented across teams, consistency was suffering. I saw an opportunity to canonize design standards and build a mature system which would become well adopted.

APPROACH

It was necessary to organize the designers, champion the effort to leadership, and forge a bond with engineering.

To get the designers on board, I organized a series of component inventory workshops. In these sessions, we identified varying patterns and converged on initial standards.

A new style guide was crystalizing, but rallying the designers alone would not create meaningful impact. We had to get technical to ensure the system could thrive. I proposed the opportunity to our CTO, and got paired up with an extremely talented front end engineer. The two of us would become the Platform-UI team and own the design system.

RESEARCH

We knew that the key to adoption of a new design system, like any product, was product-market-fit. We interviewed our customers (designers, engineers, PMs) to uncover the right balance to strike.

• Why did previous component libraries and style guides not get adopted?

• How can we best improve accessibility?

• How opinionated should the system be?

• How should we support varying technologies?

After detailed interviews, we synthesized the results and used the themes to shape our MVP.

With the MVP, we went back to our customers for a series of preference and usability tests. This testing gave us insight to key course corrections. The development protocol for the design system had to be a joy to use. We continued iterating and testing with customers until landing on a confident solution.

OUTCOME

We delivered on our goal: create a cohesive design language, a shared vocabulary for teams, and building blocks to accelerate development. The Pluralsight Design System exists today in design libraries, open source code components, and a public reference website. The system is well adopted and consistently expanded and improved.

TOUCHPOINTS

Comprehensive design asset libraries in sync with code. Initially in Sketch, migrated to Figma. All Pluralsight Design System code is open source. Check out the github repository. The public facing website is a single source of truth for design and development guidelines.

OPERATIONS

With the Design System in use across the company, the mission of constant improvement relies on analyzing usage. We created an analytics dashboard to track usage on a per team and per component level. This information is used to inspect which parts of the system need attention, and inform more direct user research.

Ongoing operations include:

• Continuous discovery with users.

• Pattern inventory audits and improvements.

• Onboarding new team members onto the system.

• Encouraging adoption and contribution.

Publishing snapshots to inform the company and foster transparency and adoption.

As more and more teams adopted the design system, the Pluralsight product was able to undergo a comprehensive color overhaul. The design system is instrumental in scaling this effort.