Code Year is a great initiative by the folks behind Codecademy. The concept is simple: sign up to Code Year, and each week you’ll receive a new coding exercise. By the end of the year, you’ll be well on your way to becoming a coder.

Did you know Codecademy is hiring designers and developers right now? Take a look if you want to join a great startup!

So far more than 75,000 people have signed up for the newsletter, making this one of the most quickly successful projects I’ve ever been involved with by far! Here’s how it happened, and as I go I’ll also point out more general design principles or techniques using bright yellow notes thingies like the one just above.

10:32 pm: Open email

Last Friday, at 10:32 pm I received an email from Zach from Codecademy asking for some last-minute feedback and tweaking on a design they were getting ready to launch. At that point I didn’t know that the “last-minute feedback” would evolve into a full-on redesign, all in one hour!

The design Zach showed me was looking good, but we figured it could nonetheless be improved. First of all, it didn’t really grab your attention, as there was no strong focal point.

Also, it was a little too complex, as the “subscribe” and “share” steps were both present onscreen at the same time (whereas they now happen in sequence).

So despite the late hour, I said I didn’t mind helping, got the PSD, and hopped into Photoshop for a few quick touch ups.

10:40 pm: Launch Photoshop

You can guess what happened next. If there’s one thing designers hate more than anything, it’s working on somebody else’s Photoshop document. So I decided to open up a new document, set up a grid, and quickly reproduce the current design.

I ended up changing quite a few things, ending up with the design below:

I showed this to Zach to keep him up to date on my progress, but told him I could do better. I wasn’t satisfied with this because it lacked identity.

10:57 pm: Find the perfect font

I decided to try out a different font. Helvetica is nice, but it’s over-used and doesn’t really generate any emotion in the reader.

Using a standard font often means you’re missing an opportunity to make a statement and create a connection with the user. This is why I chose Museo Slab, a strong yet playful font that I knew was available on Typekit as a webfont.

Also, there was no central branding element. Even for a single-use site like this, I like having a strong brand, so I quickly mocked up a logo using Museo Slab as well. Here’s the result:

Simply changing the font made a world of difference. However, you’ll notice that’s not the current Code Year logo.

11:05 pm: Browse stock icons

I had originally picked a lightbulb (out of the Classic iconset from IconDrawer) to represent the “lightbulb going on” in your mind when you understand something new.

Just like knowing which font to use and when, having a good icon library is vital to being a good web designer (unlike you can actually draw them yourself, which is not my case!).

However I soon realized that a calendar would be much more appropriate (after all it says “year” right there in the name!).

I also added in the Twitter and Facebook buttons in the header, and moved the Codecademy logo to the left to make space for them:

11:13 pm: Hold texture try-outs

It was looking good, but I knew it was still missing something to “make it pop”. So I decided to try out adding a background texture to the page.

My process to pick a background is simple: try out all of them! That’s why you need good textures in your library. I suggest taking a look at SubtlePatterns.com

11:22 pm: Design the quotes

The last step was designing the little quotes that ended up replacing the big boring blocks of text in the final design.

Elements like quotes, testimonials, notices, etc. are a good way to break the flow of the page to refocus the user’s attention and slow them down. Kinda like the note you’re reading right now!

By then it was getting late, so I decided it to call it a day. You can see my final mockup below, and you can compare that with the live final result.

The moral of this story is that you don’t always need weeks –or even hours– to create something. Sometimes you just need to stop over-thinking things and trust your creative impulses. That’s what makes working with startups so great.