Kelsey Mustra

Scope & Constraints

Staying in budget

To stay within a tight timeline and avoid re-triggering translation workflows, we agreed to retain 1:1 parity with existing page labels and structure in Phase 1. This allowed us to focus on improving the interaction model and layout, while postponing label changes until a later phase.

Discovery & Assessment

Auditing

I audited the current site architecture and identified key usability concerns:

• Some areas were buried under 4+ levels of nested tabs.
• Critical content appeared below the fold, especially in high-frequency workflows.
• Translated content routinely broke components, especially in the navigation.

I compiled all breakpoints and usability pain points, and mapped them as key areas for improvement in the redesign

Internal insights

I partnered with our Senior Technical Support Advisor to uncover high-value pages and features users consistently overlooked. Her frontline insights helped identify specific workflows and pain points where navigation improvements could drive measurable impact.

I also conducted competitive research, focusing on redesign efforts from companies like Atlassian. Their experiences, such as introducing abrupt changes that prompted customer backlash, reinforced the importance of maintaining familiar patterns where possible while delivering meaningful improvements.

Exploration & Iteration

Flattening the Information Architecture

The original navigation buried key pages under multiple layers—sometimes 3 to 4 levels deep—making it difficult for users to know where to go or even realize certain features existed. With the flexibility of the new menu structure, I was able to flatten the top levels of the information architecture, reducing unnecessary hierarchy and surfacing high-priority pages directly in the main navigation. This made key workflows more accessible and significantly improved wayfinding across the product.

rapid protoyping

To rapidly prototype, I explored a variety of menu components from the Figma Community and experimented with different layout structures. Explorations also included the mobile version of menus, as the legacy platform was not responsively designed. I focused on building a flexible navigation model that could be easily scaled and integrated into our evolving design system.

Cross-Functional Feedback

I presented three early design directions to key stakeholders in engineering and customer support. Their input helped assess technical feasibility, long-term maintainability, and customer impact. We narrowed it down to two strong contenders:

refinement & decision

Initially, we leaned toward a wide left-hand nav to support deeper structures. However, engineering later confirmed that body content updates would lag behind navigation updates thus creating layout conflicts with a persistent sidebar.

To accommodate this, I proposed a responsive, collapsible left-hand navigation:

• Expandable with full labels.
• Collapsible to icons only for more screen space.
• Hover or click-based sub-menu access for quicker workflows.

This approach provided flexibility, improved visibility of key pages, and allowed power users to personalize their workspace.

Validation & Handoff

documenting the final product

In final customer interviews, users confirmed that the revised navigation would better support their workflows and reduce confusion. I created high-fidelity mockups, interactive prototypes, and detailed specifications for the development team. The design was added to the dev backlog and prioritized for the front-end rebuild.

Outcome & Impact

✅ Reduced depth of navigation and surface critical features.
✅ Improved internationalization support across key breakpoints.
✅Created a flexible, responsive navigation system that scales with future IA updates.
✅Aligned design, development, and support around a shared vision for usability and scalability.