essays - 0 Comments
Jan. 21, 2010
Recently the startup I've been working at for 6 or so months launched its first product. Quora is a continually improving collection of questions and answers -- a place where you can find the best source for a wide range of information online; from local hotspots to esoteric Harry Potter trivia, it's all there.
A lot of thought went into the Quora product design and even at this early stage many details have been revisited multiple times. So, I thought I'd share a few of the decisions and principles that went into the first major version of the beta product.
Key Product Design Decisions
Really early on I decided to focus only on the product design and would forgo any time spent on things like visual design and, to some extent, branding. I didn't really know how that would play out at the time but I knew I wanted to get as much built as possible and as quickly as possible and hoped this artificial constraint would pay other, as yet unknown dividends. In hindsight, this turned out to be a good call because it really focused the product design and avoided common distractions. So, the scant visual elements are carefully added to provide utility and help guide the user to the most important behaviors we wish to encourage.
As a consequence of that strategy, color is largely used for signaling hierarchy or interactions. So, the blue buttons are meant to reflect the blue links. Green buttons are for simple inline interactions. Grey buttons are for the least important and ancillary items. (The application of these rules isn't entirely consistent because of constant, rapid iteration.) Red is used for the logo in order to help it to really stand out from the other surrounding elements. It is also used to highlight the start of the main column and give the eye an easy reference point for where the most important content starts.
Another interesting change from focusing singularly on the product was how that impacted my choice in tools. Normally I'd fire up Photoshop and start painting out a vision and maybe after a few days I'd work in the browser for a bit, jumping back and forth the entire time. With Quora, however, I did something totally different which was to only work in the browser. My tools were limited whatever the current state of the back-end component system was at the time and the browser. This meant relying on properties like border-radius, background and color to communicate as much as possible.
Once I had the general strategy formed, the next big question was where to start? Picking a starting point is important because it will be the axis the rest of the design revolves around -- but it's tricky and not always the first page in the flow. Ideally, you should start with the page that serves the most significant goals of the product. Our early product conversations about long term strategy led me to focus in on the question page. It was really the hub of every main goal we have and critical to creating what we hope will be the best source for any given question on the internet. Probably my first three months at Quora were spent designing and undesigning only the question page, building a set of standard components along the way. When I'd get stuck there, I'd fill in some information on the topic page or user profile but I'd always use the question page as the point from where I'd create important interaction cues.
The First Quora.com Question Page
Another important decision was to be totally ruthless and make real design decisions. All too often in the past I'd find myself falling for some piece of UI and nurture it at the expense of the surrounding elements. Or worse, I'd try to appease someone who was giving feedback or pushing for specific agendas versus trying to create the best UI. This time, however, I was careful to form as few emotional bonds as necessary and really work on rational arguments for everything I designed. By eliminating all but the most important pieces, those that remained always have some concrete purpose. This ruthlessness has helped me become really comfortable with pages that seem only a quarter of the way finished -- so much so that now I use that as my metric for a successful UI. A lot of decent features have been dropped or hidden or otherwise cut in order to pursue this goal but it's helped ensure that only the most important information is on any given page. And with fewer elements comes fewer decisions a user has to make as they interact with the interface.
Moreover, by making real decisions we can really guide the user to whatever behaviors will ensure they have a great experience. If there are only a few options on the page and of those options they do 80% of what you're looking for, we can still capture that intent and use it to help make the product better for everyone. A lot of products fail to make strong decisions because each one they make clearly defines a product into a confined space, but when you provide too much choice another, far worse problem is created: you don't do anything at all.
Each of these main decisions really fell out of a single principle of keeping things as minimal as possible. It's not enough that the product is simple, but even the values and strategy underpinning it should be simple and straightforward.
A Practical Example
I could go on and on about the various decisions, principles and values that make Quora's product design but a great example of focusing on the product, using the question page as the axis of the design and being ruthless with design decisions can be found in the evolution of the site's navigation.
Keeping things minimal was terrific idea in the abstract but once we got rolling building new features, reality started to get in the way. As a result, the header was put under tremendous stress as huge chunks of the product started to take shape. At one point the header design had something like 10 components -- each a seemingly reasonable addition in isolation:
Old Quora Header
There's the obligatory logo link, home, user name, logout, and settings links but also the search bar, search button, add question button, recent changes and notifications links. Many products have these types of links in their headers and, with the explosion of social applications, many more are on the way. After using this header for a while, however, I began to notice that it was getting in the way on the question page. Not only did the user have to parse what can grow into vast bodies of text, but before she even got to the question she had to traverse this daunting set of standard controls. The nav was even visually noisy with lines and boxes and text everywhere.
So, I started to digest each component and extract whatever essence was most useful and apply that back to the navigation. Even taking those steps ultimately I kept ending up at the same point and instead of designing the navigation, I was rearranging it -- shuffling components from left to right, top to bottom. The last straw was the inclusion of the Inbox link and something had to be done. But it wasn't until things got ruthless that any progress was made. This meant cutting. The notifications link, the recent changes link and dropping the search button were the first things to go, but they didn't go quietly.
Notifications are a critical channel for a user's experience, so it's no small feat to remove a prominent link to the page and care must be taken to ensure a user is alerted to new notifications. Another issue was that the existing notifications link was useful as a navigation point but also as an anchor for an alert -- like a count bubble. But when thinking about it, the weight of notifications importance actually provided for another option and carving out room on the homepage to display notifications inline seemed like an appropriate way to access that information. Once the main location for accessing notifications became the homepage, adding the new notifications count bubble to the Home link made sense.
Recent changes was another tricky area because that was a channel for power users to help police a flood of content and maintain a standard of quality critical to the site's success. Removing it meant that an important feature would be less prominent. There was also this remainder left over from removing the Notifications link -- once new notifications were cleared, how did you get back to the full list of older notifications? So a simple sub-navigation was developed to easy flip between a user's feed, all recent changes, inbox, notifications and invites that is only available on those pages and unnecessary elsewhere.
Finally, the search button was moved to the typeahead results list. This design -- like everything else -- still needs further refinement but overall it is poised to only show exactly what is needed and only when it's needed. Eventually that link will only show when there are more results than those visible in the typeahead.
Quora Question Page, For Now
The end result was a navigation that fit into a single line and is clear and easy to read. You may not understand every single element instantaneously, but it's easy to learn if you are the least bit invested in the site and out of the way if you're trying get an answer to a question.
A user interface is the product of a design. A design is a set of decisions about a particular product. Those decisions represent the product's goals and ambitions. There is a struggle balancing the philosophical and the practical -- a constant shifting of priority and intention -- and as new ideas come up something that was once great is now totally inappropriate, yesterday's terrible idea is made brilliant. There are trade-offs, to be sure, and some decisions probably don't map to yours but the important thing is that they were made and continually improved.
Jobs at Quora
So far I've designed quora.com by myself but pretty soon I'll need some help. If you're interested in working at Quora, can build what you design (not kidding about this requirement!) and are interested in learning more, send a link of your portfolio to firstname.lastname@example.org.