The conclusion was "one nav to rule them all!"

We got to work and made significant improvements not only to our navigation interfaces and information architecture, but massive improvements to supporting organizational and technical systems as well. Big wins.

Collaboration and communication throughout the project was key. We claimed a space in the office to display user stories, inspiration sites, business objectives, customer pain points, and current task flows to frame the problem space and facilitate discussions with our 35+ stakeholders. It was important that our process was inclusive, iterative, and built buy-in along the way. 

• View project kick-off deck opens as a PDF in a new tab or window

I co-lead this project with the business owner, Carin Overturf.

The foundational framework was based on:

• customer pain points

• business objectives

• content inventory

• user stories

• current task flows

• inspiration and benchmark sites

This visual content inventory illustrated our inconsistencies and served as a high-level map of the ecosystem we had to consider.

The full detailed audit lived in a spreadsheet, of course.

We documented the current task flows by walking through steps needed to complete key scenarios.

These task flows were used by the Business Intelligence team for tagging and tracking to establish solid benchmark metrics.

We conducted usability tests on the current site to understand where customer pain points were in the existing task flows.

This effort was executed by researcher, Jackie Magwire and my partner Carin (I was getting married).

Phase 2: Information Architecture & UX Strategy

Company vision and product roadmap are important considerations for any global navigation project. We needed to establish a common understanding of what exactly we were trying to achieve with our site over the next couple years before getting too far down any solution. 

I lead the information architecture phase in two parts:.

1. Research & Reorganization: Typical card sorting, tree testing and content bucketing activities that you would expect with any navigation project.

2. UX Strategy: Working sessions with key stakeholders to surface competing and complimentary product or marketing visions that could impact site strategy.

These efforts informed the conceptual architecture and detailed site maps. 

The information architecture phase consisted of:

• remote card sort

• tree testing x3

• internal interviews

• concepting workshop

• conceptual architecture

• guiding principles

• site maps

We kicked off a card sorting exercise using OptimalSort. These images show the outcomes and analysis from this initial research, which was used to informed our proposed taxonomy. 

We followed up with 3 rounds of Tree Testing via TreeJack:

1. Current IA (benchmark): We tested to see how well participants could accomplish primary scenarios in the current architecture as a benchmark.

2. Proposed IA: We watched new participants as they attempted the same tasks with a proposed architecture. This gave us feedback on our initial assumptions.

3. Refined IA: We made some small refinements and watched a third set of participants attempt the same set of tasks with refined architecture.

This research was inexpensive and easy to do, giving us solid information to work with and our stakeholders peace of mind.

I met 1:1 with executives from product, marketing, and engineering to better understand their perspectives and expectations. I took these ideas to a feedback session to inform navigation concepts. This created a shared understanding of competing view points, inspired new ideas, and facilitated discussions around trade-offs.

• View the deck used to facilitate the workshop.

• View the workshop outcomes summarizing key take-aways

Every part of the process informed a conceptual model for the new organization system and guiding principles for design consideration.

• View the design principles used for executive feedback before moving forward in finalizing the detailed site maps.

Site maps were informed by project objectives, customer pain points, multiple rounds of research, internal interviews, and an approved experience strategy.

Phase 3: Interaction Design, Prototypes & Iteration

We pulled together a cross-functional design team to take this project to the next phase: Interaction design. We worked in design sprints, testing a prototype at the end of each week and posting our ideation and insights for company-wide feedback and observation. We did this for 3 weeks, meeting a couple hours a week.

The interaction design phase included:

• cross-functional team sketching

• design sprints

• prototype testing each week (x3)

• company-wide feedback opportunities

We worked through interface and interaction design concepts and tested hypothesis by walking through task flows for primary user stories. This also helped to ensure we had quick but solid test plans for rapid rounds of user research.

Ideas and observations were posted on the wall for all to see. Some stakeholders needed a little 1:1 attention, so I would walk them over to the work and ensured their perspectives were heard and captured.

I practiced using different prototyping tools, starting with clickable PDFs and moving on to Justinmind Prototyper for more detailed usability studies as our ideas progressed.

Phase 4: Execute on design & development

Once an interaction design concept was solid, we moved onto the visual design phase. Several of my teammates had recently completed some brand research and were working to establish a UI Pattern Library. The navigation UI was a great place for the team to try visual design concepts in context. 

The visual design phase wrapped up with:

• High-fidelity UI design exploration

• HTML prototype

• URL Mapping

• Final executive approvals

• Engineering hand-off

We put together an HTML which helped to:

• communicate and finalize UI details

• ensured a strong, relatively painless engineering handoff

• collect feedback in a robust usability test

This HTML prototype was created by my teammate, Ben Simpson. 

We tracked URL mappings, site updates, scope and progress in a spreadsheet and Jira.

After one last round of usability testing on the high-fidelity prototype and a few small tweaks, we closed the books on the v1 design phase. 

Post Launch

One of our primary products saw a significant drop in traffic:

• % of visitors getting to the product’s home page dropped nearly 2%

• Organic leads remained the same percentage of the overall traffic, and dropped 8%

We saw a 40% drop in visits to this product, Moz Local from the homepage, expecting that the negative impact on leads was due to moving "Moz Local" under a "Products" menu. While this design decision was consistent with the company vision, the impact on aquisition was unacceptable.  

Iteration

We launched an update that solved the immediate problem as quickly and directly as possible: Show a link to Moz Local front and center on every page. The updated resulted in the following success metrics:

• Local Homepage: +8% (99% significance)

• Local Check Listings: +39% (99% significance)

• Local Enterprise Page: +71% (99% significance)

We launched. We learned. We iterated.

Since launching this global navigation, I monitor pathing and usage date for global navigation weekly in Adobe Analytics. We're currently working on a significant navigation updates to align with a new SEO-focused strategy. The launch plan this time around is conservative as we cautiously test an iterative rollout.