Company-reported analytics following the work. The figures do not establish that navigation changes alone caused the commercial results.
01 · problem
Important routes were too easy to miss.
Distrelec is an electronics ecommerce distributor serving customers across multiple countries. The legacy side navigation made search and language selection hard to find. On longer pages, users could also lose access to navigation as they scrolled.
Hotjar findings and analytics-team input reported users leaving after six seconds. This was a baseline observation alongside the research, rather than a universal measure of every visit. The design challenge was to make key routes easier to reach across desktop and mobile.
02 · research
Connect behavioural evidence with the interface.
I used focus-group research, Hotjar findings and input from the analytics team to inform navigation and checkout changes with the product owner.
The findings supported giving search a more prominent position and making the language control easier to locate. The challenge was to improve access to key functions while working with the existing ecommerce product.
03 · concepts
Change the structure while retaining useful functionality.
I explored four wireframe variations and selected a direction with the product owner. We retained functionality from the existing navigation while changing its placement and interaction structure, helping contain the implementation effort.
Desktop, tablet and mobile layouts needed to serve the same key tasks without simply shrinking the desktop interface. I developed the search, category and language-control states across those layouts.
04 · decisions
A responsive navigation structure.
I replaced legacy side navigation with responsive top navigation and made search and language selection more prominent. Category dropdowns supported browsing without repeatedly moving to another page.
I also brought delivery-cost information into the basket. This addressed a different part of the purchase journey: helping customers understand costs before progressing further into checkout.
05 · delivery
Stay involved beyond the prototype.
I reviewed the final wireframe direction with the product owner and developers to discuss implementation time and resources, then developed responsive prototypes.
I handed designs over through Zeplin and supported development and QA before launch. The process included checking the implemented navigation rather than treating agreement on the prototype as the final step.
06 · outcome
Company-reported results after the work.
Company-reported analytics following the work showed bounce falling from 13.6% to 6.7%, revenue up 4.5% year on year and search becoming the most engaged element on the site, at 64.8%.
These figures describe site performance following the work. Search usage is an adoption measure, while the bounce and revenue comparisons reflect the wider site and do not isolate the effect of navigation alone.
Company-reported before-and-after comparison
Bounce rate
Bars use a shared 0–100% scale.
07 · learning
Make the important functions findable.
This project reinforced the value of visibility and information structure in an established product. Search and language selection already existed; the design work changed how readily users could reach them.
For further evaluation, I would look at task success across devices and languages alongside the aggregate analytics, so a positive overall result did not hide a difficult experience for a particular audience.