CLAASP

Cryptanalysis made simple.

CLAASP is a web application designed to help cryptanalysts and researchers analyze encryption algorithms efficiently. Users can create ciphers based on industry standards and run analyses to generate detailed statistical results.

All processing is handled in the cloud on demand, giving users powerful computational capabilities without relying on local resources. Additionally, the CLAASP community allows members to easily share files, publish their work, and collaborate with other specialists.

Some history: Symmetric

Two years ago, while leading my consultancy in Chile, I joined Symmetric, a platform for visually building symmetric encryption algorithms. Users could design algorithms by connecting blocks on a canvas instead of writing code. The challenge was that the front-end, though functional, wasn’t wired to the logic needed to complete tasks. I redesigned the interface and aligned it with the platform’s core functionality, enabling users to build, test, and execute algorithms seamlessly—turning a complex technical process into an intuitive, user-friendly experience.

Difficult decisions

I led a small design team for Symmetric, hiring a senior researcher and a junior visual designer. Our first task was to clean up existing Figma designs, improve accessibility, and restructure the information architecture.

Early on, I noticed a disconnect: the Product Owner understood the algorithms but not the users’ pain points. I refocused the team on user research, leading three key interviews that revealed the core problem. This allowed us to align the design with real user needs—maximizing insight while minimizing time and resources.

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.

I took a pragmatic approach with the Symmetric project, presenting our user insights to the client’s leads. The clear decision was to pause the visual design and recommend building a code library first—directly addressing users’ needs. While it meant stepping back temporarily, the strategy paid off: two years later, with the library fully developed, the client rehired us to create a visual tool on top of it, leading to the launch of CLAASP.

Project Overview

CLAASP allows beginners and pros alike to design and analyze symmetric cipher algorithms.

CLAASP as a Product

To shape CLAASP, I first analyzed the client’s library and compared it with the closest alternative, Ciphereditor.

This revealed two key insights: beginner cryptographers lacked a friendly, visual way to analyze ciphers, and the client needed strong product guidance to transform their technical expertise into a usable, delightful tool. These findings defined CLAASP’s value proposition and positioned it as a unique solution in the market.
‍

Foundations

Colours

The client had no style guide for this project—only a set of fonts. I took the lead in defining the visual communication, starting with an accessibility-first approach. By analyzing the company’s branding colors, I built a palette that was both consistent with their identity and fully accessible, ensuring the new product was inclusive and aligned with business needs.

I adapted the brand colours for digital use and introduced gradients to enhance the product’s visual identity. Since the CLAASP logo already featured a gradient, this choice reinforced consistency across the design.

Branding color translation fixing colors for screens

Building on that study, I created tonal palettes for the main colors, defining the product’s complete color universe. Using Material Design 3 schemes aligned with Flutter, I tokenized colors and tones—adding semantic meaning, ensuring consistency, and enabling a smooth design-to-development handoff.
‍

Colors for each of the surfaces and elements of the interface

Shapes & visual tone

Since our users are mathematicians, I also emphasized geometry, volume, and shape in the visuals, adding impact with vibrant isometric forms and bold colors that reflected both clarity and precision.

3d illustrations with bold colors showing the visual tone

Dark vs. Light

CLAASP required both a public website and an internal application, which included an editor, graphs, numerical data, and configuration wizards. Since users were accustomed to light mode, I set it as the app’s default while still designing for dark mode. To differentiate CLAASP from competitors and create stronger visual impact, I made the public website dark-themed, contrasting with the product’s lighter interface.