Veolia

Web apps and portals
UX/UI
Analytic services

During our collaboration with Veolia CR since 2016, we have jointly improved the user experience for more than 2.5 million customers through both the web portal and mobile app. Before the next implementation phase, we focused on a thorough Customer Experience (CX) analysis. Based on its findings, we redesigned the solution with a fresh new look, personalized information for every user, and created a comprehensive design system that makes work on the client's other projects faster and more cost-effective.

Personalized services

for every customer

Design System across portals

which makes developers' work more cost-effective.

Customer-Centric Approach

How to achieve a great customer experience? Through analysis!

A functional, fully responsive website is a standard nowadays, but we wanted to go even further. Customer needs are increasing, and with them, the sensitivity to the website's user interface. That is why, right at the start, we joined forces with the client and dived into a thorough Customer Experience (CX) analysis.

"We wanted to better understand our customers' needs and clarify the direction of development and our priorities," explained Petr Maximilián, Head of Customer Services Department at Veolia.

Web-only operation & personalization

The completed analysis pointed in a clear direction – unifying all services solely into a web portal that is intuitive and convenient for everyone. Plain and simple: to improve the user experience. It was precisely this enhancement of the web portal that made it possible to decommission the existing mobile app.

"However, we could only make such a change if the web portal was capable of replacing the mobile app both functionally and comfortably," comments Ondřej Zapletal, Web Analyst at Etnetera Core.

The priority in the new solution was to instantly show customers the information they typically need. This covers all communication between the customer and their supplier, complete account management, consumption and payment settings, as well as information on current or planned water outages—all personalized for each customer so they don't have to search for anything.

Clear goals:

  • Perfect responsiveness
  • Personalized user experience
  • Design in line with current trends
  • Creation of a custom Design System
  • Dark mode
Technologies
Redux
Material UI
React
MongoDB
Gradle
Spring Boot
Spring Framework
Rest API
NX Monorepo
TypeScript

Custom Design System across portals

And what sets every solution apart from the rest and enhances the customer experience? The design of the entire portal, of course. The solution must not only look good to the customer, but it must also be clear and intuitive. That is why we created a new design system based on Material UI and anchored it for use across the client's other projects as well.

"Using the Material UI library was an obvious choice for us, thanks to its compatibility with already existing functionalities. It is a very robust and heavily tested UI platform, which allowed us to build our own solution with significantly lower upfront costs compared to a custom UI library," says Michal Hlaváč, React Developer at Etnetera Core.

The design system we prepared serves as the foundation for a larger ecosystem, which we can call the Design System for all Veolia portals. Step by step, we have created a sophisticated library that we utilize across the client's portals, unifying all elements and, above all, making the work of front-end developers more efficient and cost-effective in the long run.

Redesigned website & preparation for further improvements

The result of our work is a fully responsive website with a modern design, built on Veolia's own custom design system. The entire transformation led not only to an improved user experience but also to easier development and maintenance of the solution itself for years to come.

This is also supported by the up-to-date documentation, which meets the needs of both the client and the development team. A key part of this newly created documentation is a flexible design system in Figma, allowing us to build functional prototypes for the client's individual solutions.

"This project showed how important it is to have a reliable team that can adapt and collaborate to achieve a common goal," concludes Ondřej Franěk, Project Manager at Etnetera Core.

What we achieved:

  • Streamlined information for users
  • Design system ready for the future development of portals
  • Improved user experience based on UX analysis
  • Identification of further development opportunities

The delivered solution is modern, clean, and relevant for years to come. Overall, it has been received very positively by our customers.

Kateřina Brchelová
Project Lead at Veolia