Polestar
Senior developer in Polestar's digital team, helping move its temporary WordPress site onto a Gatsby, React, and TypeScript platform for model pages, configurators, and future growth.
In Detail
Nine years ago, Polestar embarked on a transformative journey, moving away from its origins as a racing and automotive engineering company with close ties to Volvo, and shifting focus towards high‑quality, premium EVs under the ownership of Geely. As you might imagine, their previous WordPress‑based website was no longer befitting of the brand's new image and aspirations.
In the short term, a new WordPress site was launched whilst work began on a new digital presence that would help mirror the brand's Scandinavian heritage and technological innovation. This new site was to be design‑led, clean and minimalistic (as is the brand's design ethos), and yet highly animated and interactive. Technologically advanced, just like their cars.
At this time, we were deep into the transition from their temporary WordPress setup to a much more advanced and future‑proof platform using Gatsby, React, and TypeScript. Using these technologies meant that we were able to produce a high‑performance website that could support Polestar's ambitious digital and global goals, whilst also (to start with) integrating seamlessly with their legacy WordPress content source.
The site was built component‑by‑component with Storybook, alongside a carefully considered and detailed design system and patterns, allowing us to build new and different pages whilst also introducing more complex, interactive, and immersive features such as the animate‑on‑scroll panels that now feature on every model page. This was a project focused on setting the foundations and digital stage to support the company and website as it continued to develop and grow, accommodating future vehicles and Polestar's evolving narrative.
Since then, Polestar has continued to grow, introducing new vehicles and expanding into new markets. The website has grown and evolved alongside it, building on the digital foundations established during this initial phase of the project.
An Animated, Responsive Experience
Using scroll listeners and the Intersection Observer API, the user is presented with a premium, immersive, and interactive experience as they traverse each page. Every interaction presents more animated imagery of the cars alongside technical specifications and advanced features.
Home Car Carousel
Early in the visitor's journey on polestar.com, they are presented with this draggable model selector which allows them to move through an animated sequence displaying each car in turn.
This was achieved using a rendered sequence of nearly four hundred frames (each highly optimised, averaging less than 70kb each despite being 1920x1080), which neatly allowed for one hundred frames of animation between each model. This sequence of images is mapped into a canvas element on the page, with the displayed frame determined by the user's dragging interaction.
Simple, Intuitive Configurators
Continuing with the minimalist approach, the Polestar model configurators are simple and slick. Featuring prominent imagery, the configurator is powered by a set of pre‑rendered configurations, allowing it to simply switch out the entire set of images as the user selects and changes the available options.
Using full‑render mapping is a departure from the approach used in more conventional vehicle configurators, where different areas of the vehicle are rendered and overlaid individually. What it does is lead to a very quick and intuitive user experience that lends itself well to smaller‑screen use as well as larger desktop devices and has demonstrated a very high use and order rate from smaller devices, where order rates are traditionally lower.
A Library of Reusable Components
One of the benefits of working within a React ecosystem is that it is very straightforward to build self‑contained, reusable components. These are then developed into a Storybook library, allowing their reuse as page 'building blocks' across the Polestar platforms. This approach also means each component is documented, tested, and easy to maintain and iterate upon, as the platform matures.
The Outcome
My work with Polestar helped establish the digital foundations for a new generation of its website, as the company prepared to launch the Polestar 2 and expand into new markets. The Gatsby, React, and TypeScript platform provided a reusable foundation for model pages, configurators, and more immersive digital experiences, designed to evolve alongside the brand and its growing range of vehicles.
- "
John Kavanagh is an incredibly talented and efficient developer with great expertise in Gatsby and Contentful. He is incredibly personable and also always willing to share his knowledge. I also appreciated his ability to communicate openly and in a way that allowed me to find a way forward with him.
It was a pleasure to work with John and I would welcome another opportunity to work with him again!"
- "
I worked with John Kavanagh at AND Digital for a client focusing on the development of web pages through Gatsby and Contentful. His experience and skill definitely showed but alongside that he was enjoyable to work with. He was always available to the team in any capacity; whether that be to help get a ticket over the line or to teach new ways of doing things. My time with John has personally been a great learning experience and I hope to work with him again in the future."
- "
John Kavanagh is enthusiastic and enjoys getting work completed, he is happy to challenge priorities where he sees there is a quicker ROI to be made from his development. His opinion on how we have developed features has been key to our success this financial year. He is fun to work with, always vocal and the dynamic he brought with PO/UX/UI has driven us to deliver better quality features faster than before."
- "
It's been a pleasure to work with John Kavanagh in the web team at Nando’s. He's a top professional who has prided himself in bringing my designs to life with a high standard since day one. He has a great eye for detail with a clear understanding of user‑centric thinking and is always willing to give great suggestions from a technical standpoint.
I have also really appreciated his positive energy which gives a great lift to the team at every stand up. Any team would be lucky to work with him, as I have experienced myself!"
- "
Worked with John Kavanagh on a big Nando’s project, moving a legacy site off of Drupal and onto Vercel and Next.js.
His work and attitude are both stellar! Highly recommended."
