Website Revision case: Alibaba information Upgrade Project Summary

　　

 

Insert an advertisement: this project will be released in the first release of the project in October 10! A complete undeleted version will be released at the end of October. Please wait! Release address: info.1688.com

　Order:

Two years ago, I was lucky enough to participate in the information revision project before I became a new employee of Alibaba. It was my first product debut and starred as a visual designer, at that time, I got an unpainted black-and-white draft and an airplane draft. I don't know who the supervisor is, who the director is, or who other actors are. The boss told me to give it to me, and then he acted in a confused manner. When I stumbled on the Performance of 7.8 versions, I chose the demand side. Finally, I chose a version quite smoothly. Then we optimized and changed it. In that week, we got to every day. Finally, we handed it to the later-end students before the agreed time. Then we went online... At that time, I felt like this was the original product design .. After I went online, I was not satisfied. Many things are still a little different from what I imagined.

Two months ago, the second anniversary was full. I seem to find that I am very connected to the number "2". Looking back, I have never left the community. This time, I received another task of upgrading information. Unexpectedly, after two years of rolling, I wanted to change him. Thanks to "no resources", I was lucky to have a golden mouth, requires more professional information, more massive information, and more authoritative information! As a result, I once again starred in the Information upgrade project! I was deeply touched by this role. Although I still acted as a visual designer, I wanted to bring my final work closer to perfection in front of everyone, it is not enough to do your job well. Of course, in this process, if you encounter an outstanding supervisor like xiaoshuai and baboons, you can save a lot of time, for example, I don't have to spend too much time on data issues, hitting problems, or trying to explain why I want to do this again... Even so, it does not mean that I have a good visual experience, and I don't need to worry about anything else. Otherwise, visual designers will always be artists: actors who don't want to be supervised are not good directors! The experience designer who doesn't want to be PM is not a good product manager! Quotes of countless versions have been copied and used in many places. In order to enrich your experience and understanding about the project, many things still need to be done by yourself. Although there are still many small problems exposed at the end, if you do not do anything, there will be more problems exposed at the end. Although they are not perfect in mind, they are at least one step closer to "perfect.

---------------- I am a split line! ------------------

　Total project process:

　　

 

* All the highlights of the yellow dot are links I participated in this project process.

(1) Experience Key Indicators: Here is the project in the early stage of the professional methodology mentioned five dimensions, have heard to share the students should know H-E-A-R-T:

　　

 

② Six-degree analysis: the six-degree analysis mentioned here is different from the six-degree relationship between people, the six-degree analysis here is a distributed and integrated way of thinking that helps users systematically analyze problems.

　　

 

Here is a simple explanation. For details, please follow li Long's sharing or consulting, and contact trademanager: lilongyun4

