CircleCI navigation overhaul
Web Design, IA, User Testing
Preface
While at CircleCI, I led a navigation overhaul to improve how users discover content, addressing usability issues that led to high bounce rates. The goal was to create an intuitive, scalable system that aligned with user mental models and drove product sign-ups.
I led the design for this project end-to-end, working cross-functionally with a UX researcher and web optimization lead, and collaborated with my design lead to align on strategy and execution.
Previous navigation: Flat dropdown and internal terminology limited discoverability
Understanding the problem
Before designing a solution, I needed to understand how users were interacting with the site. I partnered with our research team to conduct structured usability studies using UserZoom:
Top task study: Identified the most important tasks users wanted to complete, revealing which pages and content were most critical.
Card sorting: Asked users to organize information into categories that made sense to them, helping validate intuitive navigation labels and hierarchy.
Research revealed a mismatch between user priorities and the navigation: Pipelines, Pricing, and Security were top tasks, yet Pipelines was buried and Security was only accessible via the footer.
Top task study
Card sorting
From research to wireframes
Insights from the research informed the navigation hierarchy and priorities. I translated these into multiple wireframe concepts to iterate different menu structures.
I iterated on both dropdown and mega menu patterns. While dropdowns limited visibility, a mega menu allowed me to surface key pages and add context—addressing buried content and unclear labels.
Navigation pain points
Our research identified three key usability issues in the existing dropdown navigation:
Buried pages – Over 50% of participants failed to locate key pages within 30 seconds
Unclear labels – “Hello World” and “Orbs” were unclear to 70% of participants
Lack of context – Users frequently hesitated or hovered before clicking, indicating uncertainty
Before: Single dropdown menu
Addressing key pain points
The redesign improved discoverability and aligned the navigation with user expectations by:
Surfacing buried pages by expanding the menu into a flexible mega menu, making key content immediately visible
Clarifying menu labels by replacing ambiguous or internal terminology with language users understood
Adding subline descriptions to give context and guidance
After: Proposed mega menu
— — — — — —
Impact
After launch, the redesigned navigation improved discoverability of key pages and contributed to a 15% increase in product sign-ups. We also saw increased engagement with high-priority pages such as Pipelines, Pricing, and Security.
Final thoughts
Given a tight stakeholder deadline, I would have liked to run A/B tests to further validate navigation structure and labeling decisions. Overall, this project reinforced the importance of using research to align user needs with measurable business outcomes.
