Barcelona Activa

Barcelona Activa, the city council's local development agency, reached out to Soluble in late 2022 with the idea of creating a digital profile of professionals in the city and its metropolitan area. They found us through the Employment Map we had worked on with Fundación Telefónica, and they wanted our help to create something "singular".

The challenge? More than one.

• 1.8 million data points. LinkedIn partnered on the project by providing information about Barcelona's talent across all dimensions.
• Making data visualization simple and accessible. To do this we had to assimilate and digest nearly 2 million records, understand the project's functional needs, and create an informative and interactive digital tool.
• Without compromising on visual impact. The graphical representation of data had to be "singular".
• Anything else? After approval from all stakeholders involved in the project, we had 1 month ahead to implement this technical challenge.

Our Product Design and Technology teams joined forces to tackle all of them and bring the Talent Map.

DECISIONS FROM CONCEPT

As always, we started by analyzing the context. We conducted an immersion to understand what the data was telling us and, in that way, find the best way to represent it graphically. Barcelona Activa presented us with a narrative that should guide navigation, the talent lifecycle: generation, development, attraction, and retention. To achieve consistency and coherence that would tie all our work together with the platform, we needed something more. We were missing the creative concept born from strategy that guides all our decisions in every project. So we looked for one.

***fila***

***columna***

***columna***

***fila***

We found inspiration in the city at the heart of this, where a large part of the Design team lives, and specifically in its public transport network. We imagined ourselves moving through the city by metro and finding along our journey elements in constant evolution and progress, like the Sagrada Familia. From there, we decided on the color palette for the different sections, inspired by those of the metro line itself, and the rounded shapes, with a stepped arrangement to keep moving forward, that remind us of Gaudí's work.

***fila***

***columna***

***columna***

***fila***

***fila***

***columna***

***columna***

***fila***

AMBITION AND AGILITY, THE BALANCE

Choosing graphics to visualize this complex data was key to the project's success. In this search we had to account for two constraints: we were working with live graphics that would be constantly updated, and time was running short. Thanks to the choice of a graphics library, D3, as powerful as it is complex, we were able to propose an ambitious site with agile construction and optimized resources. The joint work of Design and Tech was necessary to ensure the technical viability of design choices and vice versa. It was pointless to choose unique graphics if they weren't viable to implement afterward.

After hours of researching, testing, and adapting designs to the creative concept, we landed on a universe of graphics that, through applying the concept and strategic decisions we'd made, delivered unique results. Singularity: check.

To the data visualization we added interactions and microinteractions that allow users to consult information simply and customize it according to their interests. All of them, like transitioning from one section to another, reflect the advancement of talent's own life cycle. Plus, the color palette that breathes Barcelona is also visible in the hover, which adapts to the primary color of each section, even though at the programming level it's a single button.

***fila***

***columna***

***columna***

***fila***

***fila***

***columna***

***columna***

***fila***

A TRIGONOMETRY EXAM FOR TECH

Beyond these details that add polish to the platform, the Tech intervention was decisive from minute one, as it participated with Barcelona Activa's Data team in defining the structure of the data (those 1.8 million records) extracted from LinkedIn. They automated data extraction and analysis using the R programming language. On our end, we automated data retrieval and reading to render the graphics so that if there are changes or updates to the records, the graphics adapt automatically as well. This way, Barcelona Activa has total autonomy to update information without depending on our intervention.

***fila***

***columna***

***columna***

***fila***

Working with the D3 library was also a technical challenge to understand and manage its complexity. We had to figure out how to technically draw the 8 graphics, and to do that, we mobilized all our resources, from dusting off our trigonometry notes to leaning on ChatGPT.

THE RESULTS

This is definitely one of those projects that not only excites us, but also makes us grow and get better at what we do. You can't ask for more.

And let's talk results. Have we overcome the challenges this Talent Map posed? We're not the ones saying it—Sara Díaz Roig, director of Digital Talent Development at Barcelona Activa, confirms it: "Thanks to the Soluble team, we've achieved our goal: showing Barcelona's talent behavior through a singular tool that is friendly and straightforward for users." Now we just need to hear your take, so please, let us guide you through our map.