Design and launch of a powerful design system for a global technology company.
DESIGN & BUSINESS OBJECTIVES
|
GOALS
To ensure a scalable, cohesive and UX/UI that would achieve durable product market fit, I led a company wide initiative to design, test and launch a ReactJS design system across all web, mobile, brand and marketing experiences for Shutterstock. Project goals included:
|
PHASES
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.
|
At Shutterstock, I 25 person UX/UI design team located in New York, Denver & Montreal. Here's a shot from our office in New York City. For the design system project, it was helpful to have a dedicated space for team collaboration and facilitated reviews with stakeholders.
UX STRATEGY & DESIGN RESEARCH
|
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. |
CONCEPTING
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. |
Design concepts for brand & marketing design
Design and content reflected more creative tone & positioning
Design Audit of all platforms business units & core features
Platform Navigation across all verticals
|
Core ReactJS Components
|
UI DESIGN & USER TESTING
|
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 for key ecommerce user experiences
DESIGN LAUNCH & SCALE
|
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. |