In the early stage of the project, Xiao Shuai was very powerful. He analyzed the information and shared it with PD, operations, and the front-end, laying a solid foundation for subsequent project and product planning. The user survey is divided into two parts. One part is an interview with senior information users and the other part is for professionals (company internal staff: Boss, PD, simple access to operations, designers, and developers. The research by these two personnel adds up to the final draft produced by the information module derivation (Interactive draft) and the final analysis of the final emotional version. As the visual designer for the entire project, let's take a look at the output process of analyzing the emotional version to the visual draft in this project summary, follow-up precautions at the front end and review the three issues that need to be considered at the beginning of the project. Well, the article is over half done, and the next step is the focus...

　I. process from sentiment analysis to visual drafting

Emotion edition:

Simple Steps for sentiment edition: experience keywords (from the above two parts mentioned in user survey) → keywords derivation (materialized, visual, and mood ing) → images searched based on derivative keywords → Image Color Block → generated sentiment version (detailed visible information upgrade sentiment version view Address: \ nasAlibabaB2B project team's Chinese site UED # Application Design Group # Information upgrade (slide seems to have to go over the wall, use our server ))

　　

 

From the perspective of the entire design experience: in fact, for the product itself, especially the visual designer, before design, the designer should have a forming visual phantom in his mind, the sentiment version is a good demonstration method for this visual phantom, in order to persuade the boss and those with different opinions during the visual review, find a valid reason. Of course, using the emotional version directly is also a very effective method when you cannot feel it. But remember, nothing is absolute! Especially for Chinese people like us who like warm colors, maybe designing a blue or cold color product requires a lot of determination and confidence to persuade the boss! Although I made a lot of determination, I knew that the aura was not strong enough, so I also left a way for myself...

　Competing product analysis:

Add a picture at the end of the emotion version, as shown below:

　　

 

In order to avoid forcing the boss to use a warm version at last, the demonstration method of the emotional version is partially invalid... Facts have proved that this is not unscientific, because the boss indeed put forward a pitfall requirement: "Make a warm version ..." "Well, that's okay .." The final outcome can be imagined. Information, of course, we still need to follow the market rules, where the market rules come from, and analyze competing products! This is definitely a testimony that can be called "Two answers" together with the sentiment edition! Competing product analysis can be the last step in sentiment analysis. Therefore, I finally adopted a cold visual version, which finally relieved me .. At last, I did not turn my sentiment into a method that is difficult to understand. Many may not know which dimensions to choose when analyzing competing products. In fact, they can be extracted based on the design draft you want to design, such as dominant colors, image proportions, and whether there is a background color, whether the module has a border, hover color, and text color of a large paragraph can be used as a part of DPL, but it is a key element of competing product analysis. Similarly, some extraction elements, even for most competing products, sometimes the boss wants something different. This situation also happens without compromising the overall effect, let's try something as the boss says. In this special case, there is a certain trend, and the risk is not whether it will damage the visual effect, but the cooperation time with the front-end students, go to the next section.

Ii. Considerations for frontend follow-up

Note: As mentioned at the end of the first part, the boss may have some special requirements for a product. For example, if N is met during this process, N is not considered for multiple confirmations, on a dark evening that has been confirmed as the final draft, trademanager jumped to the next hop. The boss said: everything else was pretty good. After reading it for a long time, the font color was a little light and not focused, can I change #444 to #333? The final draft has been confirmed, and the change is not very good. The boss said it doesn't matter, I changed the color value quickly, so I had to work hard to find the front-end to change it. The next day, the boss thought the link color was a bit problematic. It was too gray to change the link color, at that time, I was wondering: Nima can't finish it all at once. Before the final draft is confirmed, I won't say anything .. Of course, I didn't say anything, so I tried to change the front-end, and the front-end students were not happy. I just said that you have changed your requirements. Several times, no, look for PD, can you take responsibility for not going online on time? Are you very worried about the process? In fact, I can understand that it is a trivial matter for the front-end students to change the color value? Some of the restoration in the process is not enough and the annotations are re-modified, after a small change, I was afraid that I would change it. Then the boss said that I would change it back. So I reflected on myself and finally worked tirelessly and insisted on persuading the boss not to change the link here, now, we need to change and wait for the project to be released and then raise unified requirements.

To sum up the following points, you must confirm them before entering the front-end:

Note: in particular, the labels for unified output should be detailed. Otherwise, it is still your responsibility to restore the result. (There are several parts to be cautious: navigation, breadcrumb, and editable area of the module, font color and size usage, unified type module spacing)

Button: The status must be completed when the final draft is provided to the front-end. Don't think that the front-end will ask you, so be prepared to put it on the page first.

Hover: Although hovering is a unified standard, it is important to remember that navigation is a special existence of the entire page and also a hub for circulation between pages. Navigation with a background color should pay special attention to it, hover colors do not say that the whole page is unified. It is enough to only underline the navigation hover.

Special areas: in special cases, you must provide additional instructions. Otherwise, the front-end will follow your Unified Specifications. The effects on the visual draft in a timely manner may not be discovered, but annotations are required.

Daily Follow-up: at least two times a day to check the front-end design, the restoration problem can be solved on the spot, saving some trouble.

　　Iii. Problems to be considered at the beginning of the project

If it is a new project, you don't have to worry too much about this. The product manager will plan this series of problems when setting up the requirement document. There will be many problems with project upgrades or revisions. Many upgrades or revisions are not initiated or promoted by the original project creator, so there will be some deviations in information transmission. Pay attention to the following aspects:

Advertising space: before the revision, you need to find out which positions on the page are the Department and which update permissions are assigned to other departments. These positions must be prepared before design, otherwise, the project will be postponed or the location of the project will be different from the visual draft. For example, some advertisement spaces on the homepage and detail of this news revision belong to Yahoo Beijing, and some tanx advertising spaces are, there is also an independent advertising space. These positions are sometimes not displayed at all times. Sometimes they are displayed only for a few days in a month. Therefore, it is easy to ignore them during design revisions. Or you may mistakenly assume that you belong to the department of the product. The current solution is to temporarily compress or lengthen the ad space before the contract is signed, so that the effect should not be too different for the time being, after the contract is completed, change it to the final size of the design draft and give the new size to the Yahoo manager in a timely manner.

Cooperation space: some of the information detail is directed to P4P. Likewise, since the page is directly embedded with the P4P code, we do not know P4P in advance. We need to upgrade the template style, as a result, the module style and unified style at this position are quite different after the launch, which also damages the atmosphere. Although some of them are miserable, they are taken as an example and posted to everyone, currently, the matching of the new template can only be completed by the end of the month according to the resource scheduling of the P4P department.