top of page

Century Martial Arts Website UX Redesign – Enhancing E-Commerce Experience

Redesigned the Century Martial Arts e-commerce website to improve navigation, product discovery, and checkout flow. Conducted heuristic analysis, user research, and high-fidelity prototyping, leading to higher engagement, reduced bounce rates, and increased conversions. 🚀

Case Study: UX Redesign for Century Martial Arts E-Commerce Website


Introduction

Century Martial Arts is a leading provider of martial arts gear and equipment, catering to martial artists, instructors, and fitness enthusiasts worldwide. The existing website was functional but outdated, with navigation, content structure, and usability issues impacting the user experience.


As a Product Manager with UX expertise, my goal was to enhance the website’s usability, modernize its interface, and streamline the shopping experience based on heuristic analysis, user research, and high-fidelity prototyping.


 
Project Objectives
Key Goals

✅ Improve site navigation and reduce friction in product discovery.

✅ Create a visually appealing and modern UI that aligns with user expectations.

✅ Optimize checkout flows for higher conversion rates.

✅ Enhance mobile responsiveness for a seamless multi-device experience.

Steps to Enhancing E-Commerce UX: 1. Improve Navigation, 2. Modern UI Design, 3. Optimize Checkout, 4. Enhance Mobile Responsiveness.
Steps to Enhancing E-Commerce UX: 1. Improve Navigation, 2. Modern UI Design, 3. Optimize Checkout, 4. Enhance Mobile Responsiveness.
Challenges Identified

❌ Overcrowded UI – The homepage had too many elements competing for attention.

❌ Inconsistent Navigation – Submenus were confusing and not intuitive.

❌ Weak Search Functionality – Users struggled to find products efficiently.

❌ Lack of Personalization – No product recommendations or tailored experiences.

Strategies for tackling website UX challenges: streamline UI, standardize navigation, enhance search efficiency, and offer personalized recommendations.
Strategies for tackling website UX challenges: streamline UI, standardize navigation, enhance search efficiency, and offer personalized recommendations.
 

UX Research & Findings
Heuristic Review

A detailed heuristic analysis was conducted to evaluate usability gaps. Key findings included:

📌 Aesthetics & Branding

  • Design felt outdated, lacking modern UI trends.

  • Crowded layout with poor use of white space.

  • Inconsistent iconography across the site.

📌 Navigation & Usability

  • Submenu structure was unclear, making product browsing difficult.

  • Breadcrumb navigation was not visible, causing confusion.

  • Search box disappeared when scrolling, frustrating users.

📌 Content & Readability

  • Product descriptions lacked clarity, missing essential details.

  • CTA buttons (Buy Now, Add to Cart) lacked prominence.

  • Customer support links were difficult to find.

📌 Functionality Issues

  • Cart and checkout process required too many steps, leading to high cart abandonment.

  • No progress indicator in checkout flow.

  • No real-time validation for form fields, causing errors.

Heuristic evaluation of Centurymartialarts.com highlights clear primary goals, a pleasing color scheme, and efficient load times, but identifies areas for improvement in navigation, use of white space, and availability of help and contact information.
Heuristic evaluation of Centurymartialarts.com highlights clear primary goals, a pleasing color scheme, and efficient load times, but identifies areas for improvement in navigation, use of white space, and availability of help and contact information.
User Research

👤 User Interviews & Surveys

  • 10+ e-commerce users interviewed to understand shopping behaviors.

  • Common frustrations included difficult navigation & lack of filtering options.

  • Users preferred a cleaner layout with better categorization of products.

📊 Heatmap & Analytics Review

  • Users dropped off most frequently in the cart page.

  • Search usage was high, but poor result accuracy frustrated users.

  • Homepage bounce rate was high due to overwhelming information density.


Visualizing the High Drop-off Rates in E-commerce: The diagram illustrates the significant reduction from initial user engagement through to purchase completion, emphasizing prevalent cart abandonment issues.
Visualizing the High Drop-off Rates in E-commerce: The diagram illustrates the significant reduction from initial user engagement through to purchase completion, emphasizing prevalent cart abandonment issues.
 

