Refreshing the brand identity for a leading design agency specializing in design, development, and other disciplines.
Brand Refresh
Timeline
Jun. - Sept. 2023
Topic
Portfolio Management Tool
Team
3 PM, 5+BA, 4+ Designer, 30+ Developer
Role
UX Design, UI Design, Interaction Design
Redesigning Technik: A User-Centric Approach
Redesigning Technik: A User-Centric Approach
🕰
Project Overview
🕰
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.
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
🕰
Problem Statement
How to find a needle in the haystack quickly?
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.
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
🚛
Roadmap
Research & Discovery
Research & Discovery
🚛
Competitor Analysis
🚛
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
🚛
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
Our main Audiences
ToC User Journey Map
ToC User Journey Map
ToB Customer
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.
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.
Pain points included:
• Difficulty in navigating the site.
• Lack of effective search filters.
• Lack of effective search filters.
• Overcomplicated checkout process.
• Overcomplicated checkout process.
🚛
Data Analysis
🚛
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
Design Process
1.
Redefining the User Flow:
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.
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
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.
This approach added clarity but also increased the number of steps, which could overwhelm users.
Final Solution - Workflow
Define Product --> Define Category --> Define Feature --> Check Detail
This streamlined approach reduced cognitive load and significantly improved user satisfaction.
This streamlined approach reduced cognitive load and significantly improved user satisfaction.
2.
Information Architecture Overhaul:
2.
Information Architecture Overhaul:
Objective
Rebuild the site’s architecture to make navigation intuitive and information easy to access.
Objective
Rebuild the site’s architecture to make navigation intuitive and information easy to access.
Process
• Conducted card sorting exercises with users to understand their mental models.
• Conducted card sorting exercises with users to understand their mental models.
• Developed a new hierarchical structure that emphasized primary categories and key product features.
• 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.
• 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%.
Outcome
The new IA reduced the time users spent searching for products and decreased the bounce rate by 25%.
3.
Wireframing & Prototyping:
3.
Wireframing & Prototyping:
Low-Fidelity Wireframes
• Focused on layout and structure, ensuring that the new navigation and search functionalities were easily accessible.
• 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.
• Conducted usability tests with these wireframes to identify potential issues early.
High-Fidelity Prototypes:
• Incorporated visual design elements, such as a modernized color scheme, typography, and iconography, consistent with Technik’s brand identity.
• 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.
• 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.
• Conducted A/B testing on critical pages to optimize conversion rates.
4.
Iterative Testing & Feedback:
4.
Iterative Testing & Feedback:
User Acceptance Testing (UAT):
• Engaged actual users in testing the final prototype, gathering feedback on usability and functionality.
• 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.
• Iterations were made based on this feedback, particularly in simplifying the checkout process and enhancing mobile responsiveness.
Stakeholder Feedback:
• Held regular review sessions with the client, presenting progress and gathering input.
• Held regular review sessions with the client, presenting progress and gathering input.
• Ensured that the design aligned with business goals while meeting user needs.
• 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
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."
"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
🕰
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
🕰
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
🕰
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.
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.
