The name Autarq comes from autarky, meaning self-sufficiency. The concept originating from ancient Greece is used here to mean energy self-sufficiency, with Autarq enabling households to produce energy autonomously from its innovative solar roof tiles. We’re proud to support our client on a sustainable mission and lay our brick in the digital foundation for their future growth, especially during skyrocketing energy prices, energy transition efforts, and broken supply chains.

The main challenge of this project was accelerating the company’s business momentum and profit realization with a brand-new digital tool and responsive website. So, time was of the essence. To deliver the website in approx. two months, we put out a dedicated team in the capacity of a technological partner. We used the Scrum methodology with a Product Owner-Scrum Manager setup to facilitate effective execution. With time gains in mind, we also split the team into two units working collaboratively.

The website’s front-end is written in React and Next.js. This setup is supported on the backend side by Strapi, a headless, scalable, open-source Node.js-based Content Management System (CMS), GraphQL, and the Apollo Query library. This versatile system, together with its Dynamic Zones (a reusability-oriented native feature), is easily flexible, scalable, and intuitive to use even by non-technical stakeholders – a powerful tool for the website’s future development.

We integrated the roof configurator with the client's backend, Google Maps, and the Usercentrics Consent Management Platform (CMP). The first two integrations automate (speed up) the quote generation process, also by accelerating the user flow at the stage of filling out the address field in the configurator. The connection with the Usercentric CMP automates the user-directed pop-ups and simplifies the cookies settings' management. These enablements speed up the time-to-quotation for the user.

For the Autarq website, we provided a Fully Responsive Web Design for mobile and any other types of devices, making for a neat visual experience and preventing resolution-related problems for the users. Based on the stakeholders’ requirements, we created a separate repository with all the reusable components used in the projects for future use. 

In terms of DevOps support, we used Kubernetes for container management and Hetzners’ Load Balancer to account for future website scalability needs and improve performance. We also ensured that infrastructure is properly monitored using open-source Prometheus, Grafana, and Loki-stack.

The Infrastructure as a Code setup in the Ansible automation tool helps to manage infrastructure changes, provides easy-to-read documentation, and supports version control. We also employed an object-relational database in PostgreSQL. 

As the website supports the client's sales efforts, we took special care to the product presentation, configurator, and overall website usability. The product web page features a number of animations and interactive components written in the Framer Motion Library. 

We used the WebP format to compress resources without losing their quality. This optimization resulted in a 93% reduction in asset size for the 75 images and animation used on the product page. Another tactic used to reduce weight was to prepare a selection of different-sized versions of the same image and display the one that best fits the user's screen.

To deliver the MVP quickly, on the Quality Assurance (QA) side, we focused on manual tests, specifying the requirements, and using experience-based techniques such as exploratory testing. Our QA experts conducted accessibility tests, tests on real mobile and tablet devices (iOS and Android) and on simulators (BrowserStack, Xcode). We also conducted end-to-end automated tests in Cypress for regression within the roof configurator paths.

All in all, Tech Leadership, our product teams’ joint success, was indispensable for delivering a highly usable website for our client in approx. two months. Our mostly senior specialists demonstrated a high level of ownership, used top communication tactics, and showcased business acumen to understand the client’s priorities. We also managed requirements proactively to ensure the priority scope was delivered on time. 

The Autarq project specifically benefited from the Tech Lead role, which involved taking sensible tech stack decisions, implementing top engineering practices, providing tech mentorship for the team, and collaborating with stakeholders. 

Within our tech leadership efforts, we also maintained a lean code. Using Next.js and Webpack Bundle Analyzer, we kept the code’s weight to a minimum. We sectioned off some of the components, functions, and packages into separate modules, which resulted in approx. 20% decrease in the JavaScript (JS) code weight. We also used Server-side rendering (SSR) for faster website loading and additional SEO and UX advantages.

The solar roof setup installation has to be safe and as easy as 1-2-3. The website we provided for the client is equally easy-to-use, and the configurator is an intuitive way to get a price estimate of a future solar rooftop in just a few steps. The fruitful collaboration within the project resulted in a high average NPS score (9/10) from all stakeholders. We look forward to further enriching Autarq’s website in line with the client’s business goals!