Cross-Asset Pairings
In the Search Bar &Typeahead
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
The existing Search Bar and its experience were…well, lacking. The functionality was basic, with a user keying in their search and pressing ‘enter.’ That’s it. There were critically-missed opportunities that Content wanted to address:
No typeahead logic for related or suggested searches
No null state that SB could use to push content
Users expressed a lot of frustration around this experience, and with the Search Bar being the all-around first step in any user journey, Content saw this as the logical first place to introduce cross-asset pairings.
The Solution
I knew intentional design was going to be critical in the success of this new feature, specifically:
Hierarchy
Layout
Iconography
Typography
Interaction design
With these focuses in mind, I led a series of design sessions with my product designer, who co-designed this effort with me. The result was several rounds of different design explorations, both for the null state and the keyed-in state, which we then used for preference and usability testing.
This fail-fast iterative approach would prove vital in our ability to eliminate doubt and produced a much-needed update to the Search Experience (while successfully introducing our the new CAP initiative!).
The Squad
Product design lead
Additional product designer
Product manager
3 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 Bar:
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
My Design Process
Interviews
1
The majority of users found the existing Search Bar experience to either be confusing or frustrating
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 2 days interviewing 10 users remotely using a combination of generative and contextual structured questions.
We learned the following, which the team used as a reference throughout the entire development process:
2
Most users preferred to start a project with a video search over audio, but they are thinking of both at nearly the same point in time
Sketches & Wireframes
As this particular project was more about expanding on the layout and hierarchy of existing UI elements, I decided to mostly forego sketches and start with lo-fi wireframes to quickly explore – my design team already had most of the components I would need in our Figma design kit, making it very easy to quickly explore design ideas using real UI elements.
For new the few design elements (such as the header designs, sub-category kick-out arrows and the collection card thumbnails) I quickly built them out to match the existing design kit and refined them over the course of our user testing and design reviews.
Typeahead evolution
Collection Card Design Exploration
Another variable that made this particular project more challenging during this iterative phase was that the Top Nav Redesign work was happening at the same time.
Whenever we explored new Top Nav designs, like a longer or shorter Search Bar or a new placement for the Search Bar, we had to make sure it still worked for this new Search Bar Typeahead functionality.
･ﾟ: *✧･ﾟ:*
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
Users were more likely to engage with Content Recommendations if both options, video and audio, were visible above the fold.
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 2 days interviewing 10 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:
Let the content shine. Don’t crowd the collection card thumbnails with all the icons .
Hierarchy, typography and layout make a difference, especially when there is so much information being presented. Even the simplest of things like heading design garnered better performance with users.
UI Design & HANDOFF
I am proud to present the final designs for the desktop version of all states for the new Search Bar and Typeahead experience. Both features used existing styles and assets already included in the Storyblocks design kit while also contributing new elements to the design kit, most notably the new Content Collections card design.
Null State
Keyed-in Search: ‘All Video’ selected
Keyed-in Search: ‘Footage’ Subgroup selected
Keyboard Actions & Focused States for Dev Handoff
Lessons Learned
Internal workflows needed to be clearly defined, and much sooner. As one of my first in-depth and major product tasks at Storyblocks, as well as the first of the three CAP initiatives, this particular project would be an indicative first assessment of Storyblocks’ current site experience and internal workflow.
Product needed to make more time in every working group’s schedule for reducing the experience gaps, not widening them. In this project alone, I quickly learned that Content had not allotted any time for designing and building a dedicated mobile experience. Instead, it was squeezed in toward the end of the desktop development.
Priority definition starts at the top; we are not setting up our working teams to be successful if we ourselves do not advocate for these changes.
This project would begin my own personal project of ongoing advocacy with product leadership to reexamine how (and when) we make time for mobile experience optimization, as well addressing technical debt (for both ENG and design) and creating consistent user experiences across the entire platform (addressing inconsistent card designs, iconography, interactions, etc).One outcome I was proud to contribute to by the end of 2022 was the new mobile-first approach, where all squads needed to either start with mobile or at least include it early on in their designs.
Next Steps
Review the performance of the new Search 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).
Track the frequency of cross-content searches – in other words, how often were users initiating a video search query but used the new experience to search audio?
Use our findings to inform the upcoming year’s product vision and strategy, as well as the Content Group’s 2023 roadmap.