Shutterstock Catalog

Product Design (UX-UI)
Company: Shutterstock
Research & Design collaborators: Bo Kristensen, Garrett Campagna
Year: 2021

Shutterstock Catalog: a digital asset organization solution for creative professionals

Shutterstock is a global online marketplace providing royalty-free stock assets and innovative tools, empowering creative professionals worldwide to produce their best work on one unique platform. In October 2021, Shutterstock launched Catalog, a new application allowing customers to organize and centralize access to their content. This initiative kicked off the company’s vision of transforming into a holistic platform of connected experiences that will power the workflows of creative professionals through solid tools and utilities offering. I contributed to the project’s first phase, designing several user flows and prototypes focused on asset management capabilities for Enterprise customers. Our team followed a highly collaborative process based on our past work on Shutterstock Collections, our customers’ creative workflows, and multiple brainstorming and ideation workshops.

Understanding the creative professional's workflow and needs

Our primary persona for this project was the “Creative professional,” working on projects with a team of collaborators using a Shutterstock Enterprise plan. We mapped out their entire workflow to uncover their needs and current pain points:
→ Laborious assets research and gathering
→ Difficulties managing multiple projects and teams
→ Difficulties collecting and sharing feedback
→ Difficulties to measure performance (assets, decisions)
→ Difficulties keeping track of assets history/inventory
→ Disconnected workflows and tools, context-switching

Clearly, we needed to empower our customers at several crucial points of their workflows, from asset discovery to management, and create added value around collaboration, planning and analytics features. We also needed to better integrate our current tools and solutions to achieve our vision of a holistic platform that would become the one place to go, from a project’s kick-off to its post-launch monitoring.
‍
We started by helping the Product team design different conceptual models and interaction maps to see how our existing and future products or solutions would fit together. It was a great exercise to practice systems thinking.

The "utility bar": the starting point of our tools and utilities offering

Our first focus was to develop the entry point of our new experience and platform: side navigation providing quick and straightforward access to our tools and utility offering based on our primary persona’s workflow. Our team referred to it as the “utility bar,” from which customers would be able to:
→ Discover, browse, research and acquire assets (Home)
→ Manage assets (Catalog)
→ Collaborate on projects (based on Shutterstock Workspace BETA)
→ Manage people (teams, collaborators, permissions)
→ Create and access designs (Shutterstock Editor)
→ Schedule campaigns or projects (Plan)
→ Analyze and optimize performance (Data and insights)
→ Onboard, learn, access support

—
We explored different information architecture, naming, navigation patterns, and iconography when designing the new utility bar. At first, we used terminology like “Assets,” “Manage,” or “Library” in our early design prototypes to refer to what would later become “Catalog.”

Designing a new asset management solution: Catalog homepage and features

Once the “utility bar” architecture and designs were in a good place, we kicked off the work for our new asset management solution that would allow users to access and organize their assets, collections, downloads and uploads in one place. We started with thorough competitive research and analysis, looking at products like Google Drive, Dropbox, Adobe Creative Cloud, and Bynder. Using LucidChart, we continued our process by designing many users flows to map out the whole experience. Next, we designed wireframes, then hi-fi prototypes that we presented in several rounds of meetings with our Product and Engineering teams for feedback and review.

The Catalog home page was designed as a powerhouse of numerous new features, each triggering a flow or navigating to dedicated nested pages:
→ Quick Access section to dedicated pages: Collections, Uploads, Downloads
→ Upload your own assets
→ Pin your favourite folders
→ View all assets: search, filter, sort, grid or list view
→ Edit asset(s) metadata
→ Add asset(s) to a folder (Collection or Project)
→ Download, Comp, Add to cart, Re-download asset(s)
→ Delete asset(s) (Uploads only)
→ Share asset(s)

—
We also prepared designs for mobile screens, optimizing parts of the experience like filtering assets.

Refining Collections and the folder architecture

Our new Catalog homepage provided quick access to the Collections page, encouraging us to make adjustments and reuse for Collections folders the same patterns and visual styling we had just put in place on the homepage. We also mapped out user flows for the “Add an asset to a folder” single and bulk actions and explored our nested folder structure further.

—
Focus on a convenient feature of the Catalog home page: to make quick access even quicker, users would have the possibility to pin their favourite folders, like specific Collections, or Projects, directly in the Quick access section.

Bulk actions challenges: Enterprise licensing and downloads scenarios

Designing for bulk action flows proved challenging because of asset types, status differences, and various rules and edge cases around downloading and licensing for Enterprise customers. We had to lay out all possible scenarios and prepare different alert messaging in case of a problematic asset in a multi-selection preventing the user from completing the desired bulk action on selected assets on both the Catalog homepage and the Downloads (Licensing History) page.

The Downloads (Licensing History) page also held its own challenges: we knew through past user research efforts that when managing their assets, our Enterprise users needed access to a lot of specific information for each asset, especially on licensing. The asset card component we used on the page ensured familiarity and consistency of UI throughout the whole Shutterstock experience (eCommerce + Enterprise) but provided limited space for the amount of information needed by our Enterprise users.

We leveraged progressive disclosure principles to address this pain point in a new “Asset Details Quick View” overlay opening when clicking on the asset card component. It offers a larger view of the asset and a side panel grouping all necessary information in expandable sections.

Introducing a brand new feature: Uploading non-Shutterstock assets

One key aspect of our asset management solution was the possibility of uploading non-Shutterstock assets to our platform. Our Enterprise users asked for this feature, explaining that most projects rarely included only Shutterstock assets. Instead, projects often collect assets from various sources (Google images, assets from competitors or social media platforms...), especially during the discovery and research phase, when creating inspirational mood boards or visually communicating early ideas.

To address this need and have our Enterprise customers stay on our platform to achieve their jobs, we prepared flowcharts, wireframes and hi-fi prototypes of the flow, focusing on onboarding and discovery strategies to promote the new feature and its specific policies.

Catalog was the last project I worked on at Shutterstock, as after almost 4 years at the company, I decided that it was time for me to move on to a new opportunity. I learned a lot about what still was a new (and interesting) domain to me: Enterprise solutions and professional tools and workflows. This initiative allowed maximum collaboration with many other product designers, product managers and engineers across multiple teams and squads. I also practiced system thinking and attacked complex (sometimes head-scratching and unnerving!) challenges. A couple of times in our process, we had to take a big breath and step back to pen & paper, enjoying the efficiency of quick sketching sessions with fellow designers.

After my departure, the team continued to make significant progress toward its vision of Shutterstock as a holistic platform of connected experiences powering the workflows of creative professionals on both Enterprise and e-commerce platforms. Their next contribution would be “Plan,” as showcased in the following Shutterstock Enterprise marketing video.