a responsive web platform and roof configurator for homeowners, roofers and architects
100%digitalized process of getting a quote for solar roof tiles
100/100Lighthouse accessibility score on desktop & mobile
problems to solve
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.
Digitalization of industry and our complex environment is key to a mass market approach (...). [It] is a central element of our future evolution. We want to start by providing the users with a great user experience, starting from the configurator that they can use on our website, where they can basically configure their system and get an idea of what it would look like and, potentially, cost, if they were to deploy a building-integrated PV solution.
Kai Buntrock (CEO at Autarq GmbH)
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 scope of the work included:
- Creating a website to present the company’s BIPV offer
- Implementing user-centered features, incl. a fully digitalized solar roof quotation option and modern accessibility enablements
- Collaborating with multiple stakeholders to execute the website in tight deadlines
- Web development, including fully Responsive Web Design (RWD)
- Conducting DevOps and back-end works and coding the app’s front-end
- Technological consultancy, Scrum process management, and tech leadership across two development teams working on separate deliverables
- Conducting manual and accessibility tests, E2E tests, and testing on real devices and simulators
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.
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:
- A more than 30% increase in sales.
- A 50% reduction in the length of the sales cycle.
- A 30% decrease in total lead time.
- A tenfold increase in the win rate/conversion rate.
- Enhanced customer and employee experiences.
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.
sustainability and green impact enablements
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.
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.