User Experience: A Brief Discussion on the visual part of the homepage Revision

 

　　

 

.

.

　　

 

　　

 

　　

 

　　

 

　　

 

　　

 

.

　　

 

Some time ago, I was doing a full-site revision of the print school, including the homepage, list page, details page, and topic page. The entire project lasted for a long time. Some time ago, the new version of the printing school was launched. The first draft of the home page was designed and finalized by the master of the school. Later I followed up and optimized it. Now I just made a design review on the homepage of the printing School.

Netease printing School (yxp.163.com) is a personalized product service platform launched by Netease. NetEase printing school can print various digital products online. As the printing and photo Dispatching Business continues to expand, the homepage designed a few years ago cannot meet the existing business needs in terms of interaction and vision. Therefore, the homepage revision will be put on the agenda sooner or later.

　　

 

The homepage revision is a project that lasts for a long time and has a large number of participants. Therefore, you must have a clear and effective project process.

Project Process:

1. Project Initiation

The product owner should write a product plan, determine the product's market demands and functional requirements, and hold a meeting with the relevant business department owner to discuss and confirm the requirements, then, relevant personnel of the interaction, visual, front-end, and development projects will be convened to determine their respective task time points.

2. Research and Interaction

Based on the Data trend in the past one or two years, the user researcher redefined the target user group to refine the product concept. Build a product prototype based on your needs.

3. Visual Design

Visual designers participate in the Project Meeting to understand the requirements, and then perform visual design based on the product prototype and product function planning book. Visual design plays a crucial role in the entire project. It must communicate with the product owner about the product requirements and the page details with the front and back end engineers.

4. Development

The visual review will confirm the visual draft and proceed to the development stage. This process takes the longest time in the entire project. Therefore, note and cut the visual draft before delivery and development to avoid delay in development.

5. Test

Front-end testing is also an important part. If you think that the work of a visual designer stops at the final draft, you will be wrong. If you do not want to launch the product, you must never relax, problems that often occur during the testing phase include "how to turn the light gray background into white", "How to offset 2 pixels here" and "the image and text are not aligned ", therefore, if you want to make the online effect 100% consistent with the visual draft, it is essential to go to the Technical GG School draft.

6. Launch

After the launch, you must pay close attention to data changes and make adjustments based on data analysis and user feedback.

7. Follow-up Optimization

Successful products are generated in the optimization iteration. This is a verification process from design to user data feedback and then back to design.

　　

 

.

　　

 

.

1. The visual style of the old homepage is outdated and needs to be fully packaged to improve brand recognition.

2. There are too many Forum sections and the product area cannot be better displayed.

3. the old version of the navigation bar is the second-level full-expanding navigation. The disadvantage of this full-expanding navigation is that the navigation bar will become longer with the increase of content, which will lead to a long navigation bar, which is not conducive to browsing.

4. The page layout in the three columns causes information congestion.

5. The interactive operations of carousel are not convenient enough, and the visual style is not concise enough.

　　

 

1. Re-extract the image color

When a user opens a page, the first thing that comes to the eye is the color. The importance of the website image color is like a corporate LOGO. A successful website image color should make the user think of the website as soon as they see the color. Therefore, the first thing we need to do in the visual revision is to extract the dominant colors. Only after determining the dominant colors can we expand other designs.

Product design should be rational and emotional. First, analyze user attributes rationally, and then grasp the trend of dominant colors. Next, let's look at the user data analysis of the photo school:

　　

 

　　

 

Based on the above user data analysis, we can see that the principal users of the School of printing are young women aged 25-31, with a bachelor's degree and income of 3 K-5 K. The consumption ability of such young female users belongs to the upper and middle level and has a certain aesthetic ability. Therefore, the key words of the Main Tone should be women, fresh, fashionable, petty, and energetic.

　　

 

The red saturation of the old version is too high. This large red color is too low to recognize and lacks quality. Finally, I chose a slightly lower saturation, a pink color, and a large white page. The new red looks both female and fresh, reaching the color requirements of the above data analysis.

2. Reschedule the Forum

Abandon official news, Weibo, buyer hot comments and other chicken ribs, strengthen the focus on carousel banner, product promotion areas and other important sections, so that the product area can be better displayed.

3. navigation bar

The original navigation bar information is messy and the icons are simple. The new version of the navigation bar is designed with text information as the main body, and the ICON is re-designed. It looks concise and refreshing, And the level-1 navigation bar is more conducive to later maintenance than the original level-2 navigation bar.

　　

 

4. Page Layout

The three-column layout can accommodate a large amount of information on a single screen, which is common in large portal websites. The position of the B2C app is different from that of the portal website, and there is no vast amount of information. Therefore, the product should be better displayed on the limited homepage space.

The layout of the three columns of the old version of the photo school looks visually crowded and chaotic. In a short time, it is difficult to concentrate on the key areas, and users cannot clearly follow the page rhythm for effective browsing. Therefore, we need to tailor the website positioning and capacity, and select a suitable page layout.

　　

 

　　

 

5. banner carousel

It can be seen that the operations of the banner carousel style in the old version are not user-friendly. The distance between the current frame and other frames is too long, and the cost of clicking back and forth is slightly higher.

　　

 

　　

 

　　

 

GG, a front-end engineer, showed me the carousel style test results in chrome/IE6 browsers. He found that neither of these two browsers fully support the carousel Effect of visual drafts, in addition, the style of advanced browsers and IE6 is very different, which is indeed depressing. After a headache, let's see how carousel on other websites is compatible with multiple browsers:

　　

 

　　

 

　　

 

　　

 

　　

 

Finally, you are welcome to visit the photo school yxp.163.com.