After the devastating earthquake and tsunami hit Japan last March, electricity conservation was needed in the affected areas. A group of graphic designers created posters to encourage people to save power. I was very inspired by their work. I started working on a poster too.

I wanted something that’s iconically “Japan” and carried a simple and clear message. Japan is many things to me, it was hard to find one motif. Being a huge Gundam fan, I went with a saddened Zeta.

I’m way late on finishing it, but better late than never.

We’re currently hiring a designer at Stack Exchange. Ever since we put up the job listing, I’ve received countless applications. After combing through all the resumes and cover letters, I thought I’d share some tips with those who are looking for a design job.

My view of an ideal job is that it should be more than just a gig that writes you a pay check. It should be something you’re passionate about, a place where you respect your coworkers and are proud of the projects you’re working on. This way, the job no longer feels like a “job” but a fun hobby that you get well compensated for.

But you know this already.

If you’re an employed designer and are looking for a new full time job, chances are there’s something amiss about your current job: maybe it’s not challenging enough, maybe you’re tired of freelancing and want a more stable set up, maybe your long commute is eating up too much family time, etc. Whatever the reason, I advise you not to apply at just any place that has a job opening, but rather, to find that ONE company you truly want to work for.

Choosing the right company to work for is a personal decision, similar to choosing a mate. Does the company culture mesh well with your personality? Do the products they work on excite you? Once you find that one company you absolutely want to work for, then you need to make sure that your application gets noticed. That company may be getting hundreds of applications from designers equally qualified as you.

I’d like to share some personal experience on my application with Stack Exchange, and how I got the job as its first designer. In 2007 I moved my family from North Carolina to the DC area for my new job with the Federal Communications Commission. FCC was pushing for a more modernized and user-friendly website and web app. I got to work on several interesting high profile government projects that I believed benefitted the general public. It was a comfortable government contract job and I liked my coworkers. The downside of the job was my long commute: 1.5 hour each way by train. As actual work went, there was a lot of maintenance time between each project launch. I felt like I needed more of a challenge creatively and it was time to move on.

Around this time a former coworker and friend from a previous job, Jeff Atwood had recently started his new project, Stack Overflow which eventually led to the Stack Exchange network of Q&A sites. When I decided to leave FCC to find a new adventure, Stack Exchange was my number one choice. I had already worked with Jeff and his developers on smaller freelance projects. I loved how the team worked: they shipped things fast then refined- rinse and repeat. Also, Jeff had a talent to push me to do more than I thought I was capable of.

Stack Exchange in early 2010 was still a tiny bootstrapped start-up with no budget. Career-wise I felt I was in limbo. Then in May, SE Inc announced it raised six million dollars in VC funding and was looking to hire several positions. That same day, I sent Jeff a one-liner email that read:

“Hire me. I’ll bust my ass for you.”

Jeff told me he liked my work, but his business partner and CEO Joel Spolsky had to approve. “Hire my friend please” isn’t how the company recruited. This made me very nervous. I didn’t have any personal interaction with Joel, I only knew of him from his famous blog Joel on Software. I knew he was an extremely smart programmer and business person who had a great experience hiring people. Reading his blog posts on his hiring practices intimidated me even more.

But I believed my skills would be an asset to the company, and culturally we’d be a great fit. I decided to formally apply at Stack Exchange. I had a cover letter and resume ready to email to Joel. Then I asked myself, why would he read my stuff out of all the other applications he was getting? What would make me stand out from the rest of the candidates? How could I get him to know me as a person instead of letters on a PDF? How would he know that I really, really wanted this job and wasn’t just sending my resume to a million different companies?

I decided the best way to convey all this was not to send a resume, but to build a custom webpage. After all, I’m applying for a web design position, what better way to do it than to actually make a web site specifically for the company I wanted to work for?

A few design goals I set for the one-page application site:

• Make it personal. Since Joel and I have never had face time, I wanted to use a candid photo of myself, addressing him directly.
• Layout my skills and experience sections in a grid view that’s best suited for web reading, given the information density.
• Only show my best work in the portfolio section. (Yes, we have all done bad designs in the past.)
• Have a clear message why Joel should hire me, and repeat that message.

The page only took a few hours to design and code. Below is a screenshot of it. (✂ truncated).

It worked. After I emailed the Joel URL to the application page, I was quickly scheduled for a Skype interview with him. That interview with Joel turned out to be a lot less intimidating than I expected! In fact, it was the opposite. He was very friendly and funny. It felt more like a chit-chatting design session than a formal interview. He asked me a lot of great design questions and shared his view on the importance of good UI. My initial impression of Joel only re-enforced my desire to work for the company. I was hired on full time a few days later.

It turned out some other designers had similar success with custom job application sites too. Jason Zimdars created this effective page when applying at 37signals. It led him to some freelance projects with the company, and eventually he was hired.

Designer Alice Lee is a huge fan of Instagram; she created “Dear Instagram” for her application. Even though the site didn’t get her the job she wanted, it got a lot of publicity. She landed an internship at Path because of it.

