Cleaning Product E‑commerce Website Design – Duck Smart
Cleaning Product E‑commerce Website Design – Duck Smart
Duck Smart is a specialist cleaning chemical company producing powerful cleaning products made from ingredients that are safe enough to drink. This makes the products particularly popular with households that have children or pets, where safety is just as important as cleaning performance.
The company had previously achieved significant success and had even partnered with Red Bull, providing cleaning stations at major events. However, as the business evolved, the brand and website had begun to feel outdated and no longer reflected the quality or potential of the products.
To support a relaunch of the brand, I designed and developed a new e‑commerce website for Duck Smart, transforming the company’s online presence into a modern platform capable of supporting both retail customers and trade buyers.
Revitalising an Established Brand
Duck Smart approached the project with a new logo design that had strong visual character and personality.
The challenge was to translate that branding into a website that felt just as bold and distinctive. To achieve this, I analysed the typography used in the logo and sourced complementary fonts that could be installed as custom web fonts.
These fonts helped maintain a consistent visual identity across the website while preserving the strong, energetic style of the brand.
Custom WooCommerce E‑commerce Website
The website was built using WordPress and WooCommerce, creating a flexible e‑commerce platform that allows customers to easily browse and purchase cleaning products online.
Significant customisation was carried out using custom CSS and design elements to ensure the store looked unique and aligned with the brand identity.
Examples of these customisations include:
- Custom styling across WooCommerce pages
- Graphical elements integrated throughout the design
- Custom bullet points designed as small duck icons
These small design details help reinforce the playful and recognisable Duck Smart brand.
Predictive Product Search
To make it easier for customers to find products quickly, the website includes predictive search functionality.
As visitors type into the search bar, the system automatically displays:
- Matching product names
- Product images
- Direct links to product pages
This improves the shopping experience and allows customers to quickly find the products they need.
Improved Shop Navigation
Rather than structuring the website navigation around pages, the site navigation was designed around product categories.
This approach allows visitors to immediately browse product types rather than needing to navigate through multiple pages.
Additional shop features include:
- Persistent shop sidebar filters
- Product quick‑view functionality
- Wishlist system for saving products
These features help improve usability and encourage repeat visits from customers.
Custom Plugin for Trade Customers
Duck Smart also supplies cleaning products to trade customers, which required additional functionality beyond a standard online shop.
To support this, I developed a custom WordPress plugin that detects when a user is logged in as a trade customer.
This plugin automatically:
- Displays the user’s trade discount
- Enables the additional payment method “Charge to Account”
This functionality allows trade customers to place orders quickly while maintaining their agreed pricing structure.
Automated Business Processes
To help streamline the business operations behind the website, several automated systems were integrated.
These include:
- Adaptive shipping calculations
- Automatic invoice generation
- Order management features within WooCommerce
These systems help reduce administrative work while improving efficiency for the business.
Multilingual Website
Because Duck Smart products are used by customers internationally, the website was designed to support multiple languages.
To achieve this, the website was integrated with GTranslate, allowing visitors to translate the site content into their preferred language.
This helps expand the reach of the brand and makes the website accessible to a wider audience.
Video Training for Website Management
To ensure the Duck Smart team could manage the website independently, I created a series of training videos explaining how to update the site.
These videos cover tasks such as:
- Adding new products
- Updating pricing
- Managing orders
- Editing content
Providing training materials helps ensure the business can confidently maintain the website moving forward.
Creative Branding Elements
One of the goals of the website was to make the brand feel fun and memorable.
This included playful touches such as:
- Animated elements across the site
- Custom graphics
- Creative call‑to‑action links such as “Duck it, let’s shop”
These elements reinforce the personality of the brand and help create a memorable shopping experience.
My Role in This Project
For this project I was responsible for:
- WordPress and WooCommerce website development
- Custom CSS styling and design
- Custom plugin development for trade customers
- Predictive search implementation
- Multilingual integration
- Training video creation for staff
- Product Packshot Photography
Technologies Used
- WordPress CMS
- WooCommerce e‑commerce platform
- Custom WordPress plugin development
- Custom CSS styling
- Predictive product search
- GTranslate multilingual system