OpenHatch is a web startup founded in May 2009 by three alumni of the free culture and free software movements as part of startup incubator Shotput Ventures‘ inaugural class. OpenHatch builds online tools to demonstrate and broaden open source developers’ experience and expertise in order to make the open source community better connected, more productive, and ultimately well rewarded for its expertise.
I joined OpenHatch in late June 2009, about a month and a half after the company was founded. My initial duties were mainly research and writing related: learning about our target audience, researching competitors, preparing for meetings with industry leaders, and writing OpenHatch’s business plan. Over time, I became more and more responsible for multimedia, design, and usability matters.
logos • illustrations • graphic design • web design • user experience
logos:
OpenHatch’s original company name was Extend Yours; this is the logo I designed for the old name.
After the name change, we went through several different logos, including this one which appeared on OpenHatch’s first batch of business cards.
Eventually we chose one of Raffi’s logo ideas, to which I added the whimsical ‘code is fun’ tagline.
I also designed a ‘mascot’ of sorts for OpenHatch, Sufjan the baby penguin. Among other things, Sufjan appears as the default profile photo for new OpenHatch members.
See more logos >>
illustrations:
These cartoons appear on OpenHatch’s ‘People’, ‘Volunteer Opportunities’, and ‘Experience Importer’ pages respectively. They became the face of OpenHatch and remain the most uniformly-liked, remarked-on part of OpenHatch’s user experience.
See more illustrations >>
graphic design:
While all three of us spoke on Demo Day, I was mainly responsible for determining the content and structure of OpenHatch’s Demo Day presentation and created our slide deck. A disciple of Lawrence Lessig, I eschewed long piles of unreadable text for pictures or brief words or phrases, each with their own slide. I have seen enough bad presentations to know that powerpoints and lecture notes should never be the same document! See a video of the presentation in action.
See more graphic design >>
web design:
Unlike most of my web design projects, I was not the only designer working on OpenHatch’s website. Lead designer Raphael Krut-Landau and I had to work together and give each other feedback on each others’ changes as the look at feel of OpenHatch developed. It was a new challenge, but one we met well. The design that resulted certainly would not have been nearly as good if it had only been designed by just one of us.
Given OpenHatch’s target audience, we needed to create a design that would appeal to open source software developers. Since most open source software project websites are designed by the coders who contribute to the project, not designers, they tend to be highly utilitarian (or, less charitably, ugly). We worried whether this was just because many software developers didn’t have the skills or inclination to do better, or if they were actually attracted to logos and websites that were spartan or garish.
Our design breakthrough came after I talked to my father, a software engineer and contributor to the Linux kernel. The site design was inspired by his and other engineers’ typical work wardrobe: minimalist; white, beige, and pale blue stripes; and cartoony site graphics—reminiscent of Dilbert—for a little color. It was a thrill when one of our users described the design to us as “clean, simple, friendly, and joyful”—a synthesis of my and Raffi’s personalities.
OpenHatch’s blog and corporate pages are on an WordPress install while the community site is based on Django. Despite the different platforms, we wanted moving between the blog and OpenHatch proper to be a mostly-seamless experience. To do this, I modified a WordPress theme so that its div tags and layout matched the regular OpenHatch.org CSS files and templates. With an additional WordPress-only style sheet to handle attributes unique to the blog, this made it so that as the OpenHatch website’s look and feel evolved, so would the OpenHatch blog’s without needing much if any human intervention.
See more web design >>
user experience:
One of the first things I did for OpenHatch was develop a few user profiles based on my market research for us to keep in mind as we chose which features to prioritize. In order to make these profiles stick and help us think of them as real people, I drew a sketch of each of them. You can read their user profiles here.
Through many iterations, we tried to make the various tools on the OpenHatch website clear, responsive, and fun to use. Some improvements were inspired by the feedback we got from our beta testers. Others began internally when we happened to notice something clunky or when we were preparing a brand new feature to replace an older one.
One such feature was the automatic experience importer, which took the usernames a user regularly used in their open source software work and collected all the OSS contributions associated with those usernames. We needed to develop an interface which would make it easy to quickly approve or unapprove the contributions the importer found (since most would not need any editing) while still allowing users to make edits either immediately or after the contribution had been approved. We also needed to make it clear what parts of an older contribution had been updated if new material was found for it, and build an interface through which users could add contributions by hand if the importer failed to find them automatically. And, ideally, we had to do all this in a way that would not consume an excessive amount of vertical space. Through many enthusiastic debates, scribbles on whiteboards and scratch paper, and Photoshop mockups, we eventually developed an interface that would accomplish all of our goals. (See some of the mockups here and here, and the current look of the importer here.)
In my market research, I started to explore the idea of using game mechanics in social web applications to promote site goals and good behavior. I read what those few experts in applied game mechanics had to say and observed how other web applications used them. I then presented my research in a series of blog posts and wrote a white paper, OpenHatch: The Game [PDF], describing a hypothetical community game to promote open source software contributions using ‘squid’, ‘hearts’, and ‘tomatoes’ as virtual currencies.
