SHUTTERSTOCK DESIGN SYSTEM
Design, test and launch of a scalable and stunning design system for a global technology company in New York City.
|
GOALS
To ensure a scalable, cohesive and UX/UI that would achieve durable product market fit, I lead a company wide initiative to design, test and launch a ReactJS design system across all web and mobile digital properties for Shutterstock. Project goals included:
|
PROCESS
We formulated a core working team of UX/UI designers, a brand designer as well as UI engineers. Our process included building a business case, designing, testing and rolling out the new design system. We designed the system to include all brand, UX/UI and communication consistency.
|
|
RESEARCH
We started out experimenting with different internal products the system would be applied to — discovering, establishing and stress testing a style(s) and library of components and patterns. We also conducted an extensive cross-platform audit to ensure that the design system would scale to meet all user and company needs. |
SYSTEM
Following the design audit and research, we began by infusing a freshness to the overall brand - coloring, logos, and tone. From there, we stress-tested the early design concepts against the global navigation - that provided us with a solid working group of components and patterns that we could then use as building blocks for the product (UI) design. |
Brand Experimentation
Brand Tone & Positioning
Design Audit
Platform Navigation
|
Core Components
|
|
DESIGN
Building upon the successful construction of the brand refresh and component library, we started to infuse the new toolkit in the eCommerce experiences - homepage, search results, and cart user interfaces. We were able to find gaps in the design system and continued to add and refine reusable global patterns to ensure a consistent experience across all user interactions on the platform. |
TESTING
We constructed a Usability Lab at the office and proceeded to conduct extensive user testing. We found that users found the new experience and design to be, "modern, clean, and helpful." Moreover, our power users informed us that the new experience would immediately expedite their creative workflow, bringing greater value to the Shutterstock business. |
User Interface Design
|
ROLLOUT
In collaboration with our product and engineering partners, we worked to build a UI migration roadmap. We started by rolling out the new design system to the Shutterstock Footage eCommerce experience - allowing the company to test, iterate and improve the design system prior to a rollout of all business lines. |
RESULTS
We succeeded in our initial goals for the Design System: The new ReactJS UI vastly improved the development capacity of the company, we built a industry-leading user experience for our user and also refreshed our brand to help ensure a durable product-market fit for Shutterstock's business performance. |
