Taming a 89-entries navigation menu: Content Design to the rescue

Coauthored by Silvia Döhnert and Elodie Veysseyre.

What’s the sweet connection between sundae, navigation menus, and content design?

Photo by DarkoStojanovic on Pixabay

Well yes, information architecture (IA) — because eventually, it all comes down to layers, structure and pleasurable experience.

We were lucky enough to join PayFit as the very first content designers in June 2022, shortly before it was decided that our in-app navigation menu needed a revamp. After eight eventful months, we thought it was time to take a pause and share how content design and UX writing played pivotal roles in this project. It’s been a journey, through which we learned a lot and during which we could rely on many helping hands from the community. So we felt it’s our turn to share how we approached a full navigation menu redesign as UX Writers/Content Designers and hopefully help some other lovely folks move forward as well.

In this article, you’ll discover:

• The processes and tools that guided us during the project
• The steps we took to stay committed to our goals
• What went smoothly and the valuable lessons we learned

Two quick disclaimers upfront: Please note that our journey was a learning experience. There are various approaches to a navigation menu redesign, and not everything we share here may directly apply to your unique context. Also, we conducted this project in parallel with other everyday tasks, time has sometimes been a limiting factor.

The menu dilemma

So let’s rewind to last September. We had freshly landed at PayFit’s product team, working on a productivity app dedicated to payroll and human resource management. Over time, the left navigation menu of the application had outgrown to a monstrous total of 89 entries, organized in two levels — 20 main-level entries and 69 sub-level entries. This makes a lot of entries to deal with. Some were thoughtfully organized in categories and sub-categories, others had been added in chronological order or appeared in the left navigation menu to make a feature stand out. Some weren’t categorized at all and there was no common thread amongst the main-level entries. The outcome was a messy embodiment of Conway’s law: a menu that reflected our internal organizational structure and dynamics, instead of serving our users’ experience. Sounds familiar? Keep on reading…

Our former left-side menu

As a result, our users struggled to navigate the application, encountering difficulties in understanding the purpose of certain pages and finding features. Which in turn led to decreased user autonomy and increased reliance on our customer support. Our navigation menu was no longer doing the job. We needed to fix things to allow our navigation to fulfill its primary purpose again and help our users:

• Find what they need
• Complete their tasks
• Move on with their day (yay!)

Two more factors added to the challenge:

• The complexity of our application, dedicated to payroll and human resource management: the French payroll ecosphere ranks as the most complex worldwide for over 5 years in a row (see the 2023 Global Payroll Complexity Index)
• The diversity of our user profiles and their level of expertise: we offer a dedicated workspace for human resource and payroll administrators, accountants, managers and employees

Our key promise to our customers is to make payroll and human resource accessible to all, especially small companies and payroll novices. To stand up to this promise, it was time to deep-dive into the core of our product and unlock the power of information architecture.

Collaboration in action

As you may imagine, the impact and dependencies of a navigation redesign are immense. To succeed, we needed to join our forces. So we formed a cross-functional task force, lead by our mighty French Product Director. She gathered folks from all teams in the company: UX researchers, data analysts, compliance specialists, customer onboarding specialists, payroll declaration specialists, payroll experts, customer support agents, product builders, developers, product managers, product marketing managers, product designers, brand content leads and us content designers.

Wondering what “product builders” are? Check out our blog article Establishing the Product Builder role: How PayFit invented a new Product job. Although things have evolved since March 2022, it provides in-depth insights into the unique aspects of the role at PayFit.

The core team

All these beautiful people needed to be aligned. A good old RACI matrix clearly delineated our respective levels of involvement. It resulted in a three-layer governance model built of a core team, a group of contributors and the stakeholders. As content designers, we were part of the core team and tasked with defining a new taxonomy and information architecture. Information architecture is the backbone of our daily craft and although we had to ramp up, we were in a good position to lead the structural work that underlies our product. During the more challenging and uncertain phases of the project, this model proved invaluable, as it offered both a framework and the necessary legitimacy for taking key decisions.

Our RACI matrix and governance model

To maintain focus, we initially limited the project scope to the French version of our application and the administrator workspace. Our plan was to tackle the most complete set of navigation options first. We planned to iterate and expand the improvements to our other regions (Spain & UK) and workspaces (accountant, manager, employee) at a later stage. Spoiler alert: plot twist coming up…

Once our roles clarified, we could delve into the nitty gritty of the transformation work.

Time for transformation

