Intro

Constraints within design agency projects are many. Some of the most practical ones include budget and time constraints. Others, just as equally important and influential are constraints to design and technology. This can manifest quite literally, for example being restricted to using certain fonts, or certain software. Others can be more encompassing: such as the needs of the users one is designing for, or the devices the users use to access the product.

For some team members, constraints raise the hairs on the back of their necks. This is especially true for fixed constraints, which cannot be addressed or resolved, and the team needs to work around them. These fixed constraints have a certain reputation: they are not fun to work with, and stifle freedom and creativity. At CLEVER°FRANKE we strive to reframe these as a jumping pad into innovation, giving us the opportunity to think outside of the box in solving a specific problem. We believe that innovation happens in the space between the constraint and the finished product.

Find the variable that you can play with

In this often scary space, our team reframes the focus away from the constraint and to a different variable in the project that can be adjusted and explored. By identifying this variable, we can start progressing toward the desired solution. What the team is then really doing is pivoting and looking around for another open door. We still get to the desired place, but perhaps through a different door than we originally imagined.

One example could be playing with the data set as a variable, which is what our team did with the Eurovision 2021 logo design. Another variable that can be adjusted to allow the team to get to a solution is tooling. For our platform for Globalance Bank, we re-engineered a tool to be used in a unique way, whereas for our microsite for the Africa Climate Mobility Initiative we combined multiple tools to get to the desired solution. Each constraint led us to a chance to innovate: find a different way to the desired solution.

Adjusting the dataset

Sometimes the only variable that can be adjusted is one that is the foundation of visualization: the data set. By being flexible and open to seeing data play a different role in the project than usual, the desired solution can still be reached.

When designing the 2020 Eurovision logo, we were presented with unfortunate news: the contest was canceled due to the Coronavirus. Fortunately, a couple of months later, the European Broadcasting Union asked us to create a logo for the 2021 song contest. Our constraint was to create a logo in the same visual style as the 2020 edition but with an updated symbol. All of a sudden, our team was faced with a challenging task. The visual for the 2020 identity was so deeply grounded in the concept of the history of the Eurovision contest and the unique design arose as a result of the historical data we used to construct it.

Knowing that the visual concept couldn’t change, the design team tried to identify what could be adjusted: the data set. Experimentation then started by using software that could show us how different data sets could look within the already determined visual. This approach of working was quite innovative for our team: we were using data not as a building block for a visual, but rather as a paintbrush that was filling in an already existing visual. Being flexible with our working progress, and accepting that we needed to spend more time exploring the dataset (rather than the visual) we were able to achieve our goal.

Image 2. Logo edition 2021. Dataset: location data. It visually connects Rotterdam with all participating countries’ capitals.

Using a tool in an unusual way

Using tooling in a different way can sometimes allow you to see the possibilities you have in solving the problem or addressing the constraint in an innovative way. By remaining critical of the tool’s underlying strengths and possibilities you can leverage it in a different way than its typical applications or use cases.

Globalance World project

During the Globalance World project, our development team ran into a constraint on loading time for the application. We wanted to make sure that the pebbles in the pebble data visualization did not overlap. This required doing complex calculations, and the normal way of doing this in Javascript, made us run into slow loading times. Our team set out on a mission to find the right solution to work with this constraint.

And a solution was found: using a web worker for layout calculations. Our team thought that the offloading of tasks to a separate thread, which is at the core of a web worker, could help us with the problem we were facing. By being innovative with how we normally create React components and adding a web worker tool into the equation, we could cache and return the final layout to the component much faster. What’s innovative about this solution is that a web worker knows nothing about what the page looks like, so doing layout calculations there would not have seemed like the most logical thing to do. In this way, we were able to pioneer in rendering a complex data visualization quickly, even though many calculations were running in the background.

Image 3. Data visualization: pebble.

Ookla MWC 2022 booth

The project we created for Ookla and their booth during the MWC 2022 serves as a second example during which our team used a tool in an unusual way. For this project, we had to find a way to efficiently generate 90 minutes of unique data-driven content across 45 different locations. We wanted to use a tool that would not only allow us to build these visualizations in a scalable way but also a tool that could potentially grow towards a ‘live visualization’.

Unity was the answer as it allowed our team to do both. The flexibility of Unity, which is traditionally used as a game engine, allowed our team to extend the system towards Extended Reality (XR) applications. We envisioned a mobile companion Augmented Reality (AR) app so that users can enjoy the visualizations outside of the MWC and in their own environment and reality. Additionally, using new technologies like Virtual Reality (VR) we explored how Ookla’s connectivity data could make up a more interactive and immersive experience. By being creative with our tool usage, we were able to not only deliver visualizations for the conference but also experiment with what the new digital world would look like.

Image 4. Using AR to iterate on the Ookla project.

Introduce another tool

Sometimes the tool that you have in front of your hands doesn’t need to be reimagined or applied in a different way, but rather ‘supplemented.’ Introducing a secondary tool can allow you to extend the power and abilities of your current tool. Using two (or three, or four) tools together, each applied to solve a part of the problem can lead to an innovative solution.

For example, during our most recent project with the Africa Climate Mobility Initiative, we were confronted with creating custom data visualizations within a very tight schedule. Our aim was to visualize location-based data, but create the maps with a tangible three dimensional look and feel, turning them into memorable ‘art pieces’ that exhibited the data. Our team started exploring if Mapbox could contribute to bringing the visualizations to life, as Mapbox was already one of the tools being used for another portion of the site. Mapbox could provide us with the final solution, but would take a lot of time and be really demanding on the site performance.

An interesting solution was found when the team used a combination of tools to create a scalable workflow AND a rich experience with the maps. The workflow started with a custom-developed Python application, to fetch and process elevation data for specific areas. We then brought that data into Blender to create a realistic 3D render using lights, shadows, and shading. To make sure we could overlap the data and the 3D image perfectly, we used QGIS to generate the data visualizations. This resulted in a single image, that we then placed on the Mapbox map. Afterward, we added a reveal effect using a custom shader, and used the Mapbox fly functionality to tie all elements together as the user scrolls down. By focusing on the potential of each tool, and changing tools when needed, our team was able to build an innovative and high-quality solution with a strong set of constraints. All of this was done without demanding too much on the site performance! The result is a memorable and captivating experience required to create impact.

Image 5. 3D maps for the Africa Climate Mobility project.

Summary

No matter the type of constraint, or the way used to address it, innovation is at the end of the day about having an open and curious mind. Whether changing a data set, using tools in unusual ways or combining multiple tools, constraints create problems, and solving those requires exploration and experimentation. It’s why we at CLEVER°FRANKE believe that constraints can help launch us into an exploration that we otherwise might not do if the constraint wasn’t there in the first place. So next time you face a constraint, rejoice! It symbolizes the start of innovation.