Ecolab

Digital Runway: a Developer Experience for the water giant
Project
Ecolab - Digital Runway (IDP / DevX)
Technologies
azure icon backstage icon github icon

The client

Ecolab Inc. is an American company based in Saint Paul, Minnesota, USA. It develops and offers services, technologies and systems specializing in the treatment, purification, cleaning and sanitation of water in a wide variety of applications. It helps organizations in both private and public markets treat their water to make it potable and suitable for use in the healthcare, horeca-related safety, and manufacturing industries. It employs 47,000 people, has revenues of nearly $15 billion, and will celebrate 100 years in 2023 since its founding.

The objective

Realizing an impactful Developer Experience through an Internal Developer Platform that could enable company-wide project management by having status dashboards and integrating GitHub.

The challenge

Ecolab’s IT division needed to implement a new internal platform that would allow team projects to be managed company-wide in a more organic and shared way. The most crucial request, however, was not purely technical, but related to the overall User Experience: the Digital Runway is meant to be an environment that makes people want to use it, comfortable, easy and pleasant to interact with.

The solution

The first question we wanted to answer was: what elements identify a great DevX? Above all, what elements identify a great DevX for the specific Customer? Developer Experience, in fact, is not about choosing a tool and dressing it nicely; it is about creating habits and engagement, aspects that are complex because they are connected to the established corporate culture. It was necessary to identify the most interesting triggers for a target dev, such as skill improvements, the sense of challenge, innovation and curiosity, without forgetting the passion for customizing commands and workspaces. And without forgetting, on the other hand, the need of business to reduce the distracting elements that may intervene at the time of the initial search for various platforms, accesses, tools and technologies.

Flow diagram showing the design process

We, therefore, started the project with an intensive co-design phase, which was essential to better identify the concrete needs behind the initial request. Client interviews, as well as in-depth tech assessments, supported us with a number of crucial aspects in an ongoing incremental prototyping process:
  • Identification of project management flow and its major friction points
  • Need for flexible management of different project statuses
  • Need for integration of current tools (Github)
  • Visual identification of essential information at a glance
  • Importance of creating a sense of community that embraces events and tech hackathons
  • A simple and clear information architecture for different types of platform roles and users
  • The importance of research within the environment
  • The centrality of documentation
  • The existence of a perceived problem of Information Overload

Diagram showing the digital runway Azure active directory integration

The result was the creation of a prototype that:
  • enhanced the initial discovery phase by the developer
  • made the working processes clear and unambiguous
  • made documentation orderly and transparent by helping design handover and shared knowledge of teams,
  • was an important asset for assigning the correct project tech skills
  • collected all project information in a unique shared place from the beginning to the end of the project
  • provided devs with easy, shared, and fast templates for creating applications in a development environment

Diagram showing the github workflows for the solution and the infrastructure repositories

This was the starting point of building Digital Runway, the Internal Developer Platform based on Backstage. The key technical features included:

  • Starting a project initiative at the hands of a project owner and integrating with GitHub repositories, projects, and teams
  • The actual creation of the project, with lifecycle tracking from approval onwards and assignment of the dedicated development team (through predefined upstream skill attributes managed on Backstage) with the upload of all necessary documentation (of application, APIs and architecture)
  • A techradar that can help the team identify the best technology stack to tackle the project at hand

For the realization of the product, the development team worked closely with the customer to understand the specific needs and performed heavy custom developments to realize the required functionality.

Backstage best practices were used to implement them, following the platform guidelines. In addition, to ensure the scalability and robustness of the system, extensive automated tests were added to ensure that the customizations worked properly and did not cause compatibility issues with other parts of the software.

Among the noteworthy implementations, the team employed Backstage’s permissions framework to create a custom access system that allows users of the platform to define specific roles and permissions. Other customizations made by the team include a set of custom plugins for integrating Backstage entities with GitHub. These plugins allowed the client to create and manage a project’s repositories, issues, and teams on GitHub and to automate some build and deployment tasks directly from Backstage.

In conclusion, the work done resulted in a tailored solution that met the client’s requirements. Thanks to the use of Backstage as a base and the customizations made following the framework’s best practices, the client obtained a robust, scalable, and easily manageable platform.

Technologies:

Backstage, GitHub, GitHub Actions, Azure Active Directory, React, Express.js, Cypress

Get in touch

Follow us on social media
Listen to Continuous Delivery