The way to get started is to quit talking and begin doing.

Upvote: A Social News Theme for WordPress

It took me way too long to get this finished and ready for people to download and use, but today I shipped Upvote, a WordPress theme that transforms your site into a Hacker News style community. I started this project back in February, got sidetracked, and finally rallied over the past few days to put it out there.

If you’re looking for an HN or Reddit clone, give Upvote a shot.  And let me know what you think.

HN Clone WordPress

Cost of Historic Construction Projects (Adjusted for Inflation)

If you’ve ever been in any sort of budget planning or project cost estimation meeting at a large corporation, you know how completely silly they can be (especially so for software and IT infrastructure projects).  Wildly optimistic or bloated numbers get thrown around that usually have less to do with hard facts than they do with internal political bullshit.  Sometimes when I hear these massive numbers I start to wonder, “How would the cost and time estimate for this project stack up against, say, the cost and time it took to build the Golden Gate Bridge?”

So I finally sat down and did a little research on five major historic construction projects, with costs adjusted to 2012 dollars (see below).  So the next time someone at the mega corporation where you work says, “We estimate upgrading to Windows 7  will cost $42 Million and take three years”, you can indignantly howl, “We could build the friggin’ Eiffel Tower in that time, and for less money!”



Cost: $144 Million ($17 Million in 1954)

Time to Complete: 1 year 0 months 1 day


Golden Gate Bridge

Cost: $557 Million ($35 Million in 1937)

Time to Complete: 4 years 3 months 14 days


Empire State Building

Cost: $618 Million ($41 Million in 1931)

Time to Complete: 1 year 1 month 15 days


Eiffel Tower

Cost: $36 Million ($1.5 Million in 1887)

Time to Complete: 2 years 2 months 30 days

(A TV show called “Pricing the Priceless” apparently claims the true 2011 cost to build the tower would actually be $480 Million.  I have no idea why that’s so high, other than that they’re baking in not just inflation but regulatory, union and comprehensive planning costs.)


RMS Titanic

Cost: $174 Million ($7.5 Million in 1909)

Time to Complete: 3 years 0 months 2 days

(You may not want to compare your project to this one.) :)


I have a terrible addiction to new ideas.  Although I can occasionally achieve a state of flow in my corporate job, I can almost never achieve it in my free time.  I’m constantly chasing the new idea dragon.  When I look at the past year of output, it’s simply abysmal.  All I  have to show for it is a smattering of boring client work and the sad carcasses of a dozen abandoned ideas; domain names (over 300 now!), page after page of product sketches, brainstorming notes and pre-launch pages.  Sometimes I rationalize it to myself thusly: “It’s okay, you’re learning from this constant generation of new ideas and product concepts.  Eventually you’ll land on one that just clicks, and boy you’ll really execute then!”  Except I don’t.

New ideas have the same effect on me as heroin does to an addict.  The initial spike is euphoric, but the comedown is downright debilitating.  As the effects wear off and the harsh realities of actually executing and iterating kick in, I move on to the next idea to get my fix.

Unless I radically change my habits, 2012 will produce another collection of corpses to throw in the idea cemetery.  I really don’t want that to happen.  I can’t let that happen.  I turn 30 in four months which, to me, is really fucking scary.  I read stuff like “it’s rare that you see an artist in his 30s or 40s able to really contribute something amazing” from Steve Jobs, and it has the uncomfortable effect of simultaneously depressing me and jolting me with a sense of panic.  I’m turning 30 and I’ve produced no amazing art.  Shit.

I’ve read that people overestimate what they can achieve in a year, and underestimate what they can achieve in a decade.  Maybe I need to internalize that better so that next year I’m not in a constant despair/panic cycle, while channeling that manic urgency into a laser beam instead of a wank into the wind.  Instead of thinking “what will I achieve when I’m 30?” maybe I should be thinking, “what will I achieve in my 30s?”  Maybe.  But that won’t help me today.

Today I need to get serious.  No, drastic.  Like a heroin addict going to rehab.  This is my intervention. No more new ideas, no more domain names, no more client work, no more hypotheticals, no more I’ll do it tomorrow, no more wasted time.  “By the way, what have you ever done that’s so great?”  I’ll have to get back to you.

Gutenberg Diagram PSD Overlay

Gutenberg Diagram Overlay

The Gutenberg Diagram is a concept popularized by newspaper designer Edmund C. Arnold in which a display divided into four equal areas can help designers ensure that they are taking full advantage of a user’s reading gravity, the natural path that most peoples’ eyes will follow when being presented with information.  In Western cultures we are conditioned from a young age to read content starting at the top left corner, scanning right and then left again, until getting to the bottom right corner.