First things first: our project lead crafted an action plan, which we then collectively discussed and fine-tuned. It’s important to note that from start to finish, we approached each key milestone as a team, fostering collaboration, clarity, and transparency. This really helped maintain a shared vision and face the ups and downs of reality.

Collaborative planning process

With the landscape in place, we were all set to go. The project followed the classical steps of the double diamond process.

The steps of our menu redesign

Let’s have a closer look at the activities of each step.

Discovery phase

1. Understanding our users’ mental model

We knew about the flaws of our navigation menu, but needed to better understand our users’ expectations and thought patterns. So our UX research team started with running card sorting sessions. The remote sessions were moderated by our UX research team and members from the larger project team assisted to take notes and ask questions. During these sessions, we asked the participants to organize all the existing menu entries into groups that made sense to them and to assign a name to each group.

These sessions helped uncover a few essential insights:

• Users organized menu entry groups around four main topics: everyday business, payroll operations, monitoring and settings
• Users needed stronger navigational guidance: the new IA would need to reflect the key moments of payroll processing in some way
• The application’s dashboard didn’t meet our user’s expectations : we would need to rethink the dashboard, to make it more interactive and customizable
• The needs of our users varied depending on their company size and activity: we would need to imagine a resilient IA to respond to differing realities

Mental model of our administrators

✨ The content takeaway:

Shadowing these sessions and being involved during the early stages of the project helped us build our own understanding of our user’s language, concerns and habits. As greenhorns in the company, this was greatly valuable to gain an in-depth understanding of our audience.

2. Assessing the current state of our application

With these insights in mind, we both embarked on a comprehensive audit of the application. As the overall structure and content hadn’t undergone a full review in quite some time, this seemed a good opportunity to evaluate it against current heuristics and industry best practices. You’ll find some of the excellent resources that guided us in creating our audit template in the bibliography section at the end of this article. Our assessment encompassed all key aspects of information architecture and navigation, including page purpose, findability, clarity, learnability, and accessibility. We further broke down each aspect into sub-items for a more detailed analysis.

Covering a total of 150 pages demanded meticulous attention and focus. To keep the rhythm sustainable, we split the audit between the two of us based on our respective functional scopes.

Our audit template

We finally consolidated our key insights and recommendations in a summary report we shared with the project team but also the entire organization.

✨ The content takeaway:

Inventories and audits are part of our daily work as content designers; being familiar with the method helped a lot get started and keep focus during this step. As we work transversally across product teams and we were both new to the product department, there was an additional kiss cool effect: we were still free of company-specific biases and could use the opportunity to create a content backlog for continuous improvement.

Definition phase

The combination of our users’ mental model and the conclusions of our audit lead us the next step: crafting a new IA.

1. Designing the new IA

This step involved reshaping how we categorized and labeled our entries. Which in turn required extensive collaboration with our Product Managers and Compliance Experts to make sure the new IA would be in line with the business logic and legal constraints — payroll is a highly regulated sector and only with the support of the functional teams and compliance specialists could we build an effective IA.

We designed two alternative IAs with a strong focus on jobs-to-be-done and plain language, following distinct hypotheses based on user insights gathered earlier. While reworking the organization of our application we also needed to iron out the language. We went down quite a few interesting and unexpected rabbit holes along the way. In short, we worked our way up from redefining the exact meaning of our key concepts (the ontology), to how they relate to each other (the taxonomy), and ultimately how they are arranged (IA) to offer a simple and predictable use of our application (navigation). Or, more precisely, we worked our way up and down these layers throughout the entire process. Working on taxonomy and ontology can get pretty messy — several times, we thought we had pinned down a concept, only to stumble upon unexpected branches we hadn’t anticipated a few days or weeks later. It was and still is a wild ride, to be honest. To make sure our terminology and taxonomy are robust, we also run content research on our key terms, but that’s a story for another article!

The invisible layers of navigation

✨ The content takeaway:

As word nerds, we love to deep dive into the metaphysics of linguistic semantics and concept models. Combining our linguistic expertise with the business intelligence of our feature teams to make sense of our application’s structure as a whole has been one of the major successes — and joys — of this project.

2. Testing the new IA

To test how the two alternative IAs performed, we ran a set of tree tests. The group of participants included internal key contributors, users of the application and non-customers, to identify possible biases of our current users. During the tests, we asked the participants to locate six items based solely on the labels and the categorization of the two folder structures. We then measured the success, directness and first click rates for each task to assess the performance of the respective IAs. As we were particularly interested in the rationale behind our users’ hesitations and pathways, we chose to moderate these tests with the help of the larger team. To keep things simple and unexpensive, we replicated the IAs as a folder structure on a GoogleDrive folder, which we then shared with the study participants during the test. Interestingly, the results of the tree tests indicated that we had to merge both IAs into a third, mixed architecture.

