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 long-term mission was to consolidate Shutterstock’s product portfolio into a unique, holistic user experience. We started with the migration and redesign of the entire Shutterstock Footage interface, completed in 2019 with the successful launch of Shutterstock Elements, strategically expanding the company’s offerings and satisfying the increasing demand among video customers for VFX packs.
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.
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.
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.
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, the pill component allowed for more flexibility and efficiency while meeting all of the SEO team’s requirements.
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…). For example, we created a new badge to help differentiate both content tiers. We also explored adding a new Shutterstock Select section at the top of the filters panel on the search results page, allowing customers to show or hide Select videos from their search results via a simple toggle switch activation.
In 2019, our team successfully launched Shutterstock Elements, strategically expanding the company’s offerings and satisfying the increasing demand among video customers for VFX packs. Before the migration to Shutterstock Elements, VFX packs were curated and sold by Shutterstock on Rocketstock, a separate, proprietary platform. To consolidate and expand our offering to Shutterstock customers, the mandate was to rebrand the existing packs and integrate them seamlessly into the new, revamped Footage experience. This project was a perfect opportunity to improve parts of the user experience while keeping feature parity and consistency in mind.
We started by having conversations with users and stakeholders to unveil pain points in their journey and agree on a plan of action. We ended up designing and integrating a complete discovery and purchase flow around the new Elements libraries in the Footage experience, with an additional section on the Footage homepage as one of the starting points.
As logical parts of this new flow, we created:
→ A link under the Footage menu in the global top navigation, directing to a dedicated landing page
→ A dedicated section on the Footage homepage, directing to a dedicated landing page
→ A dedicated landing page where customers could explore and browse by categories
→ Categories pages, grouping similar Elements libraries
→ A lister page showcasing all the Elements libraries
→ A product details page filled with information and previews for each Element library
The Element details page was an essential step in the customer journey to aid them in finalizing a decision and purchasing a pack. A large hero playing an impactful video trailer, a curated introduction paragraph, and a practical panel laying out all the technical details were the first elements on the page to provide a helpful overview of the product. When scrolling down the page, customers could discover featured effects by opening a full-screen overlay showcasing animated effects previews, as well as resourceful Behind The Scenes and Tutorial videos.
Although product design was at the heart of the Shutterstock Elements project, it also called for some branding and marketing requirements. Selecting and preparing the visual material for each Element library helped me ensure visual consistency across the website experience, from the thumbnail on the Lister page to the hero image on the Product details page. It was also a fun and creative way to explore each pack and ultimately enabled me to communicate their content and singularities most instantly.
