Octopus Electric Vehicles Website

Summary

In June 2023, when the company I was working for went out of business, I transitioned to full-time freelancing. Leveraging my network of professional colleagues and creative friends, I quickly found work and was referred to Jamie Kashetta of Xero Project. Together, we embarked on building a new electric vehicle leasing website for Octopus Energy’s US web presence.

Jamie managed the design aspects of the website, while I took on the role of the sole developer. The project, though aligned with my expertise, required adaptation to Octopus’s internal design language and component library, which were built on top of Material UI. The tech stack included Next.js, TypeScript, and occasional use of SASS for complex styling.

The data integration was particularly intricate, pulling from multiple sources such as AirTable, StoryBlok, and Stripe. The website comprised several complex pages, including a dynamic homepage, a car listing page, unique car detail pages, a pricing calculator/comparison page, a blog, and a FAQ page.

One of the most challenging aspects was the checkout process. It featured a multi-step flow allowing users to customize their purchase, from selecting the car color to defining the lease duration and mileage. This process collected extensive user information and tailored offerings based on the user’s ZIP code, ensuring region-specific data was presented. The final step guided users through making an initial deposit, facilitated by Stripe’s API.

This project not only enhanced my skills in adapting to new design systems and libraries but also reinforced my ability to manage complex data integrations and user flows in a high-stakes environment.