Our tree-test structure in GDrive

✨ The content takeaway:

Because content and structure go hand in hand in IA design, we were ready to plan our research and guide user interviews. We knew the potential weak points we needed to dig deeper into, so leading the user interviews allowed us to embed effective active listening into the sessions. Of course, we weren’t in this alone; our UX research team had coached us beforehand, and members from the core team chipped in by helping with note-taking.

3. Setting the success metrics

At this stage, we had a clear enough vision of what we wanted to improve to start working on our success criteria and measures.

Our key goal was to offer an empowering IA — one that would guide our users more efficiently through the application, helping them save time and rely less on external help to complete their tasks.

To measure the achievement of this goal, we defined a set of navigation metrics, with the assumption that the navigational behaviors would reflect the performance of the IA. Among these metrics we had:

• Navigation components: We tracked if participants used, noticed or avoided components like breadcrumbs, back buttons or links. This would help us follow-up on local navigation behaviors and the effective use of navigation components.
• Findability: We broke down this aspect into entrance rates, bounce rates and search queries. Too high or too low rates would lead us to question the labeling or organisation of our categories.
• Support tickets: We aimed at identifying the number of incoming customer tickets that related either explicitly or implicitly to a navigational issue. This metric required an update of our current ticket analysis system, to include a new “navigation” class. We explored an AI-based keyword classification system which still needs to be fine-tuned.

Once the metrics defined, we started collecting data on the current left-side menu to establish reasonable thresholds and a baseline against which to measure our future left-side menu.

✨ The content takeaway:

As Content Designers, we know how important it is to use UX success metrics in our everyday work. We could suggest a set of meaningful metrics that reflect the user experience and support the product builder in defining the performance tracking plan.

Development phase

1. Refining the IA

At this point, we had elaborated an “ideal IA” with a rather deep hierarchy. As we started to convert this IA into an actual left-side menu, we quickly ran into challenges. For technical reasons, some experiences couldn’t be merged and it appeared difficult to provide a design that would support our users with the depth we had planned for. This made us start a series of iterations of our IA, three in total, during which we had to factor in a number of players and technical considerations. In addition, the project’s initial scope changed, as our code structure required us to include all workspaces in the redesign (remember our initial plan to focus on administrators only? The “all-at-once” effect had caught up on us). At some point we had drifted so far away from our target vision that a severe doubt started creeping in and we felt…stuck, worrying that the compromises we had to make would undermine our initial intent.

But our community is bright and generous and we were saved by a heart-warming office hours session with IA hero Abby Covert. In our despair, we had registered on the waiting list and luckily, our mess was inspiring enough for us to be picked. During a thirty-minute discussion, we went through our main challenges together: staying aligned across teams, providing value to our customers while remaining agile, and adapting to an enlarged scope. We figured out that our participatory approach to the project was our super power and that compromising is fine, a respectable declination of agility. The conversation was exciting and and left us energized with a renewed sense of purpose.

The iteration rounds of our IA

2. Testing the visual design

We moved on with testing the visual design of our very last iteration of the IA. We ran moderated navigation tests again with the help of the larger team. This time, we asked the participants to carry out five tasks on an interactive prototype. The results validated most of our choices but prompted us to fine-tune a few remaining aspects of our categorization and some visual design assumptions. So we revised our IA and visual design once again to accommodate the main-level entries on the left-side menu.

✨ The content takeaway:

Using user insights and a deeper understanding of our IA, we worked with product builders, designers, and engineers to implement the new IA. This involved a complete redesign of some pages and creating new pages to align with the updated IA. We helped by bringing in the voice of the customer and contributed to the content design of the new pages.

Delivery phase

Things started to become really exciting at this stage: the designs and developments were done and it was time to run a comprehensive quality check in preproduction. We set up a Jira board to log any issues, and started to create a backlog with iteration opportunities. It took us a few days to polish the very last version and it was a very special moment of real emulation across the core team but also the larger organization.

We also fine-tuned the internal and external communication about the upcoming change. During the visual design tests, we had interviewed our users about their preferred channels and key moments for receiving the communications. We wanted to find out the best ways to let our customers know what’s happening and support them after everything is in place.

The rollout went smooth, we closely monitored the user behavior in-app but also incoming support requests and social media and the feedback was overall very positive.

✨ The content takeaway:

