When I was hired at Shutterstock, part of my job was to maintain, organize, and evolve the Shutterstock Design System. Over time, I shifted from working on the Design System part-time (while primarily working on other product initiatives), to managing and evolving our Design System full-time. In the years since I started working on it, I have matured and advanced our UI Kit, component library, and style guide. More importantly, I have made the Design System an integral part in company culture, workflow, and process. I have also developed a long-term roadmap to ensure the Design System continues to grow and improve.
Project Role:
Lead Designer
Year:
2019 – Present
Designed with:
Shutterstock
Prototype Links:
Interactive Style Guide Site
The core of our design system is an interactive Style Guide that is accessible to designers, engineers, product owners, contractors, and more. With the style guide, anyone can see all the available components and even see and manipulate the code that generates to them to test customization, combinations of components, overrides, and more right in the browser.
Repository of styles
The Style Guide also serves as a source of truth for things like icons, colors, typography, and CSS classes that can often get messy without a way to easily replicate and reproduce our brand styles. All of these styles are backed by a well-organized and documented list of Design Tokens that form the core of our branding.
Customizable, Responsive, Interactive Components
While the Style Guide serves as the source of truth for the whole company, the Figma UI Kit is the core of all designs done at Shutterstock. This library of thousands of components, styles, patterns, templates, and more is key to the UX team's productivity and efficiency. Along with having all possible variations and versions of each of our components, all of them are fully customizable using the overrides panel, responsive, editable, and can be clicked and used in prototypes with all the interactions built right in.
Example Component: Search Bar
Example Component: Form Fields
Example Component: Search Filters
My role
Currently I am a Lead Product Designer at Shutterstock and am devoted, full-time, to advancing and building our Design System. My role in doing so includes collaborating with engineers to develop components; creating our Figma UI Kit,; managing the work of other designers who contribute to the design system; critiquing and assessing other designers' work, ensuring everything in their designs can be achieved with our components, and more. I also work with other teams outside the UX organization (such as Marketing and Copywriting) to ensure everyone is able to efficiently use and contribute to our components.
