BigCommerce navigation refactor

As part of a BigCommerce hackathon, I redesigned the BigCommerce navigation to modernize the experience, fix major usability issues and future-proof the platform for scalability. Working with two outstanding front-end developers, we took a risk to show our executive leadership a new brand for the product.

‍

"Our entry won the Weiss-ly done hackathon award and is now a major initiative on the product roadmap."

The navigation redesign establishes a modern navigation system that seamlessly integrates with the existing design framework, providing merchants intuitive access to essential features and streamlining store management.

Product features

Modern Navigation: Redesigned to align with BigCommerce's BigDesign standards for a cohesive experience.
Enhanced Usability: Streamlined navigation reduces confusion, allowing efficient store management.
Scalable Design: Componentized architecture supports future integrations and feature expansions.
White-Labeling Opportunities: Facilitates customizations for direct-to-consumer platforms while maintaining consistency.

Missing foundations

The previous navigation system was outdated and lacked the scalability needed to support BigCommerce's rapid growth. While having UX issues like a two-tiered structure, the navigation also wasn’t built on modern design system foundations or supported by a scalable design token structure, creating inconsistencies with newer features and preventing seamless integration across the platform. As a result, maintaining a cohesive user experience became increasingly difficult as the platform evolved.

Designing for scalability

The new navigation system is built on modern design principles and aligns with BigCommerce existing design system, laying the foundation for semantic tokens and future features like dark mode. The updated token structure enables easier theming and adaptability, paving the way for a more customizable and accessible interface as BigCommerce continues to evolve. Read more about it here

Impact

Design advocacy

Inspired leadership to prioritize investment in modernizing the navigation system, demonstrating the value of improved user experience and scalability through a successful hackathon concept.

Design System Integration

Integrated with BigDesign, for a componentized navigation system that supports future feature expansions, reducing technical debt and enabling consistent platform growth.

Enhanced Foundations

Paved the way for semantic tokens, ensuring platform scalability with future updates and maintaining design system cohesion.

Improved Usability

Streamlined navigation experience reduced merchant confusion, improving task efficiency and lowering support inquiries related to navigation issues.

Read full case study