This was our very first opportunity to test the new navigation menu live. The content perspective was key at this stage as we needed to make sure the labels were consistent across screens and workspaces and that the navigational logic and cross-linking was working as expected. We also helped our Product Marketing Manager with designing and wording the client-facing communications, especially our in-app heads-up banner and product tour, to ensure a holistic experience.

The final result and impacts

So what did our menu look like after this transformation?

In a nutshell:

• We made sure all main-level menu entries are visible without scrolling
• We reorganized the menu entries by job-to-be-done and use frequency
• We renamed the entries to improve consistency and readability
• We added sections to further group the main-level entries by topic
• We removed 12 main-level entries
• We added a search bar to ease targeted navigation
• We reworked the look & feel of the menu

Here’s the final result, the beginning of a new, exciting journey:

Our app after the design and IA revamp

We’re also closely following the success metrics in monthly data check-ins to observe noteworthy patterns.

So far, after three months of runtime, the feedback from our support team is encouraging: there’s no rise of incoming requests related to the menu or to navigational issues. As to in-app assistance, our chatbot even registered a significant rise of requests that could be handled within the chatbot and needed no follow-up by our support team. We still have to analyze the link with the new menu and navigation, but all in all we have less requests for basic support than before. We also noticed that some pages seem easier to find and that other pages that were over-exposed have a lower bounce rate. It’s noteworthy that changing a main-level entry to a second-level entry increased traffic to that page by 6%. It’s fascinating how streamlining the menu enhances visibility and timing.

The aftermath

Over the course of 8 months (which actually felt like 2 weeks 😅), we now realized that we have learnt a lot. We tried to share the most interesting findings, but sorting through it all has been quite a task!

What we learnt

Highlights

1. Teamwork

This project allowed us content designers to showcase our skills and present our work in a practical way. Now almost everyone knows the value we can provide to our company, and this is truly priceless for our practice in organizations.

Moreover, it offered an incredible opportunity to connect with internal stakeholders and participate in internal meetings and rituals. During the IA development phase, we engaged with many colleagues, allowing them to review and eventually adopt the IA for their needs. While it did demand a lot our team’s time, it was definitely worth it.

We learned what it takes to work effectively in a large and interdisciplinary team. Clear roles, regular check-ins, and open communication were key factors.

2. Content design is key in the process

Our understanding of the application made us the best placed in the company to redesign the IA and navigation, to make it more user-friendly and consistent.

The specifics of our discipline overlap with IA and navigation design: hierarchy & organization, consistency, clarity & conciseness, contextual relevance, user-centricity (vs. feature-centricity).

Our expertise in our field aligns closely with the principles of IA and navigation: how content is organized, ensuring consistency, keeping things clear and concise, making information relevant to the context, and prioritizing user needs over just features.

3. Deeper understanding of the product…and the internal dynamics in the organization

We gained an in-depth understanding of the application, after all those months spent auditing and deep-diving.

We also learned a lot about our audience during our research: about their needs, their pains and yes, also some successes!

As an interesting collateral effect, we also met a number of people and teams at PayFit. After all those months of exchanges and collaboration, we’re more aware of the internal dynamics and ongoing reflection than ever. This is precious is our content design practice.

4. Our research about navigation led us to important discoveries

We learnt that despite its common use across the application, the CES (customer effort score) is not an effective metric to follow in your navigation or IA efforts. We now recommend not to use it in those areas, even if your question is clearly focused on the experience of the user and its ease to perform a task.

Most of the time, the question is not precise enough. It is important to keep in mind the user had no idea of what is a “navigation” or even sometimes “a menu”. If you are asking “how easy did you navigate the product”, you will get imprecise answers.

We also noticed that even if the question is clearly crafted, “how easy was it for you to complete this task”, the answer might still be completely unrelated. Our learning was then to stop using CES to monitor our navigation and IA effort.

We also learnt that the main threat to our new IA wasn’t the one we expected. Technical issues? No. Future user research that will adapt it again? Nope. The main threat to your IA is, in fact, yourself, and more specifically your own product team. We discovered that colleagues strongly believed that “adding a new entry in the main menu” equals to “a lot of clicks and upsell from our clients”. But this is not true, and our research proved it many times.

We need to take some time to acknowledge this as a team and as an organization. The navigation in a product should not be used as a way to highlight an entry: a new entry should be considered under the prism of the target IA and based on the unveiled mental model of our users. We are still struggling with this belief, and we’ll try to avoid those consequences by building a strong and resilient process to update our IA and our navigation.

Unexpected challenges

1. IA, taxonomy, and even “navigation” are abstract concepts that are unfamiliar to many and can be challenging to understand

