Redesigning Technik: A User-Centric B2B E-commerce Website

As urbanization continues to accelerate, traditional public transportation systems face growing challenges in addressing the mobility needs of modern city dwellers. While buses have served as the cornerstone of public transit for decades, their limitations are increasingly apparent. Didi recognized these challenges and set out to innovate urban transit by integrating advanced Internet and big data technologies into a Demand-Response Transit (DRT) system. This system aimed to enhance public transportation by offering more flexibility and inclusivity, particularly in megacities.

As urbanization continues to accelerate, traditional public transportation systems face growing challenges in addressing the mobility needs of modern city dwellers. While buses have served as the cornerstone of public transit for decades, their limitations are increasingly apparent. Didi recognized these challenges and set out to innovate urban transit by integrating advanced Internet and big data technologies into a Demand-Response Transit (DRT) system. This system aimed to enhance public transportation by offering more flexibility and inclusivity, particularly in megacities.

Image of a computer and keyboard on a desk

Timeline

Jun. - Sept. 2023

Topic

Portfolio Management Tool

Team

3 PM, 5+BA, 4+ Designer, 30+ Developer

Role

UX Design, UI Design, Interaction Design

🕰

Project Overview

Technik, a leading B2B e-commerce platform specializing in CNC tooling, faced significant challenges in user experience. The existing website had an outdated design and cumbersome navigation, making it difficult for users to find and purchase products efficiently. The client sought a comprehensive redesign to improve usability, streamline the user journey, and enhance overall site engagement.

🕰

Problem Statement

How to find a needle in the haystack quickly?

The Challenge:

The Challenge: Users often described the process of finding specific products on the Technik website as "finding a needle in a haystack." The extensive product catalog and inadequate search and navigation tools led to frustration, high bounce rates, and low conversion rates. The primary goal was to simplify product discovery while maintaining the depth and richness of the catalog.

🚛

Roadmap

Research & Discovery

🚛

Competitor Analysis

• Objective:

Understand how other successful Shopify-based e-commerce platforms and CNC tooling websites structure their user experience.

• Objective:

Understand how other successful Shopify-based e-commerce platforms and CNC tooling websites structure their user experience.

• Key Findings:

Competitors leveraged clean, minimalistic designs with intuitive navigation and robust search functionalities. Their websites typically offered advanced filtering options and clear categorization, which were missing in Technik’s existing setup.

• Key Findings:

Competitors leveraged clean, minimalistic designs with intuitive navigation and robust search functionalities. Their websites typically offered advanced filtering options and clear categorization, which were missing in Technik’s existing setup.

🚛

User Interviews

• Objective:

Gather insights directly from users to identify pain points and expectations.

• Objective:

Gather insights directly from users to identify pain points and expectations.

• Methodology

Conducted in-depth interviews with a diverse group of Technik’s customers, including small business owners, procurement specialists, and engineers.

• Methodology

Conducted in-depth interviews with a diverse group of Technik’s customers, including small business owners, procurement specialists, and engineers.

Our main Audiences

ToC User Journey Map

ToB Customer

Behavioral Analysis

Through interviews and surveys, it became evident that users were overwhelmed by the vast number of products and found the existing search and navigation tools inadequate. Users expressed a strong need for more precise search options and a clearer categorization system.

Pain points included:

• Difficulty in navigating the site.

• Lack of effective search filters.

• Overcomplicated checkout process.

🚛

Data Analysis

• Objective:

Analyze existing user behavior and interaction data to inform design decisions.

• Objective:

Analyze existing user behavior and interaction data to inform design decisions.

• Tools

Google Analytics, Hotjar, and the client's CRM data.

• Tools

Google Analytics, Hotjar, and the client's CRM data.

• Key Findings

The most visited pages were the product detail pages, indicating that users who could find products were highly engaged. High drop-off rates occurred during the search process, particularly when filtering options were limited or confusing. Repeat customers often returned for specific products but struggled to find them due to poor navigation.

• Key Findings

The most visited pages were the product detail pages, indicating that users who could find products were highly engaged. High drop-off rates occurred during the search process, particularly when filtering options were limited or confusing. Repeat customers often returned for specific products but struggled to find them due to poor navigation.

Design Process

1.

Redefining the User Flow:

Old Flow Analysis

The existing flow was a significant pain point. Users were required to sift through a massive list of products with minimal guidance, leading to frustration and abandonment.

First Iteration - Workflow

First Iteration - Workflow

Define Product --> Define Category --> Define Subcategory --> Filter the products --> Select features of the product --> Check Detail

This approach added clarity but also increased the number of steps, which could overwhelm users.

Final Solution - Workflow

Final Solution - Workflow

