UPDATING A COLLECTION TOOL
Collections allow users to bookmark assets within Shutterstock’s platform for organizing, saving, and purchasing. As part of a company initiative to migrate to a React-based tech stack and bring all of our asset types under one experience, we launched a redesigned version of the tool with usability improvements and a responsive layout.
PROJECT OVERVIEW
ROLE
Lead designer and researcher
ROLE AND DELIVERABLES
Fully responsive Collections page designs, unifying the image, video, and music experiences
Qualitative research and testing
KPIs
Increase in traffic to collections pages from mobile
Increased engagement with collections
Deprecation of old tech stack
QUICK DESIGN OVERVIEW
Our major goal with this initiative was to align Collections with our other React-based Shutterstock pages, unify the previously disjointed experiences across asset types (they had different feature sets and were built on different tech stacks), and make them mobile-friendly. At the same time, we wanted to improve findability of existing features and ensure that all asset types had the same foundational feature set so users could work cross-asset seamlessly.
Identifying opportunities for improvement
Beyond the benefits of aligning Collections technically and visually with other React-based Shutterstock pages, we also wanted to identify usability gaps that we could fix as part of the migration/redesign. I conducted a series of user interviews with Collections users to identify areas of improvement. I conducted a series of user interviews with Collections users to identify areas of improvement.
RESEARCH KEY FINDINGS
User generally enjoyed the existing Collections tool but felt it lacked some of the organizational features they were looking for. Additionally, they were unable to find some of the existing features like multi-select and sharing that would enable them to organize more efficiently and gather feedback, respectively.
KEY IMPROVEMENTS
Through user testing prototypes and iterating upon designs, we made some key improvements to the Collections experience.
MOBILE ACCESSIBILITY
PROBLEM: Collections were a desktop-only experience.
SOLUTION: I designed a fully responsive page layout with dynamic column widths. Thumbnails were also given persistent icons allowing users to trigger action menus without distracting from the visuals.
THUMBNAIL USABILITY
PROBLEM: The old experience made it difficult for users to discover features and hid key information like asset ID that they used often to reference specific assets.
SOLUTION: A new thumbnail UI displayed ID for easy reference and a pared down approach made discovering actions easier. A new design for multi-select states also made it easier for users to differentiate between selected and deselected thumbnails.
ORGANIZATIONAL FEATURES
PROBLEM: Users can have hundreds of Collections and were finding it difficult to find specific Collections.
SOLUTION: Sorting functionality was added to allow users to more quickly find assets based on date and title. “Drag to reorder” and search functionality were also designed but scoped out due to level of effort.
FEATURE PARITY ACROSS ASSETS
PROBLEM: Different asset type Collections previously had different feature sets which created an inconsistent experience for users who created Collections for multiple types (ex: both image and video).
SOLUTION: We aligned around baseline feature sets and incrementally added missing features to each asset type. This set us up to cross-merchandise asset types to users and prepare for Collections that can contain multiple asset types.
LAUNCH AND FOLLOW-UP
We launched the new Collections experience in January 2020. Since launch, we have seen a 13% increase in the number of Collections created and a 14% increase in the number of unique users who create Collections.
We are continuing to develop improvements to the experience and are also focusing on ways to improve the funnel into Collection creation.