It required us to expand our communication efforts, anticipate the challenge of translating IA into design, and ensure that this knowledge was effectively shared across all teams. Even if the core team was aligned, spreading this information represented a significant challenge.

2. Tools might be either helpful…or your worst enemy

We spent an considerable amount of time wondering if our tests should be processed manually or with automated tools. We eventually decided to stick to manual testing. It took time for sure, but still less that benchmarking a new tool, going through the procurement process, testing and adapting to it. We also were interested in following more closely the feedback of our clients about their daily issues. It was a great way to keep close to them and gain a better understanding of our product. Sometimes, handmade is still better 😅

3. We didn’t realize how iterative and progressive would be the building of our product IA

Some projects fit perfectly in frameworks, you make your research, you design a solution, you iterate and that’s it. IA doesn’t. Really not. Building an IA requires many evaluations, iterations and testing. It requires making a lot of mistakes, too, sometimes trusting your guts and following hints given in user interviews. But as long as you try, test, and correct eventual mistakes, your IA is perfectly safe. It will eventually get better and better, stronger and stronger. Iterative and participatory design are indeed the way IA are done 🙂

4. Our scope expanded during process

A loooot can change in 8 months in our fast-paced corporate environment! Initially, we were focused on just the core product and admin space, but we’ve eventually expanded our scope to include the accountant, manager, and employee spaces — which were highly unexpected developments!

What’s next ?

The navigation and IA revamp doesn’t just end with the initial release; in fact, it marks a new beginning. Here’s what we aim to achieve:

1. Documentation of IA and navigation choices for long-term integrity

In our commitment to ensure the success of our strategy and IA, we will meticulously document our IA decisions and navigation choices. This documentation will include:

• A complete list of the category labels we chose and the rationale behind it
• The overarching strategy driving our IA
• The rationale behind the selection of specific IA patterns
• A clear process for future updates to the navigation or IA. For instance, to add new entries or modifying existing wording.

2. Setting up an IA governance and support group

Given our extensive involvement in crafting the IA and our intimate knowledge of the application, we stand as invaluable allies for the team in shaping a robust governance framework for our new IA.

In the near future, we will actively engage in forming a dedicated support group tasked with addressing future inquiries and challenges related to our IA.

3. Monitoring our impact and continuous improvement

It is essential to meticulously track every update to gauge our performance and identify areas for further enhancement.

It is not a walk in the park to implement a tracking plan, and helpful metrics about navigation and IA! But we managed to identify accurate metrics for it, and they will be monitored throroughly in the next months. We will then remain vigilant, to measure the tangible impact of our changes.

4. Addressing our navigation backlog

After the rollout phase, we ended with a list of challenges, which formed a…substantial backlog.

We are committed to address these concerns promptly in future iterations. Many of these issues are related to content design, terminology, phrasing, structure, and accessibility enhancements. We can’t wait to tackle these challenges soon 💪

5. Last but not least: expanding our work to Spain and the UK

The extensive efforts we’ve invested in shaping our French product, from meticulous research to the final release, including prototyping and definition, cannot be just copy-pasted in our Spanish and UK counterparts.

Every aspect of the IA and navigation must be crafted from scratch. It’s important to acknowledge the significant differences in our user profiles and payroll systems across these regions. The approach must be tailored for each product, to ensure a seamless fit.

Furthermore, when considering terminology and Information Architecture (IA), a comprehensive content research and tree-testing process will be necessary to ensure alignment with the specific needs of each country.

Ready to make your own sundae?

Here is the cherry on the sundae, our last words about our work.

Contributing to improve the structure of your product is also doing yourself a huge favor.

In the end, gaining a better knowledge of your product, of your audience, of its real use of the product is what every content designer should dream. It is what helps us creating better content every day.

Time to act now, and start your own exploration 🙂

Our (not so) secret recipe: resources and references

We’ve gone through a lot of material during our work, and it’s hard be exhaustive there.

But here are the key resources that have been with us throughout these 8 months, like our go-to resources:

• A practical guide to information architecture, Donna Spencer
• Information Architecture (IA) for Authors, Abby Covert
• Information architecture for navigation, Abby Covert
• Information Architecture Heuristics: A Checklist For Critique, Abby Covert
• How to Design Navigation for Large and Small Screens, Balsamiq Wireframing Academy with Donna Spencer
• How to do a content audit, Lauren Pope (July 2022)
• How to make sense of any mess, Abby Covert
• Practicing information architecture, Abby Covert
• Return on investment in IA, Abby Covert