Contact us

contact@merixstudio.com View @ address

Autarq

# sustainability

a responsive web platform and roof configurator for homeowners, roofers and architects

backend
Strapi in Node.js (headless CMS)
PostgreSQL
Helm
Git
frontend
React
Next.js
Sentry
Apollo GraphQL client
Fully Responsive Web Design
qa
Manual Testing
Accessibility testing (Lighthouse)
Testing on real and mobile tablet devices (iOS and Android)
Testing on simulators (BrowserStack, Xcode)
E2E tests in Cypress for roof configurator app
tools
GitLab
Prometheus
Slack
Jira
Mural
Figma
POEditor
Grafana
CI/CD
Kubernetes
Hetzner's Load Balancer
Infrastructure as a Code (Ansible)
Loki-stack
Google Workspace
Confluence

100%

digitalized process of getting a quote for solar roof tiles

100/100

Lighthouse accessibility score on desktop & mobile

3

time-saving integrations

~ 20%

decrease in JavaScript code weight

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

solutions

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!

view examples

key features

  • roof configurator

    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.

  • CMS Strapi

    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.

other works

Boston Solar flag of Boston Solar country

Boston Solar

A web-based solar modeling and proposal tool
react ui ux next.js python redux django rest framework celery gitlab
sustainability
Selfmade Energy flag of Selfmade Energy country

Selfmade Energy

Europe's first solar price comparison portal
python product design django
sustainability
Learn about the challenges in the solar energy industry and how digital tools can help to face them
X
Solar energy innovation & digitalization
Kai Buntrock, Managing Director of Autarq GmbH and Michał Lisewski, (Merixstudio) discuss the challenges growing demand for PV solutions brings and the how digital tools can help to face them. WATCH EXPERT DISCUSSION
X

We use cookies on this site to improve performance. By browsering this site you are agreeing to this. For more information see our Privacy policy I understand