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 major overhaul since its creation in 2003. The ultimate goal behind this massive effort was to carry out a holistic vision of Shutterstock’s wide 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 in order 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 as well as 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 were able to increase our focus on user research using various methodologies (moderated interviews, usability tests, surveys) to get a better understanding of our customers’ pain points in their journeys. This allowed us to improve user flows and propose data-informed solutions, ensuring quick wins for both our business and our customers. As a product design team, we followed a continuous iterative process, fueled by quantitative and qualitative data.
Focus on the clip details panel behavior
User research showed us that when searching for footage, a majority of customers appreciated viewing as many similar and/or related video clips as possible, to help them compare videos. 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, as well as 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 next iteration, we decided to increase the width of the video grid to display 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 the possibility to display over a hundred keywords, a new design solution was necessary. We were already using a pill component to display keywords on the asset details pages, and 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 and filters, asset details page, cart and checkout…).
Introducing the new video subscriptions on the pricing page
Finally, another important change was applied to the Footage pricing page when Shutterstock introduced their new video subscriptions, completing the clip packs offering. 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.