Rebuilding and expanding Metrio

Metrio is a web application made to allow large organizations and cities to measure, analyze and communicate their sustainable development performance.

It allows users to gather data from several sources and obtain the most information in relation to their objectives. Not only can they analyze several aspects of their environmental performance, they can also outline what needs improvement to adjust their operations accordingly.

What did organizations use before Metrio? Lots and lots of Excel spreadsheets. Manual aggregation from several data sources. Disjoint databases and manual, error-prone analysis.

Metrio simplifies this work by providing a central tool in which all data pertaining to relevant performance indicators can be input and stored. Each indicator is tailored specifically for the needs of the client.

Initial Discussion

When we were brought into the project, in 2012, Metrio was being used by around 15 clients. Setting up a Metrio account for a new client was a fastidious manual task. Basically, one had to make a copy of the whole application from an existing setup, and then modify this copy to suit the new client's requirements. This process not only made the setup extremely boring, it also meant the most basic of maintenance on Metrio had to be performed separately on every account.

Emerging Needs

This meant it was impossible to simultaneously release a new feature to all clients. It was necessary to either copy the code over to every account, or accept that only one client would benefit from a certain update.

Instances of Metrio were growing more and more distinct from each other as updates progressed, and the situation was bound to turn into a maintenance nightmare.

Indicators presented in Metrio

Every account's indicators are categorized on its front page, from which they can be viewed.

The rebuild

This is why the Metrio team called on us to build a robust, flexible and modern solution, that would address their current clients' needs better, as well as support a speedy evolution in the years to come.

To get better acquainted with the current situation, we set on to create two new Metrio accounts using the current platform. It proved a revelatory experience, and allowed us to outline the aforementioned shortcomings. Knowing this, we helped our client set the necessary goals for the next version of Metrio.

The list was pretty clear:

We first reduced Metrio to its base concepts, identifying everything that should be common to all client accounts. We used this to derive a group of development milestones. The goals were clearly different from Metrio's first version, and we tailored the project's tech and architecture accordingly.

One application to rule them all

All Metrio accounts are now part of a single application, but remain isolated from each other. This means all clients can regularly receive new features. There is only one application through which maintenance and upgrades have to happen. This approach also brought uniformity to the accounts's layout and appearance.


Since the nature of the service required writing client-specific code to answer custom needs, we decided to use the very flexible Ruby language, combined with a schema-less database. This combination has certain known limitations, but allows us to efficiently meet a very important objective of the rewrite.

On the technical side of things

When some of a client's indicators are not handled by the base application, we have the possibility of writing a Rails::Engine. The custom code and its tests are thus isolated in their own folder, avoiding any conflict with the rest of the application.

Flash -> SVG

Why build a future-proof app with tools from the past? We changed the charting tool to Highcharts, which allows for a great variety of visualizations and a high level of customization.

Metrio charting tool exemple

Highcharts is a more flexible charting tool, and allows a wider variety of visualizations

Account configuration

In Metrio 1, each indicator had to be programmed by hand. In this new version, each account is configured through a YAML file. This allowed us to establish a simple, rigorous syntax, which in turn makes account configuration available to the less tech-savvy. This also opens the door to building a web interface entirely dedicated to the creation and customization of accounts!

On the technical side of things

To make it simpler to set up an account, we built a tiny language using Treetop which can identify mathematical expressions and evaluate them within Metrio.

The Results

A year in, the new version has had sizeable effects. The number of accounts did not only grow: it tripled. Clients have become much more diversified too, thanks to the newfound flexibility of the application. Creating and configuring accounts is now a much easier, much more efficient process – according to our experience, a 300% gain!

More than everything, by making use of a deeper understanding of its clientele, Metrio's second version rests on a much stronger foundation than its predecessor. Thanks to its new structure, new features are regularly developed, and several more upgrades are planned for the coming months.

Hookt's ability to combine creativity in design and efficiency in execution really sets them apart. This combination of skills allowed them to brillantly succeed with every projects we entrusted them over the years. They are the ones we trust when looking for people to solve our biggest web challenges.

(Translated from French)

Pierre-Alexandre Hurtubise Associate, Metrio