Visualizing Cryptography

A design exploration to illuminate some of the magic behind the bitcoin seedphrase.

The first slide from Gigi’s talk.

This design exploration was inspired by Gigi’s talk at the Baltic Honeybadger Conference in 2022 titled, Cryptography is not enough.

Bitcoin finds its strength in cryptography.

When you create a bitcoin wallet, a bunch of extremely large random numbers are generated. Those numbers are then hashed, minified and translated into a twelve word sentence, which we call a seedphrase.

Depending on the wallet you use, it may also be called the secret phrase, recovery phrase, or backup phrase.

I think it’s safe to say that the process of backing up a seedphrase has been neglected by wallet app designers, as evidenced by the lack of variation or creativity you find at this step:

Examples of the seedphrase backup screen on several popular wallets.

Crypto product leaders instead seem intent on obscuring the seedphrase or getting rid of it entirely.

Increasingly, wallet apps give the user the option to save their private key in the cloud and authenticate it with a username and password.

This is sometimes referred to as “account abstraction,” “wallet abstraction,” or “social recovery wallets.”

But depending on how exactly it gets implemented, account abstraction usually compromises to some degree on user privacy and it always places trust in a third party.

Account abstraction, the new shiny object in crypto

A different approach

I think that someday there may emerge a method of account abstraction that is both user friendly and preserves ALL the benefits of self custody, but it’s clearly a tough nut to crack.

In the meantime, what if we were to double down on the seedphrase?

What if instead of trying to hurry the user through it or presenting large, skippable blocks of text that explain it, we design an experience that sparks curiosity.

Here, I came up with some visuals that represent the technical concepts behind the seedphrase and tried to expose some of the magic going on under the hood.

Sneak peek of my design.

Design process

I think about wallet apps and private key management a lot, but Gigi’s talk inspired me to dig deeper into the inner workings of the seedphrase.

Not really knowing whether or not a product idea would emerge, I read a dozen or so articles (links at the bottom), wrote several pages of notes and made some sketches of visual elements for the seedphrase.

Once I had an idea of what I wanted to create, the process went roughly as follows:

1. I studied this calculator

Mnemonic code converter, by Ian Coleman

2. I ordered the calculator functions into linear steps

Each function on a sticky note.

3. I tried to visualize entropy

Vector drawings of an elliptic curve.

Entropy is a tricky concept to grasp, let alone visualize.

Entropy values must be sourced from a strong source of randomness.

That means flipping a coin, rolling dice, shuffling a deck of playing cards, or running an algorithm that sources the randomness for you.

True randomness requires a source.

A quote from a book, a song lyric, a street name, or even mashing the keys on your keyboard will not be random enough.

Non-custodial bitcoin wallets have a tool to generate true randomness built right in. This is how they produce cryptographically secure keys; keys that would take the most powerful computers on earth centuries to crack.

My first idea for how to visualize this was to draw an elliptic curve.

Unfortunately, I couldn’t get it to animate the way I wanted in Figma so I ended up punting on the idea for now.

4. I tried a different way to visualize entropy

Glitchy static animation.

To understand your odds of being able to guess someone’s seedphrase, imagine if the entire known universe was covered one meter deep with uncooked rice. And your friend’s seedphrase was one single grain of rice.

–Gigi

5. I sketched out the flow

First pass on a wireframe.

Rough order of screens:

1. Glitchy static for generating entropy
2. Raw binary code which is the output of the entropy
3. Match strings to words for each of the 12 strings
4. Show 12 words at the end and verify

6. I tried to visualize the math

The string of minified hexadecimal.

Creating the effect of numbers pouring into the view from the bottom took a lot of trial and error, but I’m happy with how it turned out.

In the next iteration, I may try something different for the raw binary.

7. I connected each string to a BIP39 word

Prototype in progress.

To generate a 12 word seedphrase, a random hexadecimal string of 128 bits (1s and 0s) is divided into 11 groups of 11 bits, plus one group of 7.

Each of the 11 bit chunks codes to a number between 1 and 2048, which maps to one of the words on the BIP39 word list.

128 / 32 = 4 *3 = 12

The last group of 7 bits is a checksum, which is a small block of data derived from another block of data for the purpose of detecting errors.

The checksum also maps to a word on the BIP39 word list, which gives you your 12th word.

7. I put it all together into a prototype

Play the prototype yourself in Figma.

Some visual design highlights:

The color palette is only three colors.

The font (Lato) is friendly for the conversational UI in the beginning, and it also looks good huge.

The style overall is quite opinionated, but I think it can be easily adapted for different wallet apps.

Conclusion

I originally set out to do a more generic visual style that might be more readily applied to any wallet, but changed my mind after surveying the ones on my phone.

Apart from their seedphrase backup flows, most wallets have very unique styles and brand motifs. There’s nothing generic about them.

I’m going to continue iterating this concept and would love to work with a wallet app team that might be interested in using all or part of it for their seedphrase backup flow.

I also plan to participate in a few hackathons this year, as I’ve found that to be a great way to meet fellow builders who are open to new design concepts.

Sources

What is a seed phrase?, What is a private key?, What is a recovery phrase?, An empirical study of user experience with mobile cryptocurrency wallets, Why account abstraction is a game-changer for dapps, Account abstraction: making accounts smarter, Mnemonic code converter, Anatomy of bitcoin, Elliptic curve visual, Mnemonic Seed: Encoding a random number in to words and using them to create a seed, Checksum: A simple method for error-checking data, Hexadecimal: A set of numbers that includes the letters a to f, A first look at the usability of bitcoin key management

—

Thanks for reading until the end! I originally published this as a case study titled, Visualizing Cryptography.

I work in crypto and think about it non-stop. You can find me on twitter @danajwright_