Keybase
Visual Design
•
Product Illustration
Keybase is an end-to-end encryption chat and cloud storage system on mobile and desktop. Now acquired by Zoom.
client
Keybase
Problems to solve
Lack of clear visual design guidelines.
Create clear contrast in colors to meet AA accessibility.
Responsibilities
Define styles such as color, typography, breakpoints, and different component states.
Illustrate icons in different sizes for mobile and desktop.
Work on micro-interactions for happy emotional impacts.
Impact
Standardize product’s look-and-feel
Boost time-to-market of new features via reusable UI components
Clearer contrast as requested by users.
RESPONSIVE ICONS
Files and Folders
A revamp of the icons in the Files section of the app was made in a flat style. The icons were created in different sizes along with error and approved states. Different sizes were made created for mobile and desktop.
Devices
As an added protection to your account, you can approve the new device Keybase is downloaded on and revoke if your device is compromised. I designed the new devices in the new flat style.
Screens
Over time with your account, you may revoke and download Keybase on different mobile and desktop devices. To differentiate one mobile from another, colorful background screens were created. At least twelve backgrounds were made for both mobile and desktop. The mobile background would be a smaller version of the desktop screen.
App screens
Here are some desktop and mobile screens with the new icons in place.
Unused illustrations
Cryptocurrency sharing
These illustrations were made for a feature within the app where users could randomly send the cryptocurrency “Lumens” to their friends. This feature was used to increase the shareability of Lumens.
