A review of the design process of the homepage of vivo's official website APP

What is the vivo official website APP?

The vivo official website APP (hereinafter referred to as the official website) is a built-in application of vivo mobile phones. It is the online official platform for providing vivo products/services/rights/information/community. It also plays an important role in accompanying vivo users from "purchasing a phone" to "changing a phone".

Therefore, the product experience and design quality of the official website largely determine users' perception of the vivo brand. Ensuring the design quality of the official website is a key link in ensuring positive perception of the vivo brand.

Why did the vivo official website APP homepage change?

As the business developed and iterated, the official website began to have problems such as inconsistent design and declining quality, which were particularly evident on the homepage. Therefore, the designer initiated a design upgrade of the official website, starting with the homepage to improve the uniformity and quality of the homepage interface.

From the user and business perspective, the key to optimizing the homepage container is quality

The official website homepage is positioned as "selected", aggregating products, rights, services, community and other content to meet user needs.

From the user's perspective, there are two scenarios on the homepage: 1. The top search and King Kong area are "clear purpose scenarios"; 2. The following content areas at the top are "no purpose scenarios". The former provides a function entrance to meet the user's clear needs; the latter displays content to meet the user's need to browse.

After long-term cognitive cultivation, the conversion of clear and fixed "function entrances" tends to be stable, leaving less room for optimization; while the presentation of frequently updated "content" affects users' impression of the vivo brand and their desire to browse, and determines the retention and conversion of the homepage. Therefore, optimizing the "container" to better present the content to users is the core of this design upgrade.

From a business perspective, this year's content operation of the official website homepage will focus on the concept of "people-goods-place", and push information (goods) to the corresponding users by analyzing user (people) characteristics. "Place" is the place where information is finally presented, that is, "container". The business side hopes to use more streamlined container rules to meet different "people-goods" needs, achieve "few styles" for "many scenes", build content display standards, and use more streamlined and easy-to-understand styles to let users focus on the information itself.

Chaos, abundance, and incompleteness are the core issues of home page containers

After checking the homepage, I found the following 3 problems:

1. Container style is messy

There are many styles of home page containers, and they are messy and there is no rule to follow. It is necessary to sort out the container design and define the standard in combination with product positioning and functional demands.

2. Information Redundancy

There is a lot of invalid information, such as meaningless information such as "independent display chip", and dense information in community posts, which all cause information overload.

3. Incomplete information display

The homepage often has incomplete information, which has a great impact on quality and users are unable to obtain effective information.

The official mall designs of leading brands all advocate "simple" aesthetics

After understanding our own problems, we analyzed the official stores of leading brands in each industry to understand the industry design trends.

1. Simple and intuitive impression

Looking at their homepage, the most intuitive impression that comes to mind is simplicity.

2. Where does simplicity come from?

A deeper analysis of its design reveals three core commonalities behind its simplicity:

Limited containers: The number of basic container styles is limited to no more than 3.

Limited information: Limit the amount and capacity of information displayed on the homepage.

Clear priorities: Pictures are the visual focus of the interface, supplemented by concise title/price/label and other text information. Most brands remove lengthy selling points.

3. The meaning behind simplicity

"Simplicity" is beautiful, but features such as concise information and plain colors are often characterized as "weak atmosphere" and "low appeal", especially in the sales field. So why do these brands introduce the "simple" design aesthetic into the mall interface design? This implies the cognitive psychology of consumers.

In the consumer field that pursues functionality and cost-effectiveness, products meet consumers' material needs, and the motivation for purchase is interest points such as function, selling point, and price. Therefore, in the design of traditional fast-moving consumer goods e-commerce interfaces, more emphasis is placed on the stimulation of consumer desire by interest points and interface atmosphere.

In the consumer sector that pursues high brand premiums, products meet spiritual needs, such as identity and value recognition, and purchase motivations revolve around product design quality and whether it conforms to one's own social attributes. Over-emphasizing interest points and interface atmosphere will affect the brand tone and weaken the brand advantage. The display of this type of brand products focuses more on the product itself, and the "simple" design aesthetics complement the brand goals.

