Alibaba Leather Website Design Summary

Amy: In the apparel market based on the leather dimension to the market strong marketing. From the material dimension to buyers Shopping Guide, to the leather as a heap head to create quality, leather as a push hand to promote the transaction, restore the offline leather market scene.

In terms of business needs, the leather will be made a relatively independent, to the dermis as the core, leather (tide element) as the pushing hands of high-end characteristics of the market. Because fur, leather by many women, so the feminization of leather also become an important label for the design.

On this basis, the characteristics of the market design should be distinguished from the traditional industry channel page, to maintain a relatively independent and outstanding wholesale characteristics.

In the previous design style exploration, we will disassemble the design of the leather to 3 directions, respectively: Color setting, texture application, structure typesetting.

1) Color setting

In the exploration of color, out of the limitations of web design. Collected a lot of mobile phone, marketing design, costume design works, including to the offline Mall to find inspiration for design. Try to use visual experience to create a high-end, female-oriented wholesale market atmosphere.

Analysis results: Purple with gold brown to foil the market atmosphere, matching leather products temperament.

2) Texture Application

In the use of texture, we need to find a new breakthrough point to explore the product's personality characteristics. Make it different from the traditional channel page, let the user refreshing.

Analysis Result: Take the flat design style. Arab designer Abu Naji that flat design is not just a fashion, but a "revolution against data Overload", a clean technology that changes too much detail.

3) Structural typesetting

In the arrangement of information structure, from the angle of user experience, we should control the information density and reading rhythm rationally, and highlight the marketing strategy of taking the leather as the leading role and enrich the market information.

Analysis results: The flexible modular structure is used to strengthen the information partitioning.

After grasping the big design direction, we use the Deconstruction method to implement the concrete design.

Simple understanding, deconstruction-and then composing. Famous architect Gehry once said: "Architectural design should have the same attitude as scientific research, that is, iconoclastic, rather than the repetition of the inherent concept." "Then, this approach applies to our design, that is, from understanding the business to breaking the inherent pattern of the framework, refactoring the page."

We mainly extracted 2 modules to analyze.

1) First screen design

Here is a common version of our interactive channel page.

You can see this module by the logo area, search area, navigation area, category area, banner area composition. The visual level of information is not clear enough if the direct touches are made into visual manuscripts. After adjusting the refactoring module, we get the following visual draft:

Compare the changes we made:

The original 6 modules were broken up and then combined into a regular 4 modules. The structure is more clear and simple.

1. Aggravated the proportion of the category, the default highlight women's classification, highlighting the operation of the main female market.

2. Enlarge the banner area. In the first phase of planning to increase visual impact, create a sense of leather brand. Sufficient cutting resources are also reserved for the two-phase planning.

3. Relative weakening of the navigation area. Leather city from the basic attributes, is an aggregation of drainage pages, we want to guide users directly generated transactions.

2) Industrial Belt module design

Interactive manuscript has 5 industrial belt, which highlights the exhibition of Guangzhou and Haining. You need to show 30 pictures in these 2 areas. If you do not refactor the page, it will eventually result in a bursting of information.

We make the design draft as:

Add tab switch to show all content flexibly. On the premise of carrying a lot of content, simple switch animation makes the page more interesting.

Here's how to comb this piece of design:

In the design of the page to create a musical sense of rhythm, it can effectively guide users in the reading when the rhythm of the "pause" to reduce reading fatigue. With the block design, it is helpful to perceive the information of different blocks, so that users can quickly locate and understand the whole situation. If you do not use the block design, you need to use more white space to create a rhythm, making the page long, resulting in a certain amount of user churn.

Banner Standard can reduce the production cost of students, can also control the unity of the page, so that ads better melt into the page.

Leather City data from the initial to the stable period presents a healthy upward trend. On line Initial Ctr is about 100%, stable after floating 50%, reach 150%-160%. UV-page in the stable after the maintenance of about 6000, more accurate than the initial launch.

Leather around the cortical dimension of the shopping guide, subversion of the apparel market by Category Shopping Guide mode. Its personalized highlights the characteristics of the apparel market, both the market innovation, but also to the offline leather industry to restore. Leather will further optimize and enhance the user experience in later planning iterations.