Do these tailor-made job application pages guarantee you a job? Of course not, you will be judged by your actual portfolio and other skill sets. But you will make a good first impression. A company, especially a small start-up is not this faceless entity. There are real people behind it. These are the people you can affect on an emotional level with your sincerity. In other words, make them feel special.

A generic cover letter that starts with “To Whom It May Concern” does not make anyone feel special.

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.

It’s been a while since I took photos of anything worth while. I’m glad these turned out OK. Taken with Nikon D90, Sigma 70-300mm. My fingers are very numb still, from standing outside for about an hour. Tonight I found out how fast the Moon moves. Shots that were longer than 4 second exposure were blurred.

I love macro photography. It makes me more aware of the texture, curve, and shape of individual pieces of a greater whole. Then when I move my eyes from the view finder I realize how all these small details share the same design elements. I become more appreciative of the designer who made these things.

That quote by _why is probably the best design advice out there today. No amount of reading inspirational design quotes, surfing design galleries, writing about other people’s work or attending conferences mean anything if I’m not creating. This post is a gentle reminder for myself that I am a designer. I design. I’m not a curator, a marketer or a design pundit.

I think with the vastly available blogging tools and community sharing, it’s so easy to be allured by the idea of talking about design, instead of actually creating things. There was a time when great designers were celebrated by their actual work, not by their writings on design, or their tastes. When I look at some popular web design celebrities’ sites, I rarely see any body of work but a mountain of writing on design and meta posts. I’m very guilty of this too.

It’s easy to create a facade of what a great designer you are these days. It’s easy to write about the ideas you have, rather than seeing those ideas become fruition. It’s easy to justify your good tastes by showing others the type of stuff you like, instead of stuff you make. It’s easy to be a critic than a doer.

This isn’t a jab at those who write design blogs. There are several whom I have great respect for. Writing is an important skill for a designer to have and blogging is the perfect platform to enhance that skill. However, let’s not forget why we are in this profession in the first place. We’re designers, we create stuff.

The culture must satisfy tribal instincts. If a culture exists, it must have a reason for existing. The only valid reason for a particular culture is that it provides a value for its members perceived by them to be greater than that offered by any other culture. It must differentiate in some manner. If a member of a culture is not loyal to that culture, he should move to a culture in which he is comfortable or abandon all culture. Remaining in a culture (or being allowed to do so) while antagonistic to it is not acceptable in any culture. If many members rebel, the culture collapses, as can be seen in the American culture today. The only successful cultures in America today (if there are any) are the subcultures. Only there can the tribal instincts be served.

A History of Human Culture

It’s been fourteen months since I switched to Mac, after being a PC user for almost two decades. I’ve been keeping track of how long it’s been since I made the switch because I had planned to write this big glorious post on the one year mark. It’d be a post about how much I love my iMac. Not just iMac, but also how much I love my iPhone, iPad, Macbook Pro and the wonderful UI/Marketing Apple creates. It’d be a post that would generate tons positive comments from other Mac users, and a few anti-Apple ones from PC users. There would be a big flame war in the comment section and I eventually have to turn commenting off.

In other words, it’d be a post just like thousands of others out there, and one that has very little value.

I think it’s more interesting to make observations about the culture instead. Not just the Apple culture, but sub-cultures in general. Over the year I’ve heard, read and participated in many debates on “X vs. Y.” In most cases the debate got to the religious level, and at the end they were no longer about objective views. Is our association with a product, a tool, or a piece of clothing a symbol of individuality or a mere tribal mark? Is it ever about if tribe X is better than tribe Y? Maybe our caveman instinct tells us to grow bigger as a collective group so we can feel safer about ourselves?

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.

Area51

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.

Design Process

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.

Result

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!

• Gaming
• Food and Cooking
• Photography and Photographic Editing
• English Language and Usage
• User Interface

Blooper

Here’s one of the initial design concepts I canned. As you can see, it suffered from “over design.”

I Stumbled upon this delightful little video I thought I’d share. If you’re a creative of any sort you probably can relate to this. I certainly feel the procrastination, distraction, and self-imposed pressure when I try to write blogs. I love the style of Lev Yilmaz’s videos. His monotonous, but fascinating way of story telling reminds me of Ira Glass. I had seen some of his work long ago and realized today that he’s the same person who also created “What Would Penis Do?”

I absolutely love the Hirshhorn Museum in DC. I’ve visited the museum a few more times since I last posted about it. Below, you’ll find some selected shots I took over the past few months.

Many exhibits have come and gone. I find myself more in love with the museum itself, rather than the artwork it displays. I love the spatial arrangement inside and the overall architecture. There’s something about it that’s very soothing to me. Maybe it’s because of its round shape, or the openness I feel as I linger inside.

When I redesigned this blog, I mentioned that the Hirshhorn Museum was a big inspiration. I hope I have captured its tranquility.

If you’re ever in DC area, you should definitely check it out.