Finland's best service experience and energy efficiency

Someone hit the door in the parking lot. A stone cracks your windshield on the highway. Your car needs repairs.

On average, people have car accidents every 7 years – not often enough to immediately know what to do or who to contact. If help isn’t asked from parents or neighbor Pete, people often turn to Google. That’s why car damage and repair services must be readily accessible through digital channels, and help must be available quickly.

Autoklinikka is Finland’s leading car repair chain. Autoklinikka expertly handles body and glass repairs for all car brands, and in Helsinki, the company also offers car maintenance services.

In 2023, Autoklinikka faced a significant question: how to become the consumer’s first choice in the event of damage? This is the challenge we set out to solve together.

Sustainability plays a huge role for Autoklinikka

Responsibility, and especially environmental responsibility, is a key value for Autoklinikka. Consumers are increasingly aware of the environmental impact of services and expect concrete sustainable actions from service providers.

“Consumers are increasingly interested in ensuring that the services they purchase are produced with environmental considerations in mind. The majority of our customers come to us through insurance companies, and environmental issues are also important to them. It is crucial for us to meet the expectations of our stakeholders and operate responsibly in every way,” summarizes Heli Avikainen.

Since sustainability and environmental responsibility are essential for Autoklinikka, Hion’s strong commitment to digital sustainability stood out already during the bidding process. Other factors that supported the selection included Hion’s international experience, references, solution proposal presentation, and project cost.

Starting with goals and data

Our starting point for the Autoklinikka website renewal was clear: to create a digital customer experience that is as seamless and enjoyable as Autoklinikka’s service at its physical locations.

We knew that the competition in the industry is tough, and those who provide the best customer service are the ones that succeed. We dove deep into Autoklinikka’s business goals and analyzed the data from the old website to better understand their needs. The Nordic collaboration with the group provided a broad perspective and helped identify both similarities and differences in the website service needs across different countries.

We understood that a car accident is often a stressful and rare situation. Therefore, the digital service needed to be exceptionally clear and user-friendly, so that the customer could easily find the information and services they needed.

Autoklinikka’s strategic core – the presentation of services, differentiation from competitors, and straightforward customer service – had to be strongly reflected on the website as well. In addition, the goal was to do all this as ecologically as possible.

Service design plays a key role in success

User-centricity was the cornerstone of our design. We defined four motivation-based target groups, which were based on Autoklinikka’s marketing-defined target groups and expert views on typical customers.

By combining user needs, the website’s objectives, and insights from analytics, we defined the key themes and messages around which we built a new, clear, and logical content hierarchy, user journeys, and navigation structure. As part of the design, we also defined the service’s tone of voice to ensure a consistent service and brand experience at the Nordic level.

Simplifying the customer’s journey through purchasing paths

The core of the redesign was to create seamless purchase journeys to make Autoklinikka the primary choice in the event of an accident. We focused particularly on the functionality and usability of the navigation, ensuring that customers could easily find the information and services they needed, even in stressful situations.  A mobile-first approach ensured that the website works seamlessly on all devices and serves the customer in the best possible way in a real damage situation.

One functionality that simplifies the customer’s life is that Autoklinikka.fi also serves collision damage customers with a digital 24-hour service. Through this service, customers can send photos or videos of their car’s damage. Based on the images, Autoklinikka’s image team assesses the extent of the damage and provides the customer with a work and cost estimate. This service saves the customer time and effort by eliminating the need to drive to the repair shop in person.

Design based on the Hion Green, Sustainable Web (GSW) UI library

The UI design phase was based on the GSW UI Kit, a user interface library developed by Hion, designed for energy-efficient, browser-based digital services, primarily websites.

The GSW UI Kit is tailored for designing HTML5-based websites and services in Figma. By default, it includes all native browser UI components and expands into larger functional modules using them.

Energy efficiency at the core of design

The library’s design identifies the most energy-efficient way to implement a website’s front end: web standards (semantic HTML and modern CSS). It intentionally avoids trendy, non-standard solutions that have become increasingly popular but may consume more resources than the entire front-end code of a website. The web standard includes accessibility, which in itself is a strong foundation for energy efficiency, especially when UI elements are combined with carefully designed user journeys.

The library is part of the GSW Framework designed by Hion, which is primarily a mindset but also includes ready-made components to streamline design and development. One of these components is the UI Kit.

Seamless connection to development

The library is connected to development through design tokens. The library is linked to the development repository, from which developers get the UI’s color, spacing, etc. values directly as CSS variables. This reduces the use of unnecessary Figma resources and significantly reduces inefficient “design to dev handoff” meetings. The use of “redlining” (error checking) by the designer also decreases, as the correct values are already automatically available to the developer.

The standard HTML elements that served as the basis for the design also function as the foundation for WordPress’s native blocks. This helped avoid the unnecessary development of custom elements, ensuring that the process doesn’t reinvent the wheel at any stage. Instead, reusability is built into the entire system.

The tailored solution based on the library enables a clear, simple, accessible, lightweight, and user-friendly outcome that can be efficiently developed further to improve it even more in the future.

The result is a fresh and customer-friendly solution

The usability and visual appearance of the service improved with the redesign and have received positive feedback, especially from Autoklinikka’s internal stakeholders.

The redesign of the customer service forms has already improved the booking rate. Although the site has only been in use for a short time at the time of writing this reference text, we have already seen positive results: the number of bookings made through the forms has increased by 8% compared to last year.

We believe that this is just the beginning and that the new website will support Autoklinikka’s growth and success in the future. We look forward with interest to the end-user feedback and user testing results of the recently launched website.

The redesign is evident in the lightness and speed

With the new website, we have successfully reduced the homepage weight by 92% and the median page weight by 40%. This translates to a reduction of approximately 180.9 kg CO₂e in emissions annually for Autoklinikka’s website compared to the previous version.

With the new website, we can state that we have significantly improved the site’s usability and ecological sustainability. Our customer can state with a clear conscience that they are working with an environmentally responsible digital partner.

The homepage is the most visited page, so the positive changes are most noticeable in the user experience. In particular, the data transfer for the first page load has been significantly reduced.

Before the website redesign, the average homepage of Autoklinikka, including all plugins, had a load of 6.4 MB, producing 0.215 g of CO₂e emissions (calculated using CO2.js).

For the new website, the homepage with all plugins is 0.7 MB (0.024 g CO₂e emissions).

What’s next?

Website development continues based on analytics and user research. The service is actively being improved, and the site is being developed in an even more energy-efficient direction. Through Autoklinikka’s service, we want to emphasize that energy-efficient services are never finished at once, but development work is a process, and there is always room for improvement

We continue our uncompromising value-based development work, which aims to make the digital world more sustainable one web service at a time. It is great to do this work with customers who share the same vision.