They've been out a few days now, perhaps you've noticed:

login-page

The login page is largely cosmetic, but the signup page is completely new:

signup

A New Flow for Signup

For the first time, someone can sign up for a CodePen PRO account right as they are creating an account. This is the traditional signup model used by the vast majority of software-as-a-service sites out there. We decided to go with it after some feedback from a variety of trusted people that it is the way to go at CodePen's stage. Two major reasons:

  1. It makes it much more clear what CodePen is and can do right from the start.
  2. It's better at conversions at our stage.

We don't have a ton of data yet, but both appear to be true so far.

Type

The type in the CodePen Logo was designed as a variation of Gotham. Now that Gotham is available to use on the web, we thought we'd roll with it where we can. These new login and signup pages are using it, as well as Sentinel. It may take some time but we're considering rolling out out to the rest of the site.

Why a separate login page?

Isn't it nice when apps have login screens that open on any page you are on, rather than a dedicated login screen? We like that too, but unfortunately it can't happen on CodePen. Login really needs to happen securely over SSL (HTTPS). We can't make any page that shows arbitrary Pens HTTPS because people have the ability (and rightfully so) to link up assets over any protocol. That would trigger nasty "insecure" warnings if we forced HTTPS everywhere.

So, we just force it on the login page and other necessarily secure pages. It works out, because we can keep that login code off other pages which keeps them lighter.

We try and keep the experience good by redirecting to wherever you were before you came to the login page as well as trying to keep you logged in as long as we can by default.

Upgrading/Downgrading

Of course new users can still sign up for free accounts if they wish and can upgrade later. Upgrading, downgrading, and changing credit card information all happens through these pages (rather than in Settings where it used to).

change-of-plan