Cross-Asset Pairings In Search Results
A quick overview
At the end of 2021, Storyblocks’ product leadership determined that the Content Group’s primary goal for 2022 was to expedite users’ video and audio content discovery by introducing a new product strategy leveraging the company’s growing machine-learning department.
Cross-Asset Pairing, or CAP, would be a series of releases over the next several years. This first phase of the CAP rollout would address 3 critical points in the user flow:
The Search Bar in the site’s Top Navigation, the primary navigation point for users in their search for stock media
The Search Results Page, where content relevant to a user’s specific search parameters are merchandised
Content Collections, curated folders of related stock media content created both by Storyblocks and our content contributors
The problem
As an extension of the old Search Bar experience, the existing Search Results Page was very content-specific. If you searched a specific term within video content, you would only get video content in your results. In order to even start thinking about any kind of related audio, you would need to start a brand new search within audio content.
Our users (and our product leadership) wanted to break down this very siloed approach and begin introducing a new experience – one where you could begin searching for video and content at the same time.
The Solution
I wanted to look at the existing experience as a starting point. What were our users accustomed to seeing? What functionality were they already familiar with? Perhaps I could use this as a starting point.
I knew that the Video Search Results Page (the design and functionality specifically created for video content) already had several action icons that would appear on any thumbnail hover. There was a particular ‘More Like This’ feature that that would expand a drawer to show related videos, possibly alternate shots from the same shoot.
The Content Group already had data and feedback that confirmed user’s liked this functionality – so I set out to try and adapt it for recommended audio content.
The Squad
Product design lead
Additional product designer
Product manager
2 developers
Data scientist
Machine learning dev
1 customer researcher
Tools Used
FigJam for collaborative workshops, brainstorm sessions, & quick, real-time design sessions
Figma for product designs and prototyping
Notion for project & product management
MY roles
Design management, which included setting the overall product design direction and project management for the entire CAP initiative. Ensured consistent, cohesive and complementary user experiences for each of the 3 focus areas.
Product design lead, taking the initiative in design exploration and prototype building in conjunction with my product designer(s) per initiative.
User research, actively partnering with the company’s User Research and Data Analytics departments in conducting user interviews, surveys, and evaluating qualitative and quantitative data.
Product management, supporting Content’s 2 junior product managers in product requirement definition, writing, and backlog refinement.
Our Timeline
For the overall CAP initiative, the Content Group had 8 months. Each of the specific sub-projects within CAP had some degree of timeline overlap, but each had their own schedule. The timeline for CAP in the Search Results Page:
Strategy: 4 weeks
Discovery & research: 4 weeks
Iterative design & testing: 14 weeks
Software development & Q/A: 6 weeks
The Process
My design process follows the same core structure and changes between projects, based on things like timeline, company resources, and the team. Below is my design process for all 3 of the focus areas, though each was done at separate times during the overall 8 month duration:
Project Kickoff
Squad Lightning Demos
Product Requirements
User Interviews & Data Analysis
My Product Process with the Squads
Design Lightning Demos
Sketch
Lofi Wireframe
2 Ideas
Preference Testing
Mid-Fidelity Prototype
User Test
Hifi Prototype & Design Handoff
The Design Process
Interviews
1
Users liked the “Search Similar” feature already used for video content.
Many suggested they would like something similar for recommended audio content.
I partnered with my User Researcher to write and conduct user interviews that would be used to inform the Content Group’s overall strategy for CAP.
As part of our discovery and ideation phase, we spent 3 days interviewing 12 users remotely using a combination of generative and contextual structured questions. Half of the users we spoke to were existing Storyblocks customers who were very familiar with the current experience; the other half were users who had never before used Storyblocks.
We learned the following, which the team used as a reference throughout the entire development process:
2
Users wanted a way to preview audio content while still seeing the video on-screen.
They also expressed a desire to have one-click controls to save or bookmark each audio track.
Copy Tests
As we dove into the work, I almost immediately realized everyone within the Content Group was using inconsistent nomenclature – what the heck were we calling all of these features? Some people were calling it “CAP”, others were saying “Recommended Music”… If it was confusing to us, it would be even more confusing to our users.
I knew that if we need to be thoughtful and intentional in our copy, as it was going to deeply impact the performance of such a new experience.
I advocated that an extra two weeks be added our schedule so that we could bring all copy options to Storyblocks’ Brand team, getting their partnership in running tests with real users. Once this was approved, I used those 2 weeks with the Brand team to run an offline test with 30 different users.
The terms we settled on testing included:
Suggested Music or Recommended Music
More Like This or Search Similar (for related video content)
Below are the terms that won:
20%
80%
‘Suggested Music’
‘Recommended Music’
70%
30%
‘More Like This’
‘Search Similar’
Design Exploration & Wireframes
Similar to the CAP in the Search Bar initiative, my usual preference to start with literal sketches was not necessary, with me starting instead with rapid lo-fi wireframes to quickly explore the many possibilities.
Using the existing ‘More Like This’ drawer design was a great anchor point for me to begin, providing a natural starting point for the question of “Where would recommended audio content go?” on the Search Results Page. The real trick now was two key areas:
The thumbnail preview, both defining the on-hover experience and the layout/hierarchy of information. There was already…a lot going on in that small space. How could my designs prevent overcrowding and avoid overwhelming users?
The design for the new expanded ‘Similar Music’ drawer. How could design and product management work together to determine which aspects of the audio preview were absolutely necessary? And how could I design this drawer such that it was intuitive for users without detracting from their primary task of searching for video content?
Below are some of the design evolutions that I designed, often in real-time, with my product managers and my additional product designer. We would use several of these in subsequent user testing to both challenge our hypotheses and determine which designs were the most user friendly.
Thumbnail Design Exploration
In a series of independent design sessions and real-time workshops with my additional product designer and PM, we played with numerous permutations of the information presented on the video thumbnail preview.
Drawer Design Homogenization
Even in our ‘quick-and-dirty’ lo-fi wireframes, I quickly realized that we were not only departing from the design of the existing ‘Search Similar’ drawer for video content, but that the existing drawer itself was…well, in need of a makeover.
I made sure that product management and engineering knew that whatever design and functionality we landed on for the new ‘Recommended Music’ drawer would need to be accounted for in our backlog for the ‘Search Similar’ drawer.
While this was outside of our original scope, my bringing it to the squad’s attention as early as possible was critical in our ability to easily pivot.
We had a few key questions in mind:
Was everything currently included in the thumbnail on-hover preview necessary going forward?
Should we redesign the existing on-hover icon layout?
How were users engaging with the existing icons?
Would we need to include complementary text to help inform users what these functionalities were?
If we included complementary text, should it be omnipresent or an additional on-hover experience?
‘Recommended Music’
Drawer Design Exploration
We had similar conversations around the drawer design itself. Once it was expanded, what information was absolutely necessary, and not just from a product requirements standpoint, but a user’s?
Some questions we were asking included:
Did we need to include everything from the Audio Search Results Page design?
If yes, how could we do so in a significantly more condensed space?
If no, how could we determine what was necessary, and how much liberty did we have in deviating from the original layout?
I knew this experience was similar yet distinct from a full-blown audio search, and design would be critical in ensuring users engaged with this new CAP functionality.
My additional product designer and I rapidly explored all kinds of layout permutations with varying degrees of included info to help illustrate our ideas, concerns, and need for preference testing.
･ﾟ: *✧･ﾟ:*
Kindly note that I cannot share all of my design explorations for this project at this time, but hope that what I am at liberty to share is interesting and engaging! Please feel free to reach out with specific inquiries.
Usability Testing
4/5 users preferred to have an active state for both the ‘Recommended Music’ and ‘More Like This’ drawers to help them keep track of which drawer was open, and for which specific video.
I partnered with my User Researcher to write and conduct user interviews that would be used to inform the Content Group’s overall strategy for CAP.
As part of our discovery and ideation phase, we spent 3 days interviewing 8 users remotely using a combination of generative and contextual structured questions.
We learned the following, I used as a reference throughout the entire development process:
Continue to let the content be the star. Until the user hovers over a video thumbnail, they do not care to see any of the action icons.
Complementary text for the ‘Suggested Music’ icon reduced hesitation and improved user engagement by 30%.
UI Design & the Prototype
I am proud to present the final designs for the desktop version of all states for the new Cross-Asset Pairings in Search Page Results. I intentionally leveraged as many existing styles and assets as possible from the Storyblocks design kit while contributing a few new elements.
The UI designs below and the prototype were used as part of our design hand off to the engineering team.
User searches for their travel video
User Hovers over ‘Recommended Music’
User Hovers Away From Video Thumbnail
Active State & Drawer persist
User Hovers over a video
User Selects ‘Recommended Music’ &
the drawer opens
User Listens to one of the recommended audio tracks for this video
Lessons Learned
User trust in how recommendations were made was a very valid concern that we had not accounted for and needed to dedicate more thought to. As we tested our ideas with users, I noticed this trend crop up.
As Storyblocks continued to build on our first steps with CAP, how could we address concerns around how and why audio recommendations were being surfaced based on a video query?Users were apprehensive about using recommended music because they were concerned any audio tracks we surfaced were also being surfaced to everyone else. No one wants their video to feel the same as someone else’s!
I believed that one of the key focus areas of 2023 should be around how design could help users feel more confident that the content recommended to them was uniquely theirs.It was time for the Content Group to fully re-examine their use of the video thumbnail on the Search Results.
There was an assumption within the group that we could simply add on to the original design. Early on, I argued that, from a user experience POV, the design was only optimal for 3 quick actions. Now that we were adding more and more functionality, the original solution was no longer scalable.
I advocated for more development time so that we could “blow up” the Search Results page design entirely and start over. I learned that I would need to continue this advocacy going forward.
Next Steps
Review the performance of the new Search Results page experience.
Conduct more user interviews as the entire CAP initiative is rolled out, specifically to gauge the efficacy of the comprehensive experience for all 3 focus areas (Search Bar, Search Results Page, and Content Collections).
Assess the frequency of cross-content downloads – in other words, how often were users downloading a audio content while searching for video content?
Use our lessons learned to inform the upcoming year’s product vision and strategy, as well as the Content Group’s 2023 roadmap.