Prism Design System
As a hardware company that was growing with many new software offerings, Shure had a need for scaling design work without creating a one-off solution for each new product. That led to the creation of Prism, a collection of repeatable patterns, components, and assets that build customer confidence and familiarity across all Shure products.
My Role
Art direction
Visual design
Asset creation
Content creation
Advocacy and education
Worked With
Contract developer
UX Platform Lead
Design Research
UX Team
Marketing Design
Timeline
August – October 2018
Background
Early on in my experience at Shure, we created a bare-bones design system. The site was content-focused, with no thought given to visual design. It was also a pain to manage and update, as we didn't have any sort of version control. The design system was derived from Bootstrap components, and we made a calculated decision to switch to Google Material Design as our base for better application support.
Some of the goals we started with were:
Make it easier to update
Implement version control
Make it easy to find what you need
Make it branded and attractive
Research
Scope
7 Internal interviews across Product Management, Marketing, and Engineering.
Stimuli
We showed participants the existing design system site, which was a bare-bones site generated with Markdown and Jekyll, and prompted them on a variety of tasks with a think-aloud protocol.
Goals
Probe on tools, experience, and needs of those expected to use the design system. Use those findings to inform the design system redesign.
Research Methodology
Contextual inquiry. We took detailed notes, verbally recapped the interviews, and then consolidated our notes into high-level, first-person statements.
Themes we saw
Tool pragmatism
Flexibility VS out-of-the-box
Process and communication
Opportunities
Based on our findings and the themes we arrived at, these are some opportunities we identified.
Include assets and tools in one place.
Finding ways to show the purpose of the design system and how its different parts relate.
Explaining what the gaps are, platform differences, and offer guidance on bridging gaps.
Offer flexibility, to let designers produce interesting work and save time.
Show rather than tell, wherever possible.
Make it public-facing, so I can share it with agencies and non-work contacts.
Show what's coming next and what's new.
Ideation
My next step was to take all of that inspiration and knowledge from research to start quickly laying out some site sketches.
Lo-fi Concepts
We took the previous sketches and narrowed them down to what would best fit the content structure of the site. I chose three main directions and evaluated them internally before deciding on one approach.
Solution
The information architecture for the site was based on a card sort done with test participants. Using this data, we were able to prioritize content and give a predictable structure to the design system.
As I worked on the final design, Shure was working with an agency to refresh the brand. I coordinated with the brand manager to pull in elements of the refresh (color, typography, shape, etc.). Not only would the design system be a new tool for all teams to use, but also a first representation of the new brand design – driving excitement and adoption among our teams.
We contracted a front-end web developer to build the site as a Jekyll template (we were using Jekyll to compile Markdown into the full site), and I worked alongside him to ensure the site behaved as expected.
We needed a name. I facilitated a naming workshop and pulled everyone from the UX team into it. The workshop was based on proven methods by naming agencies, and the result was Prism.
Prism represents the spectrum of applications and incarnations of the brand in the software space. We have a singular brand color, Ignition Green. But like a ray of light applied to a prism, the brand idea can be implemented in a multitude of ways. It has hints of flexibility, engineering, and openness.
The design system is okay as a set of documented patterns and guidelines, but is much more useful as libraries and assets that can be shared. We adopted a tool called Abstract, and created Sketch libraries for every single component in the design system. These libraries can be called into any Sketch document and applied, making the process of creating high-fidelity mockups a breeze.
Below are a few selected pages from Prism:
Impact
The impact of Prism is widespread at Shure. We created a system that would make it easier for UX designers to reuse components, and make things more predictable for engineers. But I can't count how many times I've shared things with other teams such as Marketing, Product Content, Design Research, since it really is the foundation of software at Shure.
I also didn't anticipate how useful it would be for myself, having a searchable site that documented all of my previous platform design decisions. I didn't have to rely on memory, or searching old emails and messages, to find what we decided would be the best approach to a design problem.
It set an expectation of reuse, so that we are spending less time creating one-off solutions, and more time solving complex UX problems. It has enabled us to focus on the future, creating visions for product experiences, and using those visions to alter the course of Shure products.