Reshape vivo official website APP home page with the concept of "simplicity"

The results of the analysis of user cognitive patterns, business demands, and industry trends all point to the keyword "simplicity", which brings an orderly experience with rigorous logic, clear rules, and unified standards. It is hidden in the simple appearance, allowing users to experience the content more immersively. We call this concept of pursuing simple expression and orderly experience "simplicity", which will guide the revision of the official website homepage.

1. Container style sorting

Based on the concept of "simplicity", after sorting out and trying out solutions, the basic containers of the homepage are optimized into 3 categories:

Ad container

That is, the banner in the traditional sense. This revision unified the specifications, element composition, and text layout of all banners on the homepage, including the header banner/new product banner/interspersed banner.

Product Container

That is, the container for displaying products. The new version of the product container unifies the logic of the information architecture, limits the copy to 3 levels, and provides two forms: "combination" and "horizontal", corresponding to different scenarios.

The combined container provides two specifications with the same amount of information and can be freely combined according to business needs.

Horizontal containers are available in 1 specification. Choose "horizontal" or "horizontal sliding" according to business needs.

Content container

It is a container for displaying brand and community content. This container uses the information architecture of the above picture and below text, and can be expanded in different forms according to the scenario.

2. Information display optimization

After sorting out the container types, further optimize the information display to solve the problems of "information redundancy" and "incomplete information display".

Product Information

Take the floor for hot-selling products as an example: unreasonable information layout leads to incomplete display of mobile phone models; subtitles can be configured but there is too much text; prices are emphasized through color but there is no price advantage.

The new version of the information has been optimized as follows: the information layout has been optimized to make more space for mobile phone models and ensure complete display; the core selling points of the subtitles have been refined and emphasized using labels with limited word count; the price has not been emphasized to guide users to focus on products and selling points.

Community, brand information

Take the community floor as an example: the community floor on the homepage directs traffic to the official website community through selected content, and its positioning is an "entrance". The old version of the homepage directly lays out the community content, revealing too much information, which does not conform to the positioning and also causes information redundancy on the homepage.

Therefore, the new version of the homepage has been greatly streamlined, revealing only the most core "title/source/interaction status" information, and showing more community posts in a limited interface.

3. Visual rule optimization

Based on the container optimization strategy, detailed visual rules are further formulated.

The homepage of the official website is composed of containers of different sizes. In order to define the container specifications more scientifically, a grid is introduced.

For fonts, OriginOS’s custom font, Hanyi Qihei, is used to ensure readability and uniformity.

When designing the interface, we restrained the use of font size while accurately reflecting the information hierarchy. For example, the copywriting display of the container only used 2 font sizes to maintain the ultimate unity and simplicity.

Graphic language is also worth studying. The content information of the official website has a higher priority, and graphics play a supporting role. Therefore, graphic design pays more attention to whether the semantics are clear, whether the elements are unified, and whether the form is simple, rather than excessively pursuing differentiation. Based on the rounded and approachable attributes of the vivo brand and products, the official website's card corners, icons, labels, buttons and other elements are uniformly set to ensure overall coordination and consistency.

The color system is also built from 0 to 1. In previous iterations, the use of colors was based on the personal feelings of the executive designer and was not standardized. In response, the standard color card was redefined for the official website based on the vivo brand blue, including regular color levels, material color levels and gray levels, and the system guides color usage.

Based on the new container rules and overall visual rules, the effect after refreshing the homepage is as shown in the figure below.

It’s a conclusion, but not the end

The redesign of the homepage of the vivo official website APP took nearly half a year from pre-research, promotion, implementation to verification, and it took quite "complex" efforts. Our "complexity" is to provide users with "simple" design quality and product experience.

But this is not the end. After the homepage is revised, the global interface will be refurbished based on a new design language to comprehensively improve the design quality of the official website. We are on the way to empower the vivo brand.