The homepage of the Xiaomi Mall APP has been completely revamped, and this upgrade not only pursues high-end visually, but also follows the design principle of “product-centric”, aiming to better focus on product selling points and improve the user’s purchasing experience by optimizing the layout and functions. This article will provide an in-depth analysis of the core ideas of the revision of the homepage of the Xiaomi Mall APP, including the optimization of the first screen layout, the details of the head revision, the adjustment of the banner diagram and the formulation of design specifications.
This year, the homepage of the Xiaomi Mall APP has made a new visual upgrade, which still adheres to the high-end design and follows an important design principle of “product-centric”.
Design principle – product-centric
Product-centered means that any design form gives priority to the expression of the product, focuses on the selling points of the product, and makes the driving force of purchasing behavior as much as possible from the product value itself. “Product-centered” is to express the brand, brand e-commerce is not only a sales platform, but also a base for brand image, starting from design to do a good job in product display, is to establish a good brand image.
Case analysis
Above-the-fold layout
Before starting the homepage design, the first thing to do is to design the homepage layout, which is like the keel of a boat, which has a crucial supporting role.
Xiaomi Mall is a self-operated brand e-commerce, unlike Taobao and JD.com, so the homepage cannot be as diverse as they and become a hypermarket.
The layout of Xiaomi Mall must first be high-end, simple and generous, strengthen the brand image, and at the same time meet the daily operation strategy.
In the end, I combined the click hot area of the user’s daily use of mobile phones to make a layout plan.
Combined with the user’s operating habits, the upper part of the homepage is mainly the role of “looking”, and the lower part is “operation”, so that the product operation strategy is consistent with the user’s habits, and the user’s experience will be better.
The product display on the banner mainly satisfies user browsing, because the click data here has not been high in the industry.
The following module is the diamond icon position, and the bearing function is a quick entrance to meet the user’s quick search operation.
Below is the daily activity area, where there will be activities every day, and it is also the place where the operation hopes that users can click the most, so it is placed in the most golden position in the hot area for users to click.
At the bottom of the fold, there are two organic traffic entrances, which can guide users to browse the content down.
Head revision
First of all, remove the old version of the harvest address, because it makes no sense to have your own harvest address here, and your own harvest address appears at the top, usually an instant retail platform, such as a vegetable seller or a takeaway platform.
In order to meet the operational needs of diversified operations, a new tab function has been added at the top, which can be configured with up to three tabs, supporting gif format, or without tab configuration.
If you do not configure the tab, the height of the header image will be adjusted and reduced to ensure that the header image is presented at a reasonable spacing.
When the page slides, the logo disappears, and the search box is elongated to the left, trying to avoid the visual interference of the logo’s prominent color on page browsing.
Tab can be configured with text, or images, text can be entered up to 3 characters, because space is limited, if you need four words, you can reduce the spacing between words through the form of pictures.
Three tab styles
Two Tab styles
Two tab-gif styles
Next, let’s take a look at the change of the banner diagram, as mentioned at the beginning, the design principle is “product-centered”, so the banner adjusted the left and right structures to center the layout this time, with the aim of making the product more prominent.
Centered typesetting can not only strengthen the display of products, but also because after adding Tab to the top, the head becomes complex with many elements, and the banner of left and right layout has weak visual expression, which cannot open up the visual performance contrast well.
The advantages are that the product expressiveness has become stronger, the title copy can be displayed longer, and the disadvantage is that the header image is raised, which reduces the screen efficiency.
For banner charts with different color depths, the top element has two themes: black and white, and banner charts with different light and dark colors can automatically identify the use of black or white.
In addition, the new product label on the banner image has been redesigned to better match the layout of the centered layout.
A very important change in the label is to change “new” to “new product”, the reason is simple, “new” does not have “new product” to give users more direct perception.
Let me analyze with you, the word “new” is a verb, and its meaning is a new product, which does not give this product a direct concept of a new product, because the new can also be understood as a new product after being removed from the shelves.
And “new product” is an adjective, he is describing the attributes of this product, which is a very direct expression, no need to explain, and users do not need to understand.
Develop design specifications
From the formulation of design specifications, it can be felt that the centered layout is very friendly to the display of the main mobile phones of Xiaomi Mall, and the mobile phones are usually arranged in a row in a variety of colors.
In addition, for slender products, they can be arranged in order from multiple angles to fully display the appearance of the product.
After the revision of the first focus, it also improved the efficiency of production, and the left and right structures of the old version had very low tolerance for the text length of the title.
Therefore, in the old version of the specification, for titles of different lengths, the title font size had to be adjusted accordingly, which was very time-consuming and prone to errors.
The new version is centered, which basically meets more than 95% of the length of the title copy, and the subtitle can also reveal more selling points/interest points.
The head picture is a big promotion
Rice Noodle Festival, 618, Double Eleven, Xiaomi Conference, during these promotion periods, the form of the head image will change, remove the banner form, and then change it to a more eventful huner (our proper noun, meaning to paste a face).
In addition, Huner also supports GIF format display, when it is necessary to emphasize the atmosphere, it will be displayed in the form of GIFs.
Here comes the point~
We all know that the height of the top status bar of iOS is higher than that of Android, especially the mobile phone models with smart guidance on iOS, which take up a lot of space.
This problem leads to the inconsistency of the display of the header image at both ends in the old version of the mall, and the final result is that Android is suitable, iOS is a bit of a header, iOS is suitable, and Android spacing will be very large.
As shown in the figure below, pixels of the same size are shown at different spacing at both ends.
In response to this problem, the new version of the design solves this problem through technical solutions, designing the header image according to the highest height of iOS, and then Android through the technical solution to do top cropping.
As shown in the figure below, the red color is the cropping area, and the cropping height is different for different models of mobile phones.
When there is no Tab, the head is similarly cropped, cropping more size.
This way, the spacing between the search box and the elements in the diagram can be consistent, and the Huner diagram and the Banner diagram are the same solution.
The spacing is the same
During the live broadcast of the press conference
The press conference is an S-level live broadcast and an important moment for the company, when selling goods is not the focus, but the moment when the Xiaomi brand establishes/deepens the emotional connection between the brand and users. Therefore, the position of the header image is given to the live broadcast, and at the same time, the layout of the new products released during the press conference, as well as the entrance to related activities, is convenient for users to purchase.
brief summary
The revision of Xiaomi Mall is divided into two parts, the above is a summary of the first half, and the second half has not yet been launched, so it cannot be shared with you for the time being.
A friend has been paying tribute to Xiaomi Mall, after the revision of Xiaomi Mall, maybe a friend business will not be able to keep up in a long time, and it is also an achievement to lead friends!
Finally – remember to like and pay attention to the gains of this sharing. The following two articles are also revised articles of Xiaomi Mall, one of which is the last homepage revision, if you are interested, you can take a look.
