In the past two and half years, Stackoverflow, the programming Q&A site Jeff Atwood and Joel Spolsky created has become the de facto place to go for quality answers. The success of Stackoverflow has spawned two other tech Q&A sites, Serverfault.com and Superuser.com. Jeff and company tried to host the Stackoverflow engine to allow anyone to create their own Q&A site for a fee, under the Stack Exchange white label. However it didn’t quite work out the way it was intended. As Joel later wrote:
We tried making our software available as a hosted white label product called Stack Exchange. We thought that other people would create awesome sites on every imaginable topic. Some people did (yay!), but it wasn’t the flood of high quality sites we were hoping for.
Essentially, we decided that Stack Exchange was failing because:
- Only people with money to burn or a business plan could create sites.
- Those people didn’t necessarily have the ability to bring an audience.
In other words, it was simultaneously too easy and too hard to create a new, working Stack Exchange site.
If you are the type who keeps up with tech news, you probably heard that back in May StackOverflow raised six million dollars from a group of VC investors. This funding not only allowed the company to provide the service for free, but also to set up a filtering system for quality Q&A site proposals to be launched. You can read Joel’s post on how the new Stack Exchange system works.
A few months ago while I still worked at my old job at the FCC, I started to become more involved in my freelance work for Jeff. One night, he sent me a URL to a development server and told me to take a look at it. Below is what I saw (note: at the time the content was different).
“What is this… Area51?” I asked. Jeff told me it’s the staging site where people can propose new Stack Exchange 2.0 Q&A ideas. If the proposals gain enough audience and support, then they’ll be launched as beta sites. “We took care of the back-end functionalities. Can you design a new look for it? And design it fast.” Jeff stressed the “fast” part.
I spent the next 30 minutes staring at the existing design. Jeff told me Joel had commissioned the talented illustrator Terry Colon for the art work on the site. I never designed a site based on someone else’s art work before. This was a first for me. Looking at the whimsical nature of Terry’s art, I quickly got the message that Joel wanted the site to have a light hearted feel. It made sense to me since the new site should appeal to all audiences, not just techies. However designing the rest of the site around the two banners was a challenge. For one, I’m not a great illustrator. I can’t add much new graphic art that matches Terry’s style. Secondly, the banners themselves already drew way too much attention, and were dominating the rest of the site. Also, I felt they looked more like Ad banners the way they were positioned.
Instead of designing around the banners, I decided to make the entire site have the feeling that was contained within the banners. This way, I could break up the individual aliens and spaceships and use them throughout the site. The idea the banners conveyed was ships being launched, a metaphor for launching new sites. I decided to take the metaphor further: how about we launch to the moon? Terry already had a starry night sky in his art work. I felt it was the perfect background to use for the site. So the header would be the moonlit sky, the footer area the ground and everything in-between the site content. Not only this would serve the theme of the site, but also the design elements would gently fade in the background instead of being obtrusive.
I always pick the color palette first before I start designing the specifics. To me colors are the most important elements because they’re what the brain interprets first. The appropriate colors are responsible for the type of emotion you want to evoke. Luckily for me, I didn’t have to spend too much effort picking the right colors. I used the colors from Terry’s artwork.
For the typeface choice, I wanted something bold and loud for the proposal titles on the homepage because they’re the most important text. Also such a typeface would provide a balance to the “cuteness” of the graphical arts. After a few tries, I decided to go with the web-safe font Impact. iPad doesn’t support Impact, so I used “Futura-CondensedExtraBold” for fallback.
After a few hours of pixel pushing, I was pleased with the overall look. I felt the design accomplished the goal of providing a whimsical mood and emphasized the right elements. In the next few days I collaborated with David and Emmett, the super talented Stack Overflow NYC programmers to implement the design. Area51 was launched in early June.
The screenshots above are taken from the live site. Since the first draft of the initial design, we have tweaked a lot of the UI elements. Not just how they look, but also how they behave.
Since the site went live, about 1,000 proposals have been created by the public and the site itself has been well received. Many of the proposals have been launched as beta sites. Area51 is one of the most fun and rewarding sites I’ve worked on. Design-wise it was a challenge since this kind of design isn’t my typical style. I’m very thrilled the site is being used by 12,000 registered users to create useful Q&A sites. You can see all the new beta sites at Stackexchange.com.
Here are some of my favorite Q&A sites, check them out!
Here’s one of the initial design concepts I canned. As you can see, it suffered from “over design.”