STRATA GLOBAL · SPARKT · WEBSITE REVAMP
One slice of a full website revamp: navigation that shows every page group and sub-page at once, for engineers who need the exact page fast.
My Role
Product Designer: information architecture, navigation design and the mega-menu, from first sketch to live build
Engagement
Client / Agency (Sparkt)
Surfaces
Website mega-menu across five top-level groups
Timeline To Solve And Implement
3 Days
Context
Strata Global is a global geosynthetics engineering company. Sparkt, the agency I work with, was brought in to revamp its 173-page website, which had outgrown an old WordPress template.
The brief for the menu was specific: every topic group and its sub-pages had to be visible and easy to reach, so nothing important stayed buried.
The catch was the audience. Strata’s users are engineers, contractors and distributors, many of them over 40, with a fixed, no-surprises idea of how a website should behave.
The menu had to expose a large structure without overwhelming them.
Pages reachable from one menu
Top-level groups, each with its whole branch on show
Iterations to reach a menu users trust
To solve and implement
Five groups, 173 pages, one menu.
Before designing a single dropdown, I mapped all 173 pages: what each one was, whether it needed new content, small edits or nothing, and where it linked to. That map is what the menu had to make navigable.
SITE ARCHITECTURE
Applications, Products & Systems, Distributor, About Us and Resources, each branching into topics and sub-pages.
CONTENT MAPPING
Every page tagged as new content, slight edits or no change, with interlink notes.
The design objective: certainty, not cleverness.
Engineers, contractors and distributors come to Strata’s site to find one specific page. They don’t want to explore, and they don’t like surprises.
WHAT MATTERED
Show the whole branch
Every topic group and its sub-pages visible the moment a menu opens.
WHAT TO AVOID
Hidden levels and guesswork
No hover-hunting, no drill-in Back steps, nothing people have to remember.
Three menus to get to one they’d trust.
Each version taught me something about this audience. The design moved toward less cleverness and more certainty.
ITERATION 01 · USABILITY ISSUE
Hover mega-menu
A hover-driven mega-menu with a nested Products, then Systems reveal. It looked tidy, but the second level lived behind hover and extra steps. People lost track of where they were and got stuck on the default state, unsure how to go further.
ITERATION 02 · TOO MODERN FOR THE AUDIENCE
Modern drill-in menu
A cleaner, image-led menu with drill-in Back panels, borrowed from modern e-commerce. Sleeker, but wrong for these users. Hiding options behind imagery and Back steps felt unfamiliar and slow, and it relied on people remembering where they were.
FINAL · EVERYTHING VISIBLE, ONE CLICK
Persistent three-pane menu
Categories stay pinned on the left, the middle shows a flat, scannable list of every sub-page, and one featured panel sits on the right. No hover-hunting, no drill-in. The whole branch is on screen the moment you open a group.
See it in motion.
Open a group and the whole branch appears at once, ready to click. The behaviour is identical across every top-level group.
Every branch, on the surface.
The same structure flexes across each top-level group, so wherever someone starts, the menu behaves the same way. These are shots from the live build.
Every product and system, listed and one click away.
Every sector on screen at once, from highways to mining.
Brochures, CAD drawings and success stories in one place.
Capabilities, people and careers, surfaced together.
The real win was simple. People who don’t like surprises could reach the exact page, faster.
Navigation that got out of the way.
The measure of success here was human, not decorative. Engineers, contractors and distributors reached the page they needed in less time, because the menu matched how they already think and hid nothing.
What this project demonstrates.
Information architecture
Turning 173 pages and five groups into one structure people can move through.
Designing for the real audience
Choosing a familiar pattern over a clever one, because these users value certainty.
Iterating on what users showed me
Three versions, each fixing what the last one got wrong for this audience.
Speed
Solved and implemented in three days, inside a much larger site revamp.
Good navigation is not the design you notice. It is the page you find without thinking about it.