All together now

Creating a global navigation for all of Spiceworks.

The problem 

The Spiceworks website, community, and IT tools integrate with each other, and ideally our users need to be able to navigate seamlessly between them. However, the navigation across our properties was disparate, outdated, and difficult to update.

Gathering the artifacts

Our first task was to identify all of the areas of the Spiceworks site and analyze the paths for moving between them. We found that there were lots of roadblocks, tangents, and disconnects. In my conversations with users, I found that their primary solution to navigating our site was to bookmark the pages they use most and avoid our search and navigation altogether.

Drawing a new map

Our design leadership started to call the 4 main areas of the website our 'four pillars', meaning: Community, Tools & Apps, Learn, and Product Reviews. Taking that definition, I began mapping out how our new navigation would highlight and serve those areas and create a simple experience for understanding and moving around Spiceworks.

Design iterations

After defining our navigation map, I went to work on the new UI. Above are some of the iterations for solving what we were calling the 'global' navigation and the section specific 'domestic' nav. My biggest concern was to create something that would fit on diverse page types and rich web apps, while also allowing for change and growth.

more flexibility

Our previous navigation relied heavily on an 'app switcher' drop down as the only way to move across the site and apps. My goal was to move the function of swapping between 'tabs' into the very top bar of the navigation, and allow individual apps to implement the best domestic navigation for their user experience, rather than adopting the same one for everything.

Better information Scent

In order to help our users form a more complete mental model of what Spiceworks 'is', I opted to add deep menu interactions to each tab in the navigation. This gave us the room to highlight the tools and content in each section with short descriptions. Adding this next level has already greatly increased traffic to these areas and opened our users to more value.

(Finally) mobile

This redesign gave us the opportunity to look closely at how users want to navigate our site on mobile. Beyond just collapsing the menus and shortening nav pathways, I wanted to add better contextual links to drive mobile users to our native apps. As an organization, we are trying to update our web experience to be completely responsive, and making the navigation more mobile friendly was a good step in that direction.

Retrospective

The global nav project was a process that took over a year, and required collaboration with the entire product/engineering team and beyond. It took buy-in, and a lot of faith, from our leadership to allow me to take on this project and get the support to see it through. The bulk of the work was done by just myself and one (amazing) developer, and we nearly went crazy during the course of the project managing all of the stakeholders and coordinating dev efforts to get the new navigation deployed across our experiences. 

All that pain was worth it, though, because since launch we've seen improved site traffic and page views, especially on content and features that were previously buried. It also added the ability to do A/B experiments and make rapid changes to our navigation by moving it to an identity service that pushes updates to every place the nav exists. 

All user experience projects