Design Solutions & UX Improvements
1. Simplified & Intuitive Navigation

📌 Challenge: Users found the navigation structure complex and the breadcrumb trail unclear.


✅ Solution:

  • Redesigned the main menu with clear category labels.

  • Implemented a persistent search bar for easy access.

  • Added a breadcrumb system for better wayfinding.

📍 Proposed Design – Low-Fidelity Wireframes (Experiment)



 

2. Modernized UI & Visual Hierarchy

📌 Challenge: The UI felt outdated and cluttered, reducing engagement.


✅ Solution:

  • Introduced a cleaner layout with ample white space.

  • Standardized typography & button styles for consistency.

  • Highlighted key CTAs with contrasting colors for better visibility.

📍 Updated UI Mockups

Responsive design for Century's e-commerce website is showcased on various devices, ensuring seamless shopping experiences across tablets, desktops, and mobile phones.
Responsive design for Century's e-commerce website is showcased on various devices, ensuring seamless shopping experiences across tablets, desktops, and mobile phones.
High-fidelity mockup of a home screen showcasing Century's martial arts gear, featuring trending products, deals, new arrivals, and customer service links. The design highlights partnerships and promotional offers, encouraging user engagement.
High-fidelity mockup of a home screen showcasing Century's martial arts gear, featuring trending products, deals, new arrivals, and customer service links. The design highlights partnerships and promotional offers, encouraging user engagement.
 

3. Enhanced Search & Product Discovery

📌 Challenge: Poor search functionality led to frustration and drop-offs.


✅ Solution:

  • Implemented AI-powered search with predictive suggestions.

  • Added robust filtering & sorting options for better product discovery.

  • Introduced "Related Products" & "Recently Viewed" sections to encourage browsing.

Diagram of a unified e-commerce solution showcasing AI-powered search, robust filtering, and product discovery features driving enhanced user experience.
Diagram of a unified e-commerce solution showcasing AI-powered search, robust filtering, and product discovery features driving enhanced user experience.
 

4. Streamlined Checkout Experience

📌 Challenge: The checkout process was lengthy and led to high abandonment rates.


✅ Solution:

  • Reduced checkout to a single-page flow.

  • Added a progress indicator to guide users.

  • Integrated real-time form validation to minimize errors.


 

Results & Impact

📈 Improved User Experience

  • Bounce rate reduced by 30% due to improved navigation.

  • Search accuracy increased by 50%, making product discovery easier.

The UX redesign led to a 30% reduction in bounce rate due to improved navigation simplicity and a 50% increase in search accuracy, enhancing product discovery ease.
The UX redesign led to a 30% reduction in bounce rate due to improved navigation simplicity and a 50% increase in search accuracy, enhancing product discovery ease.

🛍️ Higher Conversions

  • Cart abandonment dropped by 25% due to streamlined checkout.

  • Product views per session increased by 40%, boosting engagement.

UX redesign leads to a 25% reduction in cart abandonment and a 40% increase in product views per session.
UX redesign leads to a 25% reduction in cart abandonment and a 40% increase in product views per session.

📊 Better Mobile Experience

  • Mobile sessions increased by 35%, thanks to improved responsiveness.

Graph illustrating a significant upward trend in mobile sessions over time.
Graph illustrating a significant upward trend in mobile sessions over time.
 

Conclusion

By leveraging user research, heuristic evaluations, and iterative design, we transformed the Century Martial Arts website into a more intuitive, user-friendly e-commerce experience. These improvements not only enhanced usability and engagement but also contributed to higher sales and customer retention.


🚀 Next Steps:

  • Conduct A/B testing on UI variations to refine conversion rates further.

  • Implement personalized recommendations based on user preferences.



Project Gallery

© Copyright | Vijay Rangu

bottom of page