E-commerce apps are applications that are frequently used on a daily basis. Every update and revision of them is not only to expand business and meet user needs, but also to lead and follow consumer trends.
Recently, many pages of Taobao App have undergone major changes. On the basis of analyzing the revision of Taobao, through the analysis of several key pages, the product design of Taobao, JD.com, and Suning.com is compared with the three comprehensive e-commerce platforms. This article can give everyone a deeper understanding of the product design of e-commerce apps.
1. Taobao revision
Taobao has undergone a revision a while ago, and this revision has been carried out step by step, and more A/B tests have been done.
1. Major revision page
The above picture shows several major revision pages of Taobao. From a visual point of view, it is obvious that the cards with large rounded corners and lines are removed, and the overall style is unified and lightweight. The large rounded card follows the style of iOS11 (especially prominent in the App Store), the card makes the information more focused and has a stronger sense of modularity; the rounded card itself also adds more details than the original card style; the large rounded card has a high affinity and is more Lively, but also in line with the positioning of Taobao crowd.
The picture above is a page with 5 tabs. This time, the color of the head is unified, the brand is emphasized, and the unity has also been improved.
The following is a redesign analysis from the perspective of a single page.
2. Personal home page
â–³ The old layout is a screenshot of New Year's Eve, and the color will not be discussed first
Comparing the old and new versions, it can be seen that the priority of 88 members and coupon packages has been improved, and the member information is more concentrated and prominent. This also confirms the popularity of the membership mechanism in the past two years. Consolidating old users can bring more value when the cost and difficulty of pulling new ones are getting higher and higher.
The new version of the card style is very prominent, removing most of the lines, and using block surfaces instead of lines to express the hierarchical relationship.
The icon style of the "My Orders" section has changed (version 7.7.2), from filled to line style, highlighting the number in the upper right corner of the icon, but this was changed back in the beta version (discussed later). ).
The scrolling presentation of 88 members and the latest logistics is really a dynamic effect to solve the problem. From the time axis, it solves the problem of large amount of information and limited space, and the dynamic effect increases user attraction.
In the beta version, this page mainly b2b data sees two changes, one is the icon is changed to the original filling type, the other is the rhythm of dynamic scrolling.
The problem with the icon is a personal guess because of the volume, importance, and location. The volume of the line type is weaker than that of the filled type. In the "My Taobao" page, the most important information is "My Order", so it needs a certain prominence. In addition, in the beta version, the advertisement of the traveling frog is placed in the fixed advertising space above "My Order". The prominence of this position causes it to weaken the "My Order" below and occupy the original "My Order". C-bit, so the beta version takes into account a more complete scene (with advertisements), thus changing the icon style back to the bulky filling style.
The dynamic scrolling is the 88 members and the latest logistics mentioned above. In the 7.7.2 version, the two scrolls are carried out at the same time, while in the 7.7.8 beta version, the two scrolls are staggered. Scrolling up and down at the same time can be a little confusing and can lead to the perception that the two pieces of information are related.
3. Store Homepage
A/B testing this piece. The store page has undergone major changes, and the navigation has been greatly adjusted. The new version fixes common operations and important functions at the bottom; the content in the secondary navigation allows merchants to customize the selection to meet the needs of different stores; the new version of the primary and secondary navigation is much clearer than the old version.
Let's talk about the A/B test this time. The test time is relatively long this time (from 7.7.2 to the current 7.8.2, a visual inspection of 8.0 should give a result). The major changes in the navigation of the store page will have an impact on the old users who have formed a habit to a certain extent, and the re-adaptation and learning of the page is somewhat similar to proactive inhibition (in cognitive psychology, it refers to the materials that have been learned before) Interfering effects on retention and recall of later learned material). The purpose of the new design is to facilitate users to learn quickly in the early stage, and to use it quickly in the middle and later stages. For the rapid use in the middle and late stages, it takes a period of time to get the data. This test should be to distinguish between different users. In short, it will test the learning of new and old versions by new users and old users, as well as their use after they are familiar with the new version.
4. Logistics details
This piece can be said to be a major change in style. Visualize the location of the package and the upcoming operations, enhance user perception (reduce the difficulty of understanding), and further enhance the sense of control over product information. It is much more vivid than the original text display, and the style is close to the order page waiting for takeaway. Visualization can display more information, but the speed of information transmission may not be faster than text when users are not trained, and different people's understanding of graphics will also be biased. However, many users have been educated on the page of the takeaway app, and I believe this understanding will not be too difficult. However, it is still necessary to gradually highlight the key points of information in subsequent optimization.