Define Product --> Define Category --> Define Feature --> Check Detail

This streamlined approach reduced cognitive load and significantly improved user satisfaction.

2.

Information Architecture Overhaul:

Objective

Rebuild the site’s architecture to make navigation intuitive and information easy to access.

Process

Process

• Conducted card sorting exercises with users to understand their mental models.

• Developed a new hierarchical structure that emphasized primary categories and key product features.

• Created a sitemap that balanced breadth and depth, ensuring users could find what they needed without excessive clicks.

Outcome

The new IA reduced the time users spent searching for products and decreased the bounce rate by 25%.

3.

Wireframing & Prototyping:

Low-Fidelity Wireframes

Low-Fidelity Wireframes

• Focused on layout and structure, ensuring that the new navigation and search functionalities were easily accessible.

• Conducted usability tests with these wireframes to identify potential issues early.

High-Fidelity Prototypes:

High-Fidelity Prototypes:

• Incorporated visual design elements, such as a modernized color scheme, typography, and iconography, consistent with Technik’s brand identity.

• Enhanced the user interface with interactive elements like dynamic filters, predictive search, and personalized recommendations.

• Conducted A/B testing on critical pages to optimize conversion rates.

4.

Iterative Testing & Feedback:

User Acceptance Testing (UAT):

User Acceptance Testing (UAT):

• Engaged actual users in testing the final prototype, gathering feedback on usability and functionality.

• Iterations were made based on this feedback, particularly in simplifying the checkout process and enhancing mobile responsiveness.

Stakeholder Feedback:

Stakeholder Feedback:

• Held regular review sessions with the client, presenting progress and gathering input.

• Ensured that the design aligned with business goals while meeting user needs.

Final Outputs

🚛

Enhanced Search Experience:

• Introduced a 'Smart Search' function that predicts user intent and offers relevant suggestions, significantly reducing search time.

• Added a ‘Narrow by Category’ feature, allowing users to quickly filter results by relevant categories.

🚛

Improved Product Detail Pages:

• Redesigned product detail pages to highlight key specifications, related products, and user reviews, aiding decision-making.

• Included a comparison feature that lets users view multiple products side by side.

Homepage --> Category --> Sub-Category --> Category Page:

Indicate main product types Subcategory Page: Display main product features

Main Page --> Group --> Sub-Group --> Group Page:

Product Listing: Display secondary product feature, price and product# Product Detail: Allow distributor to check the product detail parameter

🚛

Streamlined Checkout Process:

• Simplified the checkout process by reducing the number of steps and offering multiple payment options, leading to a 15% increase in completed transactions.

🚛

CMS System:

• Developed a custom CMS with draggable components, allowing the client to easily update product listings, content, and promotions without technical assistance.

CMS Draggable Components

CMS Pages

Client & User Feedback

"The redesigned website has boosted our business. Customers find what they need easily, increasing sales. The CMS makes updates effortless. We're excited to continue our partnership."

🕰

User Feedback

• Usability

Users praised the simplified navigation and improved search functionality, noting they could find products faster and with less frustration.

• Usability

Users praised the simplified navigation and improved search functionality, noting they could find products faster and with less frustration.

• Visual Appeal

The modernized design and enhanced product detail pages were highlighted as significant improvements.

• Visual Appeal

The modernized design and enhanced product detail pages were highlighted as significant improvements.

🕰

Key Takeaways

• Strategic Design Decisions

Informed, data-driven design decisions were crucial in creating a user experience that met both user needs and business goals.

• Strategic Design Decisions

Informed, data-driven design decisions were crucial in creating a user experience that met both user needs and business goals.

• User-Centered Design

An iterative approach, involving continuous testing and refinement, was key to the project’s success.

• User-Centered Design

An iterative approach, involving continuous testing and refinement, was key to the project’s success.

• Collaboration & Communication

Regular feedback loops with stakeholders and developers ensured the project stayed aligned with business objectives.

• Collaboration & Communication

Regular feedback loops with stakeholders and developers ensured the project stayed aligned with business objectives.

• Scalability and Future-Proofing

The design was built with scalability in mind, ensuring the site could grow and adapt to future needs.

• Scalability and Future-Proofing

The design was built with scalability in mind, ensuring the site could grow and adapt to future needs.

🕰

Conclusion

The Technik website redesign not only improved user experience but also demonstrated the value of strategic, user-centered design in driving business success. This project was a valuable learning experience, enhancing my skills as a UX designer and delivering significant benefits to the client.

← Back to All Works

Ready to build something amazing?

I'd love to connect with you!

Ready to build something amazing?

I'd love to connect with you!

Ready to build something amazing?

I'd love to connect with you!