LampShopOnline is an e-commerce retailer specializing in lighting solutions for both B2B and B2C customers. The store offers a vast product range, from household bulbs to industrial lighting.
The Challenge
The existing website navigation made product discovery difficult, particularly for domestic customers, who make up 40% of the site’s traffic. The key issues included:
Unclear categorisation: Product categories were mixed, and technical product names confused users.
Cognitive overload: Over 50 product variations were displayed at once, making it hard to scan.
Lack of a guided shopping experience : Customers had to rely on technical specifications instead of being able to shop by usage (e.g., garden or office lighting).
Main Navigation before the re-design.
My Role in This Project
Stepping into UX from a graphic design background, I took the initiative to explore the navigation issues, conduct usability testing, and develop prototypes, collaborating closely with developers to turn ideas into reality.
I worked within brand constraints while collaborating with developers to create a more intuitive structure, making product discovery easier and enhancing the overall user experience.
Conduce Research
Present outcome to stakeholders
Design the solution
Victory
02 RESEARCH
Usability Testing
To validate assumptions about poor navigation, I conducted usability tests.
Participants were asked to locate specific products using only the top navigation (search was allowed only when necessary).
Findings
Users struggled to find even basic products.
Many relied on the search bar instead of using navigation.
Some categories contained misplaced products, adding to confusion.
User Journey Map
To visualize user pain points, I also created a journey map, which helped me understand where users struggled the most and how navigation issues affected their experience.
Competitive Benchmarking
To improve our site’s navigation, I analysed the top competitors in the industry to understand how they structured their menus and organised product information.
Takeaway: Each competitor attempted to solve navigation challenges , but none fully addressed the problem of technical product names while keeping the menu visually intuitive and easy to scan.
03 Stakeholder Presentation
After finalizing my design, I needed to present it to stakeholders. I knew that just showing the new layout wouldn’t be enough—I had to explain why these changes were necessary.
In my presentation, I covered:
Usability test results - Real data showing how users struggled.
Importance of a clear navigation
Competitor analysis - Demonstrating how other brands approached navigation.
The impact of cognitive overload - Explaining why too many options hurt the user experience.
I also showcased some of the redesigned sections to give a before-and-after comparison.The response was great! My ideas were approved, and I got the green light to move forward with implementation.
04 Design process
Issues with the Old Navigation:
The User have to:
Scan the entire screen to find the product they needed.
No clear visual Hierarchy.
Guess product names, technical terms made it harder for non-experts.
If a user is looking for LED Corn Lights at this stage, they should not be distracted by unrelated information, such as LED Panels subcategories.
Green - essential information to find the product
Red - not relevant information at this stage
Wireframes:
I started by sketching out the new navigation structure, focusing on making product discovery easier. I explored different variations, iterating until I found a solution that addressed all the problems listed above.
Working with Developers
Since the website already had speed issues, I worked with the devs to check if the new structure would be a problem. Luckily, they confirmed it wouldn’t affect performance, so I knew I could move forward with confidence.
Prototyping & Refinements
Once I had the green light, I created high-fidelity prototypes to refine interactions. This helped ensure smooth navigation before development
Final Usability Testing
Before fully rolling out the new menu, I tested it on the staging website to ensure it worked as intended. Out of four usability tests performed, all users were able to locate products quickly by relying on images, confirming that the new structure improved navigation and product discovery.
05 New Design
Left-Aligned Category List for Better Flow
Users now focus on one section at a time, instead of scanning the entire screen.
The list is positioned on the left as this follows the natural reading flow.
Information is structured top to bottom, making it easier to scan and process.
In this section the number of visible items has been reduced from 50+ to just 12, making navigation much cleaner.
Adding Images
As soon as the user hovers over a category, subcategories appear with product images.
Small product images next to category names and subcategories displayed as pictures.
Strategic Product List Order
Categories are arranged top bottom based on best-selling and most-searched products, ensuring users find popular items faster.
Adding Application Areas
To further improve navigation, I introduced the Application Areas section, allowing customers to shop by intended use rather than technical product categories.
Users can now browse lighting solutions based on their needs, such as Office Lighting, Garden Lighting, or Hospitality instead of searching through complex product names.
This simplifies decision-making for customers who may not know the technical specifications but understand where the lights will be used.
Mobile Optimization
During the redesign, I noticed another major flaw—on mobile, users couldn’t preview subcategories at all. They had to tap a category and were immediately redirected to a new page, making the experience frustrating.
I fixed this by:
Adding subcategories to the mobile dropdown. Ensuring users could expand/collapse sections easily. Due to constrains presented from mobile screen size only small images have been added.
06 Final Results
Business Impact
The redesign contributed to an 11% increase in conversion rate.
Application Areas now generate 13% of the total revenue by allowing users to shop based on intent rather than technical categories.
Next Steps
Performance - The website currently has speed issues, making the navigation feel glitchy. This year we are looking to rebuild the entire website to improve speed loads.
Data-Driven Iteration - We have implemented analytics tools to track user interactions.
07 Final Thoughts
Final Thoughts
This project was a turning point for me. Introducing research and usability testing into the company pushed me outside my comfort zone, challenging me to take a new approach without knowing for certain if I was heading in the right direction.
What truly surprised me was how powerful usability testing turned out to be—I hadn’t expected to uncover so many issues affecting the user experience. The best part, of course, was seeing the changes implemented and making a real impact on the business.
What I’d Do Differently
While we identified many issues and worked on improving them, not everything could be addressed due to technical constraints and shifting business priorities. In an ideal scenario, we would have been able to act on more of the findings to create an even smoother experience.
Additionally, over time, different teams have made changes to sections of the site, which has made it harder to track the direct impact of the redesign.
While I’ve raised this challenge a few times, I understand that evolving business needs often take priority. Moving forward, I’d love to see a more structured approach to tracking design changes to ensure we continue making data-driven improvements.
.png)
