Top Navigation Improvement + Iterations
The previous top navigation and experience was not only clunky, but it separated out Storyblocks’ core offerings (Video, Audio and Images) as three separate products, which was no longer the company’s vision or strategy. The Top Navigation has the added challenge of a lot of tech debt accumulated over several years, as well as the fact that it lacks clear ownership within the product organization. Everyone has an opinion on it but no real authority or capacity to change it, resulting in many false-starts in making substantial and necessary changes.
With the Content Group moving toward a holistic approach to our content with the Cross Asset Pairing initiative, as well as compounding user frustration with the existing navigational structure, I made it a priority to bring representatives from all three product groups together to start identifying a strategy and rollout plan to remove the analysis-paralysis.
While this was and still is an ongoing process for the Storyblocks product organization, I am proud of the time, coordination and development that my designers, engineers, product managers and myself provided to get the ball rolling on a much-needed improvement to the site. Below are some of the iterations and progress I started.
For the first stage, we consolidated all Stock Media types into a single dropdown, removing the content-specific landing pages as a first step toward our greater content-agnostic discovery initiative.
This final design for phase was influenced by a previous update which created a new ‘Businesses’ dropdown, which was the only dropdown; I ensured product consistency such that other areas of the Top Nav reflected this organizational solution. This design hierarchy was also reflected in our Search Bar update.
Future stages of the Top Navigation will include more robust interactions and an entirely new, more refined approach to the Top Navigation’s design. Those designs are pending and cannot be shared at this time.
This first rollout coincided with the Workflow Group’s planned introduction of the ‘Creative Tools’ dropdown. As Design Manager, I highlighted that neither the Workflow Group nor Content Group were aware of each other’s corresponding Top Navigation changes, began a series of check-in meetings and was ultimately elected as Top Nav Lead.
From there, I coordinated the two group’s priorities, design and tech limitations, and product requirements to ensure that despite the division of work, our users had a consistent, holistic experience.
The introduction of icons was critical coming out of our user testing as it not only helped visually delineate the sections, but acted as an educator to assist users in comprehending the different sections. We also took our time user testing and refining our on-hover experiences.
Design Explorations
One of our earlier explorations as we played with Top Nav height and hierarchy. This design attempted to showcase all content types in a secondary nav and, when hovering, would expand the corresponding categories. This proved to be too tall and too many complicated interactions that frustrated users.
We tried taking some of our learnings from the previous design’s feedback and creating an improved design, but it ultimately still didn’t perform well with users, nor did it take into account the ‘Businesses’ and ‘Creative Tools’ dropdowns that also needed to be included.
One other small but powerful element we considered with was the introduction of a ‘Browse by Project’ function. ‘Projects’ were an innovative concept the Content Group was exploring throughout 2022 (for more information on this, visit this section of my portfolio), and we briefly considered adding this initiative to our Top Nav. This concept was expanded upon from a design perspective but is to be included in a later release.