Polestar
In classic Scandinavian style, this is a clean and minimal website, whilst also being highly animated and interactive. Built using Gatsby (React and TypeScript) alongside a legacy WordPress content source.
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.
