Objective: Improve the user experience, make the website more modern-looking, convenient, and visually appealing while maintaining high speed and functionality across all devices.
Technologies used: Wordpress, WooCommerce, ACF blocks, Tailwind CSS, dynamic parts with Vue.js, AWS, CloudFlare
People Involved: 1
Timeline: 300 hours
Prehistory of Wipers Direct e-commerce way
Wipers Direct is an Australian company
based in Melbourne specializing in the sale of car windscreen wiper blades. The company sought to
improve the user experience (UX) on its website, maintaining functionality and providing a modern
design. We received a ready-made Figma layout designed by their designer and took on the task of
implementing the frontend.
Challenges
- Precise design implementation: We were responsible for ensuring the implemented interface fully matched the Figma layouts, taking into account all details, such as spacing, colors, fonts, and interactive elements.
- Responsiveness: Ensuring the website looked flawless on various devices, including mobile phones, tablets, and desktops.
- Collaboration with the backend developer: Effective integration with the backend to ensure the operation of key features such as product search, cart, and payment.
- Maintaining high performance: Optimizing page load speeds and the overall site performance.
Technologies used e-commerce solution to meet all business needs
- TailWind: for creating modern layouts with optimized CSS, for fast and efficient component styling.
- JavaScript (ES6+): For interactive elements and animations.
- Vue: for interactive elements with reusable components and maintainable code base
- WP Rest API: for implementing custom logic for customer searching
- CloudFlare CDN: for faster page responses
Our Solutions
Precise design implementation: Our developer implemented the design exactly as per the layouts, preserving every detail to ensure a harmonious appearance.
Example of overriding WooCommerce Cart
template.
All styles build with help of TailWind, which help to optimise and reuse CSS code throught the site.
All styles build with help of TailWind, which help to optimise and reuse CSS code throught the site.
Interactivity: We integrated dynamic menus, dynamic cart and checkout pages.
Example of using custom model classes for implementing additional logic of calculation dynamic prices,
rendering cart items.
All styles build with help of TailWind, which help to optimise and reuse CSS code throught the site.
All styles build with help of TailWind, which help to optimise and reuse CSS code throught the site.
Example template of ACF block.
This block can be reusable and render via Gutenberg editor through the site as well can be imported
directly via PHP.
Example of structure Product details page.
Structure of Product details build with WooCommerce hooks and ACF blocks. ACF blocks allow to manage all
content of this page through WordPress admin panel.
Speed optimization: To achieve high scores on Google Page Speed and ensure optimal performance, we removed outdated CSS and rebuilt reusable UI sections using Tailwind CSS, significantly reducing CSS size. Additionally, we implemented caching mechanisms with the WP Rocket cache plugin, connected the site to the Cloudflare CDN, and used the Perfmatters plugin to deactivate unnecessary plugin assets.
results
Results of 3 months development
The new Wipers Direct website meets all modern quality standards:
- High loading speed.
- Responsiveness across all devices.
- An intuitive and attractive interface.
Why Choose Us?
Our experience in precise design implementation enables us to create
high-quality interfaces that meet the highest standards. We always aim for high quality, as every project is
our contribution to meeting the client’s needs and ensuring their business success.
Ready to turn your design into a perfect website?
Contact us, and
we’ll show you how your ideas can become reality!
