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 was undoubtedly the best UI developer on the programme (often carrying the burden of his team) and played a crucial role in rebuilding the look and feel of the bank's global online platforms. John was always articulate, willing to speak his mind, helpful and always did an amazing job ‑ he clearly takes immense pride in his work (and rightly so!). His attention to detail and perfectionist attitude helped produce a product that we could be proud of, despite the extremely difficult environment we had to work in.
John would suit any senior or lead UI developer roles and I would have no hesitation in recommending him."
- "
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!"
- "
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."
- "
John Kavanagh is a passionate and highly skilled developer with a wonderful ability to calmly concede downward business pressures whilst pragmatically delivering the project at hand.
John is never fazed by project management/requirement issues as are common in these environments, instead, he always finds a way to deliver value to both the end consumer and the business. It's not always easy to remain level‑headed and calm on high‑pressure projects but John's good nature and professionalism invariably remain infallible. It's an absolute pleasure working with him."
- "
I initially worked with John Kavanagh at Style.com where we built an e‑commerce site for Condé Nast. We built numerous versions of the site for prototypal purposes and finally went live with a version that contained the majority of work from John and his team. Always punctual, proactive and willing, he's definitely one to have in any development team. Since then we went on to work together again at HSBC where we built a number of key React components. He's a great team player who takes a lot of pride in his work, I'd highly recommend him."
