Full Website
Rebuild
Visit Website
In late 2022, Zero Motorcycles was ready for a digital refresh. The old website was several years old, riddled with tech debt, and had an overall look that no longer matched the direction of the growing brand. With the launch of brand new models, evolving marketing strategies, and a push to better reflect their position as a premium, industry-leading electric motorcycle company, it was time for a change.
Background
The old website was built on Gatsby and connected to a headless CMS (Prismic) for page content, configurations, and images. The site relied on deprecated tools requiring frequent band-aid fixes. It was slow to build as the content on the site grew; it reached 20 minutes in the worst case scenarios. It failed builds often for various reasons, leading to uncertainty on big launch days when timing was of the essence.
Old website homepageThe plan was to update our stack to Next.js. Gatsby was a Static Site Generator, meaning the entire site was prebuilt at build time. This was the reason for higher build times. Given the high build times, we wanted control over which pages could be server-side rendered and which to use incremental static regeneration (ISR) - providing the speed of static sites with the freshness of server-rendered sites.
The redesign project kicked off in October 2022, just after the launch of the new Zero DSR/X and a new e-commerce site for parts & accessories. I worked with Zero’s digital marketing team and Canvas Creative, a design and development agency, to bring the new vision to life. Canvas led the design phase, while development was a shared effort between myself and two agency developers.
We overhauled core parts of the site including:
- The homepage and model pages.
- A brand-new Ride Electric section, meant to boost SEO by providing evergreen content.
- A streamlined, more intuitive navigation component.
- A model comparison page for mid-funnel users interested in comparing features.
Ride Electric homepage
Ride Electric "future" page
Model comparison pageBefore development, I was responsible for scoping what needed to be included in the new site, developing a progressive roadmap, and creating a project timeline from kick-off until deployment. During the development phase, I held bi-weekly standup calls with the Canvas Creative team to track progress and discuss risks and blockers. From each stand-up call, we would delegate tasks in the development backlog between each other.
Many parts of the website were preserved, such as the e-commerce site, footer, dealer locator, standard/default marketing page types, and several useful components. Other parts were redeveloped for higher re-usability throughout the site.
Accessories e-commerce siteResults
- 80% faster build times on average compared to the Gatsby site.
- The final site earned an Honorable Mention from Awwwards and a 7.74 judge’s score on CSS Design Awards.
- New content on the site for SEO value.
- More reusable components in the codebase, leading to a higher level of brand consistency.
- Still in use today - 3 years later - with new features, sections, and pages being created frequently.
Ready for a website redesign that performs like this?
Book a free discovery call