The project utilized technologies like React, Next.js for the front-end, and Node.js with Strapi CMS for the backend. Integrations included Google Maps and Usercentrics, and DevOps tools like Kubernetes and Helm ensured scalability. Prometheus, Grafana, and Loki were used for monitoring. The team followed Scrum methodology with extensive testing using Cypress, ensuring a robust and responsive website.
The main goal of Autarq’s advanced platform and configurator was to popularize the company’s product and digitalize (accelerate) their sales processes to generate more revenue. The fully digitalized solar roof tiles quotation tool (configurator) is an important part of the website where, within a few steps, users — including Autarq’s end clients — can get a price offer with details of their future solar roofing system. Attracting paying customers and business partners via web and mobile is that much easier with a fully responsive website and automated quotations.
Some of the deciding factors in choosing Merixstudio were our ability to deploy a mature team at short notice, top programming practices, and experience in the sustainability domain.
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 frontend 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.
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 installation process for the solar roof setup has been designed to be both safe and as straightforward as 1-2-3. The website we provided for our client is equally user-friendly, featuring an intuitive configurator that allows users to obtain a price estimate for their future solar rooftop in just a few simple steps. Moreover, it has delivered tangible business results for our client, including:
This fruitful collaboration within the project has resulted in a high average NPS score (9/10) from all stakeholders. We eagerly anticipate further enriching Autarq's website in alignment with the client's business goals!
Merixstudio coded the front-end of the configurator. In just a few steps, it allows users to discover whether Autarq solar roof tiles fit their project and how much of users’ electricity needs can be covered with Autarq solutions. Additionally, they get an approximate solar roof price. This functionality is a 100% digitalized tool, indispensable for users interested in solar roof tiles.
We used Node.js to create a headless Content Management System. It is easy-to-use, scalable, and has a low entry threshold for non-developers which means it’s perfect for future website scaleup and modifications. Thanks to this enablement, users get the content they need. Website admins can manage and change the content assets easily based on predefined components, such as titles, paragraphs, images, separators, etc.
Within the Autarq website, we implemented specific accessibility requirements in line with the modern equitable web design, including screen reader software enablements as well as specific text legibility and keyboard accessibility. We also ensured the highest possible Lighthouse-based accessibility score (100 out of 100) at the production stage for both mobile and desktop versions. The infrastructure is deployed via the Hetzner Online AG hoster, powered by 100% green electricity.
.svg)
