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 one of the most open‑minded developers I have ever worked with. His appreciation of great creative work, his enthusiasm and 'anything is possible' attitude is always a breath of fresh air. I worked with him on several successful projects in our days at McCann Worldgroup. Since then we have collaborated on many freelance projects and he's always been super efficient and effective, combining a great work ethic with immense talent. If I ever have a creative digital project which needed bringing to life, John is the first developer I call on."
- "
John Kavanagh is a highly intelligent and truly senior front‑end web developer, who's surprisingly well versed in the arcana of CSS. For Macmillan he was initially churning out static templates on an SCSS BEM architecture, but soon moved on to managing the team (three developers), assigning and tracking tasks using a Trello board he introduced, and helping me nudge the team towards an integrated, Web Components based production pipeline. I enjoyed John's productivity and attitude, and I very much look forward to working together again."
- "
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."
- "
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!"
- "
I had the pleasure of working closely with John Kavanagh at Selfridges. He is an exceptional programmer who consistently delivered high‑quality work. John possesses a deep understanding of exceptional front‑end development skills and has a remarkable ability to tackle complex problems with creative and effective solutions.
What sets John apart is not only his technical expertise but also his strong work ethic and dedication to delivering results. He is a reliable and proactive team player, always willing to go the extra mile to ensure project success. I was particularly impressed with his ability to help with issues and make the explanations simple and succinct.
Beyond his technical skills, John is a pleasure to work with. He communicates effectively, collaborates seamlessly with team members, and approaches challenges with a positive and solution‑oriented mindset."
