With a dated look, limited accessibility, and a misalignment with Mazda’s modern design ethos, the website was overdue for an upgrade.
W3 Awards, Gold: Automotive Website
Webby Awards, Nominee: Best Responsive/Adaptive Design for Mobile
— Me, as lead designer presenting to the Mazda Canada C-suite
Wireframes
We created wireframes for several key pages and all the website's tools, helping us define content hierarchies and component requirements.
Component Library and User Interface Design
During the design phase, we created and documented a robust, responsive, and accessible component library, which we used to design all content across the entire website. The system was flexible enough for vehicle detail pages, educational pages, corporate pages, and campaign pages.
Build & Price Configurator
The most complex tool we developed was the Build & Price Configurator. By breaking the configuration process into smaller, manageable steps, we reduced users’ mental load. We enhanced user agency and transparency by allowing them to see real-time updates to their vehicle as they customized it (which required the semi-automated creation of over 16,000 assets) and clearly compare costs and payment options. While the new tool significantly boosted dealer leads, we continue to identify opportunities for further optimization.
Look at something else
416-456-5049
finnygon@rogers.com
linkedin.com/in/finnygon