UX Movement posted about how web designers can use the Gutenberg Diagram to improve homepage conversions by optimizing the placement of certain elements to conform to this concept.  Positioning the primary call to action in the terminal area, for example, should help boost your CTR since this is where most users’ eyes will end up.

I’ve put together a semitransparent Gutenberg PSD layer to use with your homepage and landing page designs.  Simply drop in your design behind it in Photoshop and see how closely it follows the pattern.  You can download the PSD here.



Disney Imagineering’s 4 Rules for Brainstorming

Rule #1: There is no such thing as a bad idea.  We never know how one idea (however far-fetched) might lead into another one that is exactly right.

Rule #2: We don’t talk yet about why not.  There will be plenty of time for realities later, so we don’t want them to get in the way of the good ideas now.

Rule #3: Nothing should stifle the flow of ideas.  No buts or can’ts or other “stopping” words.  We want to hear words such as “and”, “or”, and “what if?”

Rule #4: There is no such thing as a bad idea. (We take that one very seriously.)

Excerpted from The Imagineering Field Guide to Disneyland.


Disney Imagineers

Roll Your Own Pre-Launch Page

A Pre-Launch Page is a way for you to build some interest with your target audience while you slave away in the shadows building your awesome new project.  It also allows you to build an email list of interested potential users, which could absolutely be your most precious asset in the beginning.  There are several paid services that help you do this and more (LaunchRock, Prefinery, KickOffLabs), but in the spirit of staying truly lean I’m going to show you how to roll your own Launching Soon page for free.  This page will:

•  Establish an initial presence
•  Provide teaser information about what you’re working on
•  Capture visitor emails and build a list
•  Encourage social sharing

This should take you about 30-60 minutes to complete.

You’ll need to set up free accounts with Campaign Monitor and AddThis.  I also assume that you have a hosting account and a domain name already pointed at it.

Ready?  Okay let’s do this.


Step 1:  Set up Campaign Monitor

After signing up for your free Campaign Monitor account and logging in, you’ll see the dashboard.  Click the link (the business name you signed up with) in the “Clients you’re sending for” sidebar.

On the next screen, click the “Manage your subscribers” link at the bottom of the page.

Next, click the “Sample List” link so that you can modify it.

Under the “Sample List” heading, click the (change name/type) link just below.

Re-name your list to something like “Pre-Launch Page”.  For the “List Type”, leave it on the “Single opt-in” option, then click the “Save Changes” button.

On the next page, click the “Create a subscribe form” link in the right sidebar.

Uncheck the “Name” field, since we’re really only interested in collecting email addresses at his point.  Then, click the “Start customizing” link in the right sidebar.

