CLAASP
Cryptanalysis as simple as possible. CLAASP is a web application that helps cryptanalysts and researchers to analyze encryption algorithms. They are able to create ciphers from industry standards and execute analysis to obtain statistical results. With CLAASP, users gain also computer capabilities, as all the processing is in the cloud and on demand. Also, de community provides the opportunity for members to share easily their files, publish them, and interact with other specialists.
Some history: Symmetric
About two years ago, while leading my consultancy company in Chile, I had my first interaction with symmetric algorithms of encryption. This customer came to me with the ambitious idea of creating a platform to visually build cipher algorithms. This solution aimed to provide users with a visual interface composed by a canvas. Users would create the algorithm using blocks and linking them. By doing this, users could replace lines of code in an editor, the common tool to perform these tasks. This tool was called Symmetric.
By the time my company arrived to the project, they already were working with a bunch of full-stack developers. They had a decent functional Front-end, but it was unwired to the logics required backstage to actually complete users' goals.
Difficult decisions
I hired two designers: one of them was a senior researcher focused on Information Architecture. The second one, a junior designer focused on visual design. They began to work almost at the same time, as the customer already had some Figma designs created mainly by developers, so we had to 'clean' the designs, add some accessibility constrains to the mockups and improve the information architecture of the screens, forms, and tools.
Not long after, I could tell they were having communication difficulties. It seemed the Product Owner (from the customer side) was very aware of how these algorithms work but could not understand their user persona's pains.
I realised we had to give a couple of steps back, so we rearrange the small designers' team to perform a good research, not about cryptanalysis, but about their users.
I leaded 3 of 5 users' interviews. But we didn't perform all of them. We could understand the main problem without needing further time or resources planned.
Users didn't want a solution outside of their IDE. They were comfortable with their editors. They needed a way to speed up their coding process, so a visual interface was not the answer they were looking for.
These are the moments when you should take a pragmatic approach. I organised a meeting with the leads from the customer side and delivered the information with the insights we found. The right decision was clear: we stopped the visual part of the project (removing ourselves from the project) and suggested them to create a code library which was the correct solution for their users' pains. It might sound counterintuitive, as my company was losing a project, but it wasn't.
Two years later, with their library fully developed and shipped, they hired us again to build a visual tool wrapping the library and CLAASP was born.
Project Overview
CLAASP allows beginners and pros alike to design and analyze symmetric cipher algorithms.
CLAASP as a Product
I began by understanding the library and the solution they've built, while comparing them with other competitors. CLAASP does not have a direct competitor, but the closest one was Ciphereditor.
This online editor helped me understand two main things:
- Beginner cryptographers didn't have a friendly solution in the market, able accompany them visually on analyzing ciphers. CLAASP value proposition had to be precisely helping analize these ciphers they already were creating.
- Our customer needed a lot of help to be able to create something delightful, useful, and totally new. Most of cryptographers understand their industry but have no idea about digital products.
Foundations
Colours
Our customer did not have any style guide for this project. They provided their fonts, but we had to create all visual communications. We also knew accessibility plays an important role in business (besides moral repercutions), so my first step was to study company's branding colors (as they are a huge company but this product is new) to try to find consistent but accessible colors.
In the image below, we used branding colours but fixed them to a digital product. Also, we created a couple of gradients. CLAASP logo already include a gradient, so we understood it was already consistent with their design.
From the previous study, we created tonals for the main colors. This is something important, at its define de 'universe' of colours in a particular application. We used Material Design 3 schematic groups as developers were already working with Flutter. When colours and tones are tokenized, we are able to keep consistency, add semantic to colour variables, and handoff our designs to developers smoothly.
Shapes & visual tone
As our users are mathematicians, we understood geometry, volumes, and shapes, were important. We created some impact by adding isometric shapes with vibrant and rich bold colours.
Dark vs. Light
CLAASP needed a website, plus the internal application. This app includes an editor, several graphs, numbers, and configuration wizards. As the users are mostly used to light mode, its default mode should be light, but we didn't want to skip the dark mode from the design. However, we decided to create a dark public website to differentiate CLAASP with other competitors and enhance impact.
Wireframes
