Keybase was founded by serial entrepreneurs Chris Coyne and Max Krohn, founders of OkCupid and SparkNotes, and was backed by Andreessen Horowitz ($11M in Series A in 2015). Chris Dixon joined our board.
Chris Coyne reached out to me in July 2015 as he was looking for designers: “We have something very ambitious in mind, something that we think can be our biggest and most important product yet.”
I had precisely been looking for a new startup job in New York. We met over coffee, Keybase’s challenge quickly grew in my mind: bringing PGP (a complex encryption technology) to every day people via a file system and a chat messenger, through an ingenious and fun user experience, what an amazing opportunity. I went all in.
I joined Keybase in August 2015 and became Keybase’s lead designer, designing the product from the very first UX discussions and sketches to its launch on the app stores. I was the main maker of every layer of Keybase’s design on both mobile and desktop, under the product vision of Chris Coyne and Chris Nojima, our VP Front-End Engineering.
Over the 5 years, I…
- sketched out every user flow through low-fidelity mockups with one goal in mind: simplifying encryption,
- defined and refined the Keybase product identity, sometimes leveraging unique colors and styles for a given feature
- built and spec’ed out the Keybase design system, our library of reusable components
- crafted the first version of the Keybase icons, and built a PNG icon set and an icon font
- drew illustrations and turned some of them into animations using After Effects
- hid a few Easter eggs throughout the app 🍳 (ping me if you find some!)
- wrote most of the product copy, trying to make it fun and accessible to all
- tweaked visual bugs directly in code using React, JSX and Git
- created the Keybase logo
- led 1 junior designer and 1 illustrator
Keybase = (Dropbox + Slack + Git + Coinbase) * strong encryption 🔐
Keybase is an encrypted file system, chat messenger, git repository and crypto wallet, built on a repertory of humans with public keys and identities, and a strong keychain. It is based on the PGP technology, invented in the 90s, and you can read all the technical details here.
Keybase aimed at bringing private and secure communications to everyone in the world. We announced and launched our first version on desktop in February 2016.
An early version of the Keybase desktop app, circa mid 2017.
Building the core product features took the team a little more than 2 years.
Identities & Follow 📇
Keybase is first and foremost a network of public profiles where people prove their online identities, and follow each other. The more Alice has proofs, the better Bob knows it’s the actual real-life Alice. The more followers Alice has, the more Bob can trust Alice.
And by following Alice, Bob is warned whenever her proofs break or disappear, which could mean her Keybase account got hacked or compromised.
The 3 states of the “tracker popup”: new user, following and compromised, for which I created a visual language that we propagated to all user instances.
Tracy’s profile is healthy and trustworthy
Tracy’s Hacker News proof broke. I can either accept this change or unfollow her.
Signup & Login 🚪
Keybase does not only rely on passwords, but also on device keys. Therefore, the login and sign up flows are incredibly complex as it involves device key relationships.
A simplified flowchart of the Keybase login flow
A sign-up step
The Files tab, exposing the user’s private files, as well as all public files of all Keybase users.
Image viewer page (side note: this was the entire Keybase team in 2017!)
Exposing files in the Keybase app – wireframes for mobile
Icon language for the file sync experience
People Search 🔍
We iterated multiple times on our search experience, in my opinion the most challenging part of the app. Our profile search operates on multiple databases (Keybase, but also Twitter, Github, Reddit and Hacker News), allows multiple actions (look up profile, open a private folder, open a public folder, start a chat, create a team), and can be launched from various places in the app. Other constraints came into the game, such as making sure the desktop and mobile interfaces felt similar, or that users could check people’s profiles before interacting with them.
Searching users from the People tab
Searching users from the Chat tab (and building a group chat)
Chat Messenger 💬
Our chat messenger was the richest and the most exciting feature. We genuinely discussed every detail of the experience and iterated constantly. Random examples of discussion: should we indicate presence? how can we show that multiple users are typing? how should we design replies? what if a recipient’s identity gets compromised? how can we expose our blue/green/red code for users in the conversation? how can users start conversations with non-Keybase users? how should badges and push notifications behave, and what should the notification settings be?
We used our own chat internally right after launching it, allowing us to really think through every experience and feel pains as we were building it.
Chatting with Keybase users
Chatting with non-Keybase users
Exploding messages have a duration set and get entirely destroyed.
I designed the animation for this feature.
A secret conversation I had with songgao
Crypto wallet & Payments 💸
Following a partnership with the Stellar foundation, we designed and implemented a crypto wallet, allowing users to securely store their crypto money, as well as send assets to other Keybase users.
The Wallet tab exposing all my recent payment activity
Sending EUR to karenm
Feel free to send me anything 🙂
As our user base grew, a good profile completion rate became critical to obtain. I worked on onboarding cards that would invite users to complete their profile, but also to search for other users, to start a chat, or to install Keybase on another device.
The mobile app 📱
We launched our mobile app on iOS and Android in early May 2017, well after the desktop app. Even though we knew our mobile version would launch much later, we always designed for both desktop and mobile, and this allowed us to see the constraints upfront and to find consistent solutions fitting both platforms.
The Keybase iOS app
The Keybase identity 🪞
As a general rule, we positioned our mindset on the more unconventional, new-age, innovative ladder. We decided to break the status-quo and avoid the classic codes already used for encryption (locks, keyholes, Matrix-looking screens), to create a friendlier, more accessible image. This quest for a different, innovative yet easy-to-understand visual language genuinely inspired me.
I built the entire Keybase visual language, created our core style guide as well as our design library, from basic to richer components. I drew hundreds of icons and illustrations, which I sometimes turned into animated GIFs. I built our own pixel-perfect icon library and our own icon font. Later on, we hired a talented illustrator who drew our new icon set.
Some of the icons I created
Some of the animations I created
The Keybase “key” pattern
Out of an illustration I made, came our new logo, “the girl with the key“. (people like to call her “Alice”, a commonly used name in the crypto community). It conveys a fresh and modern image, pulling it away from what already exists, and leveling it up to the “everyone” scale, while emphasizing on the human and social aspect of encryption.
I launched it in February 2017.
You’re logged out. Grey/blue version of the logo.
The new Keybase logo in the OSX Dock.
Fun stickers and T-shirts
A strong design culture 💖
I learned a lot at Keybase. Most and foremost, Keybase taught me that a clever, well-thought and fun experience coupled with a usable UI matters a lot more than the best visual design alone. On the aesthetics aspect, we believed in minimalism, which often means “removing things” – it is always a challenge.
Keybase had a very strong, opinionated design culture where every detail matters, and a top-notch front-end team that gets all these details done. I had the chance to be nearly 100% free on visual design decisions, and I learned a lot on UX mechanics and product building.
I also participated in the app development, tweaking visual bugs here and there in React and JSX, using Git.
This role has been by far the most comprehensive and inspiring in my 15-year experience designing for startups. The Keybase environment is extremely rich, and our small size allowed me to do a lot and wear a lot of hats. With all the attacks and threats happening on the Internet, Keybase’s user base is growing every day.
May 2020: Zoom acquires Keybase 🎥
In May 2020, Zoom acquired Keybase to bring encryption to all its video communications. I joined the Zoom Chat team as a Lead Product Designer.
Keybase still exists as I am writing this and knowing all the love we gave it, I hope it sticks around for a while. I am grateful and proud to have been a lead maker of it.
❤️ Long live Keybase! ❤️