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.
I joined their digital team as a remote contractor at a pivotal point in the brand's new history: as it prepared to launch its first pure‑electric vehicle, the Polestar 2. 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 emerged as a leader in the electric vehicle industry. The website has continued to grow and evolve alongside it, continuing to demonstrate its commitment to quality, innovation, and sustainable design.
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 magnetic and 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, 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, this is powered by a set of pre‑rendered configurations, allowing the configurator 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.
- "
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 one of the best front‑end developers I've had the pleasure of working with. Incredibly knowledgeable, great attention to detail – he understands design and why it's important to get it right, and he's also very experienced coding for accessibility. Always professional but with a great sense of fun, John would be an asset to any team and project."
- "
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."
- "
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."
