Responses by Gert Franke, creative director and cofounder; and Jonas Groot Kormelink, developer, CLEVER°FRANKE.
Background: “We often invest our time in learning new tools and developments in the field of data, design and technology when there are moments of downtime within a client project,” says Franke. “Eventually, we wanted to collect all our self-initiated projects on a single platform to show people how we challenge ourselves, learn and grow in a data-driven world, and inspire them to discover new opportunities for experimenting with data.
“The CLEVER°FRANKE Experiments page is hugely valuable to our clientele as well. As we expand our portfolio, our clients have more reference points to envision what kind of result they can expect us to deliver. And it helps us prove ourselves in completely new fields and attract new clients.”
Design core: “At first glance, the page looks like a compilation of different experiments we worked on over the last years. But the page itself is also a data visualization experiment, which was the defining feature while developing it.
“We wanted to use building blocks to visualize the experiments on the home page because all the projects are built on six pillars: code size, file size, total views, code commits, time spent and code length. It is possible to sort the homepage based on these pillars.
“Each building block is covered with a unique texture related to the specific experiment. The textures are the screenshots that were taken during the process of each experiment: they do not represent the final outcome of the project. This way, we emphasize the nature of experimenting; it’s more about the process than getting the final results.”
Challenges: “The hard part was to mix and mash up different visualization methods and techniques into one site—and of course, the actual realization of the concept into a working product,” says Kormelink. “The experiments are very different from each other, so it was challenging to find a template that’s flexible enough to display them harmoniously.
“While coding, I aimed to enhance the concept by adding features that only code can supply—such as transitions, interaction and synergy between design and code—making the overall experience more coherent.”
New skills: “Experimenting is a great opportunity to see what we need to improve so we work better as a team,” says Franke. “With each experiment, we become faster at finding solutions and more confident in taking unexplored paths. So far, we’ve delved into sensors and AI through our experiments and harnessed these technologies around several topics such as sports, lifestyle, smart living and climate.”
“From a technical point of view, we learned a lot about using different code libraries—for example, D3js and three.js—and integrating these in React.” says Kormelink. “We gained substantial experience in finding solutions to translate these technical learnings into a coherent and visually engaging platform.”
Navigation structure: “Experimenting with data is a playful experience for us, so we wanted to evoke the same feeling for users as well,” says Franke. “While the visualization of each experiment as building blocks gives a three-dimensional look and feel, it also increases the interactivity of the website with more possibilities to move around. When users click on a specific experiment, they zoom into the texture of the block before going to the detail page. We chose to do this in order to heighten the immersive effect of the navigation structure.”