Designing a SaaS app create account screen
Design | June 23rd, 2015
In the two years I’ve been designing and developing ConvertKit I’ve always focused on simple usability. With limited time and money I couldn’t make everything perfect, so I wanted to make sure the usability was excellent before adding that last level of polish.
Basically I focused on user experience before user interface.
I think that was the right move initially, but the result was a powerful application that worked well and was easy to use, but wasn’t going to win any design awards.
Now that the product is more rounded out and full-featured, it’s time to go back and add that level of polish that takes it from good to great.
The original design
When we built the first version of the registration page the process was simple: list out information we wanted to know and create form fields for each one. Here’s what we ended up with:
There’s a lot wrong with this. Why are we asking for name and a URL right on sign up? We don’t actually need a name and the URL is something we can generate automatically and let the user customize later.
Looking back at how complicated the form was is actually rather entertaining.
The credit card problem
Because we have such an emphasis on customer support at ConvertKit I wanted to make sure each new customer we got in the door was serious. That’s why we require take the full payment up front (instead of offering a trial), and just provide a money-back guarantee for those it doesn’t work out for.
That’s good, except there are a lot of people who who are considering signing up, but leave the page after seeing the credit card requirement.
Some may not be serious customers, but there are probably others that wanted to try out ConvertKit, but didn’t have a credit card handy.
With our current form design we don’t have any way of finding out who was interested and then bailed at the credit card requirement.
A two-step process
The simple solution is to move to a two-step account creation process. Step 1 is your basic information, step 2 is the credit card details.
After step 1 is complete we can create a basic account (just without billing) or at least save their information as a lead to follow-up with later. If they complete step 2 they become a full customer, but if not, at least we know who they are and can get in touch with them.
After sketching out a very simple wireframe I took a first pass at the design:
And then for the second screen I designed a more elaborate credit card form.
A new direction
I really liked the idea of laying out the credit card fields like an actual credit card. By changing fonts and adding a few design details I knew I could create something more visually interesting than typical form fields.
But I really didn’t like the card-inside-a-card approach. A credit card inside the larger container just didn’t feel right. So that would mean changing the account credentials step to look more like a card.
An ID badge
It didn’t take long before I came up with the idea for the first set of fields to be designed like an ID badge with the a photo on the left and fields on the right. Once I ditched the main container the ID badge idea came together pretty quickly. These are my final Photoshop mockups:
When designing the card I remembered a design from BankSimple (before it became just Simple) that was a sort of geometric pattern. It looked cool and bankish (that’s a word, right?). Unfortunately I couldn’t find a screenshot from their old site, so I created my own pattern by duplicating and overlaying a bunch of circles.
That pattern, inverted and placed in the background, adds a nice final detail to the card design.
I used an icon for the default avatar, but then realized that we have an email address, which means we can go fetch a Gravatar for that account—even before they sign in or create an account.
Also on the final version I moved from a hexagon image to just a basic circle. I can make the circle with CSS and the hexagon would have required another image.
With two cards I just had to use a flip animation to move between them. You fill out the ID badge part first, then flip the card over and fill out your credit card information.
It’s not accurate to the real world, but it’s fun. You can see this animation, as well as the final coded version in this video (click it to stop the autoplay):
I wanted to add more animations for when the page loads and if you enter the wrong password (on the sign in screen), but my allotted time for this project was up and it was time to release it. Maybe later I’ll circle back and add more details.
Any questions or thoughts? Share them in the comments.