Manufacturing Company Website Redesign (Webflow CMS)

Overview

This project involved a complete redesign of the Friction One website — a manufacturing company specializing in high-performance friction materials and industrial components.
The goal was to create a modern, interactive, and scalable Webflow CMS website that highlights their product range, showcases technical expertise, and improves search visibility for key industry terms.

As both designer and developer, I focused on delivering a solution that combines a strong visual identity, structured CMS content, and product-focused animations to clearly communicate Friction One’s value and innovation.

Challenges

Before the redesign, Friction One’s website faced several issues:

• Outdated design and limited visual engagement for complex products.
• All product types were listed together, without category separation or technical details.
• No structured CMS, making it hard to update products or introduce new items.
• Limited SEO optimization — especially for specific product categories and use cases.
• Weak storytelling around innovation, quality assurance, and manufacturing expertise.

Process

1. Content Structure & CMS

• Created a CMS for products, allowing each item to include:
  • Product type and category (e.g., brake pads, clutch discs, industrial linings, custom components).
  • Product features and specifications.
  • Technical data sheets or brochures (available for download).
• Added CMS options for highlighted or new product introductions, making it easy for the client to feature recent developments.
• Implemented cross-linking between related products and applications to improve SEO and user navigation.

2. Design & Animation

• Introduced micro-animations and interactive hover effects to visually demonstrate product features and materials.
• Created animated product comparison blocks for showing performance metrics or manufacturing details.
• Designed a clean, industrial visual style that reflects the company’s technical precision — using neutral tones, structured grids, and high-quality product photography.

3. User Experience & SEO

• Developed dedicated pages for each product type, improving discoverability and ranking potential for targeted keywords.
• Added clear CTAs for quote requests, consultations, and technical downloads.
• Integrated location and distribution coverage to target regional markets effectively.
• Optimized all product pages with structured data (schema) and keyword-rich metadata for better search visibility.

4. Webflow Development

• Built the website fully in Webflow CMS, making it scalable and easy to maintain.
• Integrated CMS filters for product listings and portfolios.
• Designed custom CMS templates for “New Products” and “Product Updates.”
• Connected data sheet downloads, ensuring users can easily access specifications and product certifications.

Results

The new Friction One website achieved significant improvements across multiple areas:

✅ Clear product structure with categorized CMS collections.
✅ Modern and dynamic animations for interactive product storytelling.
✅ SEO boost through optimized metadata and technical keyword focus.
✅ Simplified content management for adding new or featured products.
✅ Stronger brand credibility through a professional, industry-aligned design.

The result is a high-performing, SEO-optimized Webflow CMS website that helps Friction One showcase innovation, improve customer engagement, and scale product communications with ease.