About Me
Portfolio
Onboarding V2
A refreshed, consolidated design system
Almost immediately after we launched BitPay ID, I got to work designing the next version, making sure to solve all the issues along the way. At first, I definitely like Material flat inputs but quickly realized that they are best suited for small containers or ideally for mobile. Encapsulated input fields are easier to skim, interact fit, and build patterns around.
Here we can immediately see the clear benefit of an entire input's logic living inside a boxed capsulation. The "Forgot password" helper action is easily accessible and can handle error messaging.
The card layout is also naturally extensible; here I added OAuth login options underneath the main body while retaining an elegant structure.
Sign In
Single state login
We created two huge issues for ourselves when we split the Email and Password fields into 2 separate states. To prevent email validation attacks, we had to employ strict reCAPTCHA. Normals users would encounter this and be forced into a brutal Login experience. Also, the split caused credential auto-filling to work less than ideal.
The easy solution was to consolidate the forms; now no need for reCAPTCHA and browser auto-fill transforms the form into a 1-click experience.
2-Step Verification
Making security fun
The two-step verification states were pretty straightforward, however I was determined to keep the V2 design system extremely simple with as few components as possible. Thus, I use the "optional" Header in the Auth flow to indicate state and status. The pending spinner adds to the feeling that the form is waiting for the user to take an action before we reach the finish line.
Reset Password
Simple actions & patterns
Here we see an example of the sticky notification footer inspired by Adobe XD. I wanted to use an unconventional style for global notifications that was responsive but elegant. The tight grouping of the page aids the user's focus while remaining balanced with the screen. Any additional helper actions can be appended to the bottom of the card for simplicity.
Create an Account
Consolidated forms optimized for speed
Probably the coolest part of these new forms is the split-input. It was a bit tricky to build but when I got it working, the concatenation on blur just felt right. Here, I'm doing much of the same, focusing entirely on consolidation. A big reason for the split-input was to save 2-3 rows (first, middle, and last name).
Nice thing about encapsulated inputs is that it makes it real easy to show error states, here I'm having fun with the colors to indicate password strength.
Personal Info Verification
Easy to fill forms
The consolidation with this form was quite an improvement over the original. Much less overwhelming and the split-input makes the experience fun.
Also, date pickers served as an endless source of confusion and bugs so I decided to simplify things with a dropdown. Errorless and the order can be obviously switched based on locality.
The flag icons by the country also adds a nice level of polish and makes the whole thing feel just a bit more personalized.
Address Verification
Easy to fill forms
Much of the same but here I focused on optimizing for browser autofill. I absolutely hate typing in addresses so its important to me that any Address form supports auto-fill entirely.
On a technical note, Address forms really made us realize how hard it is to deal with international address formats. Ultimately, the best experience is actually freeform fields.
Document Verification
Delightful awaiting states
Here are the Onfido awaiting states that we use when verifying a user's ID. This pulse animation was inspired by Mollie, but I later heavily reuse this pattern in Invoice V4.
Verification States
Status notifications
Finally we have the End states of the verification process. Pretty straightforward, but this time I wanted the messaging to be much more obvious by encapsulating all the content.