Our design process

Taobao interview last link, is to ask candidates to ask the interviewer questions, so that the interviewer has the opportunity to answer candidates for the company, the team and work, and so on questions. Among the designers I interviewed, about One-third would ask me: "What is the design process of Taobao?" "I don't really know why people ask this question so much," he said. Maybe it's a "safe" question, and there's no harm to the interview; Perhaps the current designer has a problem with "process" or "no process" in the work, perhaps the topic involves the "confidential" of each company, it is really impossible to find the relevant information.

In short, although the number of designers to interview Taobao is limited, but I venture to assume: currently One-third of all web designers in China want to know more about the "design process" knowledge, and we do not think that this is a "confidential" topic (I understand the company design process are sorta, different names, are essentially the same). So, here is a brief introduction to Taobao ued design process, I hope that the one-third of the designers to help.

step 1: Prototype (Prototype)

The first phase of design, which we call prototyping, is primarily designed for product functionality, user flow, information architecture, interaction details, page elements, and so on. If you think it sounds like these concepts are hanging in the way, I used vernacular to say: The prototype design, is completely regardless of the product looks good, only to do things and how to do these things to think clearly, how it and the user interaction to think clearly, and all these are drawn, so that people can see intuitively.

As for how to draw it, it's up to you. Use the paper strokes, use the whiteboard water strokes, use Photoshop, use Visio to draw, or like us to use axure painting, all can. Just put all the above mentioned in detail.

In the prototype deliverable (Delivery, which is the output of a certain stage), the most important and most common is the wireframe (Wire Frame), which does not need to be explained, look at the following diagram to see that:

When drawing a wireframe , to grasp the extent of the details of the description. Some things just draw a box, and some things need to design the copy. Lest your boss or the demand side grab the ad banner in the corner. This problem is entangled with you, ignoring the most important part of the main page.

Also, keep in mind that prototypes are used to make people change. The value of its existence has been modified several times, updated several times, and its next step is changed a few times.

step 2: Model (mock-up)

After the prototype was accepted, it was time to care about the product's good looks. We use the word "model" to collectively refer to the deliverable of this step. Compared with prototypes, it focuses on the visual design of the product, including colors, styles, icons, illustrations, and so on.

To be clear, this is not a step by "art" to "beautify" the work. Visual designers need to have a deep understanding of prototype design, and have a good understanding of the interaction design and the HTML/CSS/JS code. If not from the overall perspective to do visual design, it can only be done to change the crystal effect to metal effect such as "entertain oneself", and the product itself does not have any valuable help. If the prototype says: "On this page, a is more important than B." , there are Seventeen-Eight visual languages in his head that can be chosen to represent the "A-b important". This is the basic requirement for the visual designer of the design model. A higher requirement for

is the "original function" of visual design. "The bottom is the crystal effect or metal effect?" "," What color does this button choose? Wait This kind of thinking and choice, should focus on the product temperament, brand and so on, in a variety of products to maintain a certain unity, in the user heart to lay a visual brand. In fact, it is difficult to do this, especially to meet the requirements of the above. Generally speaking, if can 90% of interactive design results and brand image expression, already is very good result. From my own perspective, often very depressed can not use good visual language to express their ideas in the prototype design, always finish the model to play a 70 percent: (

Higher requirements, some problems with interactive design is difficult to solve, then need a creative visual division, We can solve the problem creatively from the visual design point of view (I have not come up with a good example, think of it again).

Overall, model design is a very difficult thing to do. Its tools are perceptual, but the design process requires very rational, and must solve the problem in various constraint conditions. But at present from a higher point of view "visual design" of the people are not many, mostly still stay in the "effect", "style" and other surface issues. After the "Web Standard" and "User Experience", the visual design is the third wave of the specialization of web design, and the demand of the market already exists. The design of the

model is generally based on Photoshop, which is an example (corresponding to the prototype example):

Step 3: Demo version (demo)

This step I will not say more, demo is based on the prototype and model with Xhtml/css/javascript and so on front-end technology to achieve, so that the backend development engineers can take over the code. This process let pony, Zheng Chun Special start a new post to detailed introduction it. Just to mention that the front-end development in some companies is not placed in the design team, and we believe that front-end development is to a large extent the user experience of the promotion and assurance, development is only one of its means and forms. So just keep this piece of work on our team and now it looks great:

After converting the prototype and model to XHTML/CSS, this is the page:

Http://favorite.taobao.com/collect_list ——-g,nrxwy2lumhgozsvz2cq3tk6w64-.htm

Step 0.5/1.5/2.5/3.5

There's half a step to it? Yes, this is our user research process. Before and after each stage, we will choose whether to devote energy to the user research according to the specific situation. User research form is also very free: to make a phone call to members, Taobao Wang Wang to chat casually, to the company to do usability testing, to members of the family interview ... How convenient how to do the practical. We do not have the energy to put too much emphasis on the theoretical research of "academic" nature, and the research method is eclectic, "can catch the mouse" on the line. The key key is how the results of the study are displayed on the product, how to absorb the views of individual users to serve all users.

At this point, we do not enough, the accumulation is very thin, we need to learn a lot from peers, but also please a lot of advice.

finally ...

About processes, note:

1. The goal of the design process, is to ensure that "whoever does the design of this product can achieve 80 points"; the perfect work of

2. "100 points" is likely not to follow the process, but rather to incorporate the creative, legacy and executive work of genius;

   The
3. process is something that only matches the environment to bring positive effects.

Above is the current design process for our ued team, and perhaps you have found that it is similar to the design process of most companies. We are also constantly revising and developing this system, where there are deficiencies, please advise more. If you learn from our process, in the work found that there are any problems, please come back to tell us, thank you!