Shutterstock is a global online marketplace providing royalty-free stock assets, tools, and services. When I joined the Footage and Music business unit in Montreal in 2017, the team’s main priority was to migrate the e-commerce user experience and interface onto a new tech platform. We were also charged with building a complete design system from scratch; this included everything from a refreshed style guide to scalable React components and packages. This was the company’s first significant overhaul since its creation in 2003. The ultimate goal behind this massive effort was to carry out a holistic vision of Shutterstock’s vast product offering through a consistent, seamless, and best-in-class user experience.
Navigating the design system to build Shutterstock Footage 2.0
My first mandate as the designated product designer on the Shutterstock Footage team was to help redesign the e-commerce Footage web pages using the new styles and UI components. This had to be done while maintaining feature parity as much as possible to ensure a smooth transition for our customers. I was also able to contribute to the continuously evolving design system by proposing new UI components and adjustments. As part of the team leading the company’s efforts to streamline our internal research and design processes, one of my responsibilities as a designer was to provide thorough specs documentation when handing off prototypes to engineers, ultimately enhancing designer-developer collaboration.
Data-informed design solutions
Once we launched the refreshed Footage interface, we increased our focus on user research using various methodologies (moderated interviews, usability tests, surveys...) to better understand our customers’ frustrations in their journeys. We followed a continuous iterative process fueled by quantitative and qualitative data, which allowed us to improve user flows and propose data-informed solutions, ensuring quick wins for our business and customers.
Focus on the clip details panel behavior
User research showed us that most customers appreciated viewing as many similar and/or related video clips as possible to help them compare videos when searching for footage. The clip details panel on the right was strategically made sticky on-scroll in the new experience, allowing the main call-to-action button to stay visible on the page and helping with side-by-side video comparison. One downside was the loss of some valuable real estate that could have been utilized to display more results in the sections below. As a subsequent iteration, we decided to increase the width of the video grid to show more results. We also kept the panel’s sticky behavior on scroll but simplified it and re-positioned it to the very top of the page.
Focus on the popular video searches section
The first version of the “popular video searches” section on the Footage homepage consisted of a list of keywords displayed across several columns. This layout had two main downfalls: it took up a lot of real estate on a page that was already long, and its responsive behavior resulted in visual unbalance and broken alignments on smaller screens. When the SEO team asked for optimizations, such as displaying over a hundred keywords, a new design solution was necessary. We were already using a pill component to show keywords on the asset details pages; this component quickly became the best solution for fitting more content in a tighter section. It also helped us ensure consistency across the Footage experience. Combined with an Expand/Collapse feature on tablet and mobile screens, this component allowed for more flexibility and efficiency while meeting all of the SEO team’s requirements.
Launching Shutterstock Select
In 2018, Shutterstock launched Shutterstock Select, a new premium tier of 4K royalty-free footage created by industry professionals and shot on top-of-the-line equipment, like RED and Phantom cameras. Our mandate was to design solutions to introduce this new tier in a subtle and fully integrated way across the customer journey (landing page, search results page, asset details page, cart, and checkout…).
Introducing the new video subscriptions on the pricing page
Finally, another significant change was applied to the Footage pricing page when Shutterstock introduced their new video subscriptions, completing the clip packs offer. An interactive card was strategically positioned at the top of the page, enabling customers to conveniently adjust the number of clips and the billing method to their needs and preferences.