Site Top Navigation Redesign
A quick overview
Now that Storyblocks was moving away from the siloed approach to video and audio content by rolling out the Content Group’s new Cross-Asset Pairing (CAP) initiative, I needed to make sure the site’s Top Navigation Bar reflected this new approach and supported the vision of a holistic stock media experience.
The existing Top Nav Bar’s design had video, audio, and images as their own separate buttons, which I knew based on our new product direction would need to be collapsed in some shape or form to better reflect our new, non-siloed approach.
To add an extra challenge, Workflow, another working group in Product, was simultaneously rolling out a new ‘Creative Tools’ that would need to be added to the Top Nav.
The problem
Something as fundamental as the Top Nav Bar drew a lot of opinions and controversy throughout Storyblocks. Making even the slightest change was mired by red tape, and I was warned that much more minor attempts at a redesign had historically been shot down.
I understood this stemmed from a valid concern: the Top Navigation was a pivotal piece of our site that our users were deeply familiar with and dependent on. One wrong move, or at least a carelessly-designed one, could have devastating ramifications for Storyblocks’ entire experience.
Another reason for the Top Nav’s bitter controversies was that, when it came to the backend development, all engineers knew that there was a tremendous amount of tech debt accrued in the Top Nav’s software stack. Any work, big or small, would be severely hampered by the need to first address this tech debt.
This left me with two critical questions:
How could I advocate that Content (specifically myself and my product manager) take ownership over this entire Top Navigation redesign and reduce the number of ‘cooks in the kitchen’?
How could we ensure we were meeting our user needs while also gaining company-wide alignment – and, more critically, developer availability?
The Solution
I first met with the product managers for both Workflow and Content, with whom I negotiated an agreement that we, the Content Group, made the most sense in taking full ownership of the Top Nav designs, review sessions, and testing. Workflow would be included as consultants and stakeholders, but the design and development would rest with me.
From there, I created a series of design milestones for myself and my assisting product designer in order to keep us on-track as we refined our design solutions.
Knowing how the history of redesign proposals within the company, as well as the sheer necessity of a well-designed site navigation, I made sure to build adequate time into this schedule for user testing. Data would be key in assuring everyone that our final redesigns would be non-disruptive upon release, and it would also be critical in receiving approval from all stakeholders.
I also made sure that our schedule had enough padding for us to solicit feedback from those key stakeholders (Product Management for overall review, Engineering for feasibility, and Workflow to ensure lock-step alignment).
A few fun insights from this early stage
I relied on my tried-and-true approach that I learned from my designer days: Not too many cooks in the kitchen. Establish and document who are key stakeholders for active feedback consideration, who we need ‘approval’ from, and who do we need to inform?
Make it very clear for everyone what to expect and when – i.e. “design review on x date,” “status updates during x ceremony,” etc.
It was my primary responsibility to communicate and maintain these expectations, using specific conversations as learning opportunities for my product designer to coach them on how to tow this line in the future.
The Squad
Product design lead
Additional product designer
Product manager
2 developers
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, setting the overall strategy and facilitating dedicated design review sessions with all designers from Content and Workflow to ensure we were hitting all necessary product concerns for each group’s initiative.
Product design lead, taking the initiative in design exploration and prototype building in conjunction with my product designer.
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.
Project management, diligently keeping track of all major milestones on the schedule, coordinating stakeholder review sessions. Responsible for making sure roles, responsibilities, and product requirements were clearly understood (this was critical for keeping design on track and not bogged down by bureaucracy).
Our Timeline
Overall: 7 months
Strategy: 4 weeks
Discovery & research: 4 weeks
Iterative design & testing: 16 weeks
Software development & Q/A: 4 weeks
The Process
My design process follows the same core structure and may change slightly between projects, based on things like timeline, company resources, and the team. Below is my overall design process for the Top Navigation Redesign initiative:
Project Kickoff
Squad Lightning Demos
Product Requirements
User Interviews & Data Analysis
My Product Process with the Squad
>
>
Design Lightning Demos
Sketch
2-3 ideas per designer
Lofi Wireframe
2 Ideas
per designer
Preference Testing
2 rounds
Mid-Fidelity Prototype
User Test
Hifi Prototype & Design Handoff
My Design Process
>
>
Copy Tests
Like the CAP initiative that I was running around the same time, I knew that copy was key.
If we were going to combine our previous design’s ‘Video,’ ‘Audio,’ and ‘Images,’ we needed to ensure what we called that combination made sense to our users.
I led this initiative by coordinating with our Brand & Copy department to run a test with 20 participants to determine which option made the most sense:
“Stock Content”
“Content”
“Stock Media”
We provided context of what Storyblocks’ content offerings were and one mockup of a possible Top Nav design.
The results showed that users understood the term ‘Stock Media’ best. This eliminated one unknown right away, and we included ‘Stock Media’ in our design options going forward
Design Explorations
Design often has a fantastic opportunity to really illustrate those murky product questions. Our product managers – and, for the record, the entire squad – had mixed feelings about the best way to move away from the current navigation experience (showing content type first) to a new experience (building toward a more holistic approach to browsing content).
My product designer and I both took time to put together quick mockups of the different potential approaches that arose from the squad lightning demos I had facilitated early on in the process (please click on each version to see the full detail):
V1: Unified Content Offering
(Media Type First)
V2: Unified Content Offering
(Keeping product home pages)
Our general vision:
Combine all stock media into a single group, with a sub navigation expanding either an on-hover or on-click. This would likely necessitate numerous rounds of sub-navigation, which we were could be a problem. Illustrating this for our product managers quickly illustrated design’s hesitation with this approach.
Our general vision:
Similar to V1, consolidating into a single stock media asset, but instead of a sub-navigation bar, a drop down menu would appear either on-click or on-hover. This dropdown would include the primary categories (video, audio, and images) as well as each category’s sub genres, rather than the numerous layers of sub navigation we see in V1.
V3: Media types visible
in the top nav bar
Our general vision:
Our product managers liked the idea of using as much of the horizontal space as possible in the Top Nav. I decided to at least explore what could be if we eliminated the primary categories of video, audio, and images and instead showcased, at first glance, all of the sub categories (footage, templates, animated backgrounds, music, sound effects, and images) to then have either an on-hover or on-click experience to reveal all possibilities.
This was less ideal, but it generated a lot of conversation within the squad of an entirely new navigation experience further down the line.
･ﾟ: *✧･ﾟ:*
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.
Preference Testing
1
3
Keep it simple. Too many options in the Top Nav, at least at the primary level, was too confusing and left users feeling overwhelmed.
On-hover was too frustrating – deliberate clicks into each category minimized frustration.
5
Once my product designer and I had gone through several rounds of design exploration, preference testing helped us refine down to a single design. We worked together to create mid-fidelity prototypes for each of our 3 Top Nav designs.
Simultaneously, I worked with my User Researcher to recruit 20 subjects:
10 users who were already Storyblocks members and were familiar with our current Top Nav design
10 who had never visited Storyblocks before.
I co-led preference testing sessions with my User Researcher. A few key takeaways:
2
4
6
Grouping by category w/ dropdown menus was the best transition to a more refined Top Nav Bar.
Most users liked the idea of an expanding Top Nav Bar, but felt that was too big a departure from our current state.
Adding the caret for each category made a world of difference in conveying each had a dropdown menu.
Similar to the previous point, adding icons next to section headers for any given drop down performed exponentially better with users than designs without icons.
The Creative Tools and Business Tools drop downs benefited from an included descriptor for each of the 3 sections.
New users preferred this to help educate them and seasoned users liked having the reminder.
UI Design
Desktop & Mobile
I am proud to present the final designs for both desktop and mobile for the first major phase of Storyblocks’ Top Navigation redesign. During the 7 month project duration, Product Marketing also asked us to include a link to the Storyblocks Blog, which had not been accounted for in previous Top Navigation designs.
Considering all the shifting product requirements, numerous edge cases, and various user states, I was incredibly pleased at how this design performed with users!
Default State
Top Nav Drop Downs Open (on click)
Top Nav Drop Downs Open (on Hover)
Active Search State (In Search Results Page)
Sub Nav Drop Downs Open (In Search Results PAge)
Mobile, Active Search
Mobile, Default
Lessons Learned
This entire endeavor was not just a comprehensive and holistic user experience, but also an internal workflow experience.
From start to finish, I saw the glaring gaps in the product organization’s workflow, communication and collaboration. Each working group – Workflow, Content, and Growth – had their own strong internal cadence, but there was no communication or coordination between each group.Experiencing it first hand (and even interviewing some of the more seasoned, jaded employees) showed me where my management skills could help.
I also saw many opportunities for product leadership to earn back the trust of our individual contributors, which would become one of my personal missions for the remainder of my time at Storyblocks.I used this 7 month project as an opportunity to highlight this disfunction and showcase the early stages of improved inter-group coordination.
This would become my big project for the remainder of 2022, which I proudly laid the foundation for with a series of cross-functional leadership workshops, presentations, and alignment sessions. It was planned to roll out in 2023, but I was never able to implement it due to Storyblocks’ 25% reduction of the workforce.
Next Steps
Review & carefully monitor the performance of the new Top Navigation site experience.
Use our lessons learned to inform the critical next steps. This was only the first phase of a larger conversation throughout the entire product organization around improving and consolidating our user experiences, regardless of which working group owned them.