On this page, we’re going to tell Campaign Monitor which page the user should see after adding their email address.  Clear out the default url, and replace it with “” (obviously, replace “” with whatever your actual domain name is.

Under the “Subscription Confirmation Email” section, leave the default “Do nothing” button selected, unless you have something really compelling to say to the folks who sign up and want to automatically send them an email.  Click the “Save the subscribe process” button.

Next, you’ll click the “Build a subscribe form” link in the right sidebar.

Now, click the “Generate the code” button (make sure the “Name” option is still unchecked).

Leave this window open for now.  We’ll come back to it later.


Step 2:  Set up your Signup and Thanks pages

If you haven’t already, download the pages I’ve already built for you based on a trimmed down version of the HTML5 Boilerplate framework.  Drop everything inside the “launchingme” folder into your root directory.  Important: Make sure you get the included .htaccess file uploaded.


Let’s start with customizing the Signup page for your project.  Open up index.html in your text editor and do the following:

  • Update the <title></title> with your project name and a brief description.
  • Update the meta description and author tags with your information.
  • Upload your own logo.png file into the /img directory, replacing the placeholder logo already there.
  • Add your own interest-grabbing headline and desire-inducing tagline in the <h1></h1> and <h2></h2> tags.

Next, we’ll go back to the form code you generated in Campaign Monitor and integrate it into your page.  If you’re using the pages I provided, you’ll just need to copy and paste three items from your Campaign Monitor code into your form where I’ve indicated:

  • Form action url:  Delete everything inside the quotes, including the brackets, and replace it with the url from your Campaign Monitor code (e.g.
  • Input name:  Delete everything inside the quotes, including the brackets, and replace it with the input name character string from the Campaign Monitor code (e.g. cm-atuzd-atuzd)
  • Input id:  Delete everything inside the quotes, including the brackets, and replace it with the input id character string from the Campaign Monitor code (e.g. atuzd-atuzd)

Open up thanks.html.  This is the page your visitors will see after they add their email to your beta invite list.  Repeat the following steps from above:

  • Update the <title></title> with your project name and a brief description.
  • Update the meta description and author tags with your information.
  • Upload your own logo.png file into the /img directory, replacing the placeholder logo already there.
  • Add your own interest-grabbing headline and desire-inducing tagline in the <h1></h1> and <h2></h2> tags.

Next, you’ll need to head over to AddThis and click the big “Get AddThis” button.  Sign up (it’s free), and then select the style and social buttons you want from the left sidebar.  Grab your code, and replace the existing placeholder AddThis code in the files you downloaded above with it.

Important: You also need to add the following to each of your AddThis buttons, so that when people share your Pre-Launch page it points to the Signup page, and not the Thanks page:


Here’s an example:

<a addthis:url="" fb:like:layout="button_count"></a>
<a addthis:url=""></a>
<a addthis:url=""></a>
<script type="text/javascript" src=""></script>


Step 3:  Managing email addresses and tracking social sharing

You’ll want to test everything to make sure you’re capturing emails properly and that sharing works.  Walk through the signup and social share process yourself with a few email addresses to test everything out.

It’s easy (and addictive!) to track who’s signed up in Campaign Monitor.  Go to your dashboard, and click your project’s name in the left sidebar.

On the next page, click the “Manage your subscribers” link.

Click your page name, and you’ll see a list of email addresses for everyone who visited your page and signed up.  You can even click through on the emails to get more information about the person who signed up (mostly useful after you’ve sent out an email blast or two).

Tracking shares of your landing page is dead simple with AddThis.  Simply log in to your AddThis account and click the “Analytics” menu item.  You’ll be presented with a nice summary snapshot of sharing activity, clicks and viral lift %.  You can even connect a Facebook Page to your account and track tweets mentioning your page.



You shouldn’t need to spend more than an hour setting all this up, especially if you use the plug-and-play site files I’ve provided.  Aside from hosting and registering a domain name, this won’t cost you a dime!  Now you have no excuse not to get your Pre-Launch page up and start telling people about your awesome new project.  I’d be honored to be the first person you tell about it!  Just tweet me and I’ll be happy to sign up.

You can say that again!

Trying to purchase tickets for the Natural History Museum of LA presents me with an awkward salutation dilemma. This reminds me of that scene in The Goonies, where they have to play the exact right piano keys or be dropped into a cavernous abyss. I hope I pick the right one!

NHM Salutation Dropdown Fail

Purple Monkey Dishwasher

This kind of obvious “Dont Make Me Think” usability fail should have been caught quickly with some basic heuristic testing. It’s amazing that nobody on-staff at the NHM noticed this or cared enough to get it fixed in what is likely the most important conversion funnel on the entire site. Wow.

Microsoft continues to fail at User Interface Design

I gave up on Microsoft improving their product interfaces a long time ago, but they still occasionally shock me with an especially terrible design decision.  Their new Outlook Web Access interface is an abomination.  I’ll eventually write up a post dissecting exactly why the whole UI is criminally awful, but for now I’m going to focus on just one small example: Creating an Out of Office reply.  Imagine that you’re headed out on vacation, and the very last thing you need to do is set up an auto-reply to let people know you’re not around.  First off, this feature flops at an Information Architecture level, because it’s furtively buried in an “Options” dropdown menu cleverly disguised as simple text:


I spy with my little eye...

Once you are finally able to locate the Options menu, you’re presented with a cluttered, confusing collection of items:

Options Dropdown

Now where's th--OH LOOK! THEMES!!!

(By the way, these themes are just sad.  Not only do they suck on a creative level, they destroy basic usability.  Take a look at the horrifying space robots theme.  It completely obscures your profile and the Sign Out link with clip art diarrhea.)

Horrible OWA Theme

Camouflaging key links with crappy UFO clip art is generally a bad idea

Anyways, you’re back to trying to set up an Out of Office reply.  Why not just call it that?  I don’t know, but Microsoft chooses to call it “Set Automatic Replies”.  That could be it, but you still have to think about it for a second, which again depletes your user happiness reservoir by several percent.  You click and land on this travesty of a page:

Terrible UI Design

Where's Waldo?

Scanning the first sentence, you can see that this is in fact where you can set up an Out of Office reply, but now you really have to parse the details to figure out how the hell to work this thing.  A separate radio button and checkbox for sending automatic replies and specifying only specific times is Microsoft’s solution to accommodating two user types:  Folks who want to always send automatic replies (or who don’t know when they’ll return), and folks who wants to send  automatic replies only between two fixed dates and times.  The first user type is probably a minority of people using auto-reply; the vast majority using this feature know when they’ll be gone and for how long.  Aside from maybe celebrities and politicians who get tons of email every day, it’s unlikely too many users want to blanket auto-reply everyone who sends them a message.  Microsoft seems to have thought of that by nesting the “Send replies only during this time period” checkbox and settings under the “Send automatic replies” radio button, but it still takes an unnecessary cognitive toll on the user.

Once you’re able to get through that step, you get to actually type the message that people will get during your time away.  How many people are compelled to dress this up by customizing the font, font size, style, alignment, color, indentations, highlighting and footnotes?  Probably very few.  And those who are should go take a valium pill immediately and chill out.  A rich text editor has no place here.  Remove it and immediately reduce the visual noise by 10%.

Now you’ve typed your message, are about to look for the “Save” button but notice another checkbox lurking at the edge of the pointless iFrame container.  “Oh, I can set up a separate one for people who send me email while I’m gone, but who don’t work at Initech.”  And look, you can even customize this message differently than your other auto-reply message!  Purple 30pt Comic Sans, here we come!

OWA Scroll

Don't forget about "The Others"...

Yet again, you are blasted with settings overload.  This time it’s a checkbox with two nested radio buttons.  Reversies!  After you’ve muddled through those options, the time comes to actually save this damn thing and get on with your life.  Wait, where’s the Save button?

OWA Save Button

Awww...there's the little guy!

Uhhh, uhhh, OH!  There it is!  Microsoft must have been reading up on game mechanics and decided to make a challenge out of actually saving your auto-reply.  Find the save button, get 5 points!  Well, the save button isn’t really a button.  It’s a tiny blue link in the lower right corner with a checkbox next to it.  Why?  Well a big button with the word “SAVE” on it, positioned in a place the user might expect it to be, would just be too easy wouldn’t it?  If you want that vacation, Microsoft will make sure you earn it by winning a game of hide-and-seek first!


How I would fix it

Now one thing I can’t stand is people who present problems without any sort of solution.  Since I’ve never been a huge fan of self-loathing, I took the liberty of creating a much more usable and simply cleaner UI for this feature.  Anyone in Redmond is welcome to it.  The first screen shows my proposed design in an “active” state, after the user has selected a time and date range and saved their messages:

OWA Design Fixes

Ah, much better. I can breathe now!

Just by stripping out unnecessary visual noise such as the rich editor toolbars, I’ve made the UI appear instantly easier to use.  Instructions are generally thrown in as compensation for bad design, so I stripped them all out.  Good User Interfaces strive to be as self-evident as possible.  The state of the feature (on or off) is now immediately clear , being indicated directly in the feature name (Out of Office Reply is on).  The Start and End dates and times have been repositioned into a much more logical layout, with the labels being color-coded red and green to provide better visual cues.  Gone are the confusing radio buttons.  If you’re among the minority who want to send auto-replies in perpetuity or until some undefined date in the future, you can simply check the “No End Date” box (see next screenshot).  If you want to send an auto-reply to people outside your company, you can simply add a separate message, no radio buttons or checkbox options to decipher.  There’s a warm and fuzzy feeling only opinionated software can provide.  And last but not least, I’ve added a big ass “Save Now” button, right smack in the middle where you can’t miss it.

Here’s how it would look for those folks who love Out of Office auto-replies so much they never want to stop:

OWA No End Date

No end in sight!

I can hear you saying, “But Sean, what about auto-replies set for the future?  How would you communicate that?”  Great question, thanks for asking.  Since we’re indicating the state at the top of the page as being “on” or “off”, we have to clearly message the user about auto-replies scheduled for a date and time range in the future.  Here’s how I handled that:

OWA Future Date

Back to the future

Since auto-replies aren’t currently running, the feature is “off”, but users can see their scheduled start date and time called out next to the status.



Good User Interface design isn’t always (or even usually) sexy.  It’s almost like acting.  You don’t always appreciate a good actor until you suffer through a performance by a really bad one.  Lucky for us, it’s probably easier and cheaper to implement a better UI than it is to improve bad acting skills.  So come on, Microsoft.  Give us more Johnny Depp and less Keanu Reeves.