Stack Exchange

Maybe I took my own advice a bit too far, that I’ve been too focused on shipping out designs instead of talking about them. Or maybe I’m just poor at time management and I can’t balance both. Regardless, I’ve been wanting to write about all the interesting projects I’ve been working on.

It seems like yesterday that I started working at Stack Exchange. I still can’t believe it’s been two years already. At Stack Exchange, we create a network of high quality Q&A websites. If you’re in the tech field, chances are you have heard or used our programmers Q&A site, Stack Overflow.

The network has grown quite a bit in the past two years. Through our Area51 site, the public is able to propose and create Q&A sites on a wide range of topics. We now have eighty-seven sites in the network. Two years ago, there were three.

My main design task has been creating unique visual identities for these Q&A communities as they graduate to a full Stack Exchange site. (When a Q&A site is first created, it’s labeled as a “Beta” site. We graduate a site when its stats reach certain health criteria). So far, thirty-two sites have graduated.

I can safely say that this has been the most challenging job I’ve ever had in my web design career since 1995. It is also the most rewarding and enjoyable one I’ve had. I never consciously thought of it as a “job.”

I’m a firm believer that in order to create a good design, the designer must know the product and its audience intimately well. This requires a lot of research, beyond design. At its core, Stack Exchange is about fostering niche communities of passionate people. Our communities are the reason our sites are so successful. At work, everything we do is to create a better experience for the communities and help them to grow, through robust underlying software, promotional contests, sponsored conferences and constantly tweaking our system and policies based on their feedbacks.

Each Q&A site uses the same underlying engine and has the same HTML output. The set layout is limiting what I can do visually. But this constraint is good in a way because it enforces the overall Stack Exchange branding.

To me, a good visual design is one that provokes the right emotional response from users. It sets the mood if you will, then it gently fades into the background as a pleasant bokeh. It is easier said than done though. In order to capture that right mood, I have to know the site’s topic well, its history and quirks, its members’ personalties as a whole. This requires a lot of research before I even start brainstorming the visuals. The design is never about making a pretty skin or an exercise of my personal design taste, but creating one that’s relatable to the users I’m designing for.

Certain sites were easier for me to design since I knew the topics well since they fell in my range of interests. For example, cooking and video games. Then there are topics I knew absolutely nothing about, such as TeX, Judaism, GIS, role-playing games, Mathematica and so on. In fact, I didn’t know anything about the topics of most of our sites, prior to designing for them.

My typical design process for each site:

• First, I mentally treat the community as if it was a small business company. I’m its dedicated in-house designer. The company’s well-being affects my personal well-being.
• Read as much as I can about the site topic, through Wikipedia, existing forums, print publications if I could find them. This helps me to identify established visual cues people associate the subject with.
• Read the questions and answers posted on our own site, to make sure I’m focusing in the right area. Talking to our power users and moderators in our web chat and Meta site helps a great deal too. This gives me a feel of community’s overall personality. For example, recreational sites tend to have a much more laid back vibe than academic ones. Techies are somewhere in the middle.
• Once I have a good concept about “mood,” I then pick the art direction I feel is the most effective at capturing it. I create static graphical mockups. I only create one version of the mockup, the best one I can come up with. I don’t believe in creating multiple designs. This is actually the easiest part of the whole process for me.
• Present my design mockups to the power users and moderators. This is the hardest part. Our users are very smart, opinionated and vocal. The design pitch doesn’t need to be long to be effective. It does however, need to give the users an insight into my mind: why I did what I did. This way, they understand my design process like I do and hopefully appreciate my effort of trying understand their realm of expertise. When I present my design process objectively and let the users know that I have their best interests in mind, they rarely interject their personal preferences in their feedback. When the design is not thoughtfully pitched, the whole process can devolve into a contest of tastes. “My green is better than your blue.”
• I make design tweaks based on feedback when I think they’re valid.
• Convert the design to CSS(LESS). This part is rather tedious. It’s basically an exercise of CSS Zen Garden. These days, launching a site is a bit involved, because there are other graphical assets need to be created too. For example, community email newsletter skin, ad banners, chatroom skin, community blog skins, apple touch icons, etc.
• Coordinate with our core team devs to launch the new design and graduate the Beta site. Monitor the site post production for CSS bugs. (I have yet to launch a flawless, bug free site)
• Eat some celebratory bacon then take a nap.

Another challenging factor was time. When we first launched Area51, we had a lot of Beta sites created at once in a short amount of time. I remember joking to a coworker “someone will get slammed later when they all graduate.” It turned out I was that person. For months, I had to repeat the process listed above once a week, sometimes twice. Shipping a site from scratch to launch. I felt it really stretched my limit as a designer. Week after week, I was buried in researching, talking to users, picking out art styles that were foreign to me. There were times when I had great self doubt. I felt like I wasn’t able to execute the design direction I set, or the one I picked was totally off, at the last minute. Then when I read the positive feedback after site launch from users and random internet people, it was the most rewarding experience.

Creating identities for over thirty communities in the past two years have made me a lot more pragmatic and humble. My design process is more streamlined and focused. I learned that having empathy for users is not enough; taking an interest in what my coworkers do also helps me with my design work indirectly. I’ve been exposed to many interesting subjects and people I wouldn’t have otherwise. I was also able to collaborate on SE projects with other talented designers I’ve known via online.

I plan to blog about the case study for each site design in details, as well as other interesting projects I’ve been working on at work. Meanwhile, please take a look at our full site listing, you may find some Q&A sites of your interest.