Ocular’s Website Rebuild: Clean Code Meets Scalable Design
Ocular Charging is one of Australia’s leading providers of electric vehicle charging technology, delivering reliable, premium-grade solutions for homes, businesses, and large-scale infrastructure. As their product range expanded and the EV market surged, it was clear their website needed to evolve with them.
That’s where we came in.
A Website That Matches the Tech
Ocular’s existing digital presence no longer reflected the premium quality or technical sophistication of their products. The new site needed to do more than just look good. It had to perform, scale, and guide users clearly through a diverse range of products and applications. Our design team crafted a clean, modern interface in Figma that balanced usability with brand identity. From there, the development brief was clear: bring the design to life through a modular, eCommerce-ready build that aligned seamlessly with Ocular’s vision.
Charging Up the Front-End
The build began with a full review of the Figma design files created by our in-house team. Every element, from font styles and colour palettes to interactive components and responsive layouts, was carefully scoped. Development started by establishing the global design system: setting up typography hierarchies, defining colour variables, and creating reusable components for buttons, forms, and section layouts. With these foundations in place, we ensured visual consistency across the site and laid the groundwork for a high-fidelity build that delivered on the design vision, pixel-for-pixel.
Backend Development: Structured for Flexibility
To support future content growth and minimise friction for Ocular’s internal team, we built a custom WordPress theme using a mix of clean PHP and trusted plugins.
- Advanced Custom Fields (ACF) was used to power modular content blocks, enabling page layouts to be easily customised from the WordPress admin.
- Gravity Forms was used to build and manage forms with advanced functionality, including conditional fields and lead routing.
This approach gave the Ocular team the ability to edit, extend, and duplicate page sections without developer intervention, while keeping performance tight and the codebase lean.
Powering Up the eCommerce Side
Once the foundational pages were complete, the focus shifted to WooCommerce.
Product categories were carefully structured to reflect the brand’s offerings across commercial, residential, and portable charging solutions. Products were then integrated not only into the dedicated Shop and Catalogue pages but also featured contextually throughout the rest of the site, ensuring users encountered relevant hardware as they browsed broader content.
Product pages were designed to go beyond WooCommerce defaults, including technical specs, high-res images, compatibility notes, downloadable documentation, and usage recommendations. The goal: give users everything they need to make an informed choice, without the friction.
Animation and Interactivity: Motion, Detail, and Flow
With the structure in place, attention turned to visual polish. Subtle animations were introduced across the site to bring the site to life and enhance engagement without slowing load times—scroll reveals, hover states, transitions between sections, and more. These were implemented through lightweight CSS and JavaScript to keep performance fast and responsive.
Animations were tested to ensure they remained performant across devices and enhanced the user experience without disrupting it
These finishing touches helped convey the modern, technical feel of the Ocular brand while supporting usability.
QA and Performance: Testing Across the Board
Before the site could go live, it had to pass an extensive round of testing and quality assurance.
- Functionality testing was conducted on all buttons, menus, and form submissions to ensure a smooth user experience.
- Responsive testing used Chrome’s device emulator to simulate the site on a wide range of screens, from desktops to mobile devices.
- Performance testing was handled via Google Lighthouse, helping identify and fix any issues related to speed, render-blocking resources, or layout shifts.
- Accessibility checks focused on semantic structure, alt text implementation, keyboard navigation, and avoiding text embedded in images.
Once internal QA was complete, the site was shared with the broader Click Click Media team for further review, catching the final edge-case issues before launch.
The Final Result
With all testing complete, the website was launched on time, on spec, and built to scale alongside Ocular’s growing product ecosystem.
The new site delivers:
- A fast, scalable eCommerce platform
- An intuitive, modular backend for content updates
- A responsive and interactive frontend that elevates the brand
With WooCommerce powering the shop, ACF enabling backend control, and a custom design system holding everything together, the Ocular website is now as reliable and forward-thinking as the technology it represents.
Ocular’s new website now lives up to the company’s position as a future-focused leader in EV charging. It’s fast, clean, responsive, and scalable, built to accommodate product expansion and performance marketing in equal measure.
Need a website that works as hard as your business does?
We build tailored, high-performance WordPress and WooCommerce websites that scale with you. Get in touch to bring your next digital project to life.
