Tencent practical case! How does QQ Sports upgrade user experience?

In this era of national fitness, more and more users are beginning to frequently use sports apps to record their sports data and share their personal training dynamics. QQ Sports is a long-established sports product under QQ. In the previous version, due to excessive reliance on the red envelope welfare system, it has gradually shown an unhealthy development trend in the past year and needs to find a new product form to get the product back on track. Therefore, with the continuous update of the market, products and users, how to break through the growth bottleneck, make it stand out from many similar products, and consolidate its own competitive advantages is the main topic of this official website revision.

User Analysis

QQ Sports is rooted in QQ, which has hundreds of millions of monthly active users. Therefore, at the beginning of the revision, we took stock of the users in the market and found that the user groups showed a clear polarization distribution, mainly in the two age groups of 16-24 and 40-60. After further analysis of the data, we found that the behaviors of the two types of users are also very different. First, the behaviors of users aged 16-24 are:

Serious exercise accounts for a large proportion of basic sports functions such as running and walking;

They have a strong desire for self-expression, pay attention to rankings, and have a high preference for heavy originality;

The high level of social activity is reflected in the large number of friends and active behavior in spaces and groups; secondly, the 40-60 year old users are generally stable and focus on functions related to their interests, such as bonus competitions, punching in to receive red envelopes, etc.

Differentiated positioning

After locking in the valuable target group, explore the product's advantages through competitive product analysis, user interviews, and data analysis.

From the perspective of user behavior, the 16-24 age group is more conducive to the healthy development of the product. Based on this, we take advantage of their love of sports, personalization, and strong sociality to introduce sports shows and create the product positioning of "sports shows"; at the same time, considering the characteristics of the 40-60 age group who focus on interests, we supplement it with functions such as red envelopes and bonus competitions.

Experience Insights

After clarifying the product positioning, we need to determine the quantifiable indicators corresponding to the product positioning, that is, the growth indicators. Taking the growth indicators as a starting point, it is easier to help us come up with a design direction equivalent to the product positioning.

The QQ Sports redesign project takes improving user activity and retention as two major growth indicators. We have formulated a long-term redesign plan around these two indicators. In the first phase of the redesign, we focused on optimizing sports tools, including: optimizing the official website homepage, running and walking, and step count details modules. The second phase of the redesign will focus on exploring social scenarios.

Design Execution

1. Design Methodology

QQ Sports product design emphasizes the design principles of standardization, consistency, and rigorous details. First of all, designers must consider both the stable user group and the unity between different modules, and also ensure the consistency of outputs from different designers and the fluctuations caused by data; the emphasis on rigorous details is because the number of users is huge, and they have already developed fixed behavioral habits, and the sports functions are relatively complete. Faced with the above situation, designers need to adopt a more large-scale and refined design strategy.

First, the QQ Sports brand image has a solid position in the minds of users, and its business lines will continue to increase. In order to avoid confusion between business and brand relationships and inconsistent experience, designers need to further optimize and improve the brand system based on the existing brand image; secondly, establish a unified UI component. The two contents are implemented in all business lines to form a large-scale design.

Secondly, designers use design skills reasonably to vertically create experience effects in five visual languages: graphics, colors, fonts, layouts, and animations to ensure the refinement of the design. For example, an operational font library is established based on standard fonts; in terms of animation, animation effects can be finely created from multiple dimensional scenes such as feedback, function, transition, fun, and atmosphere.

2. Brand design

The designer reorganized the QQ Sports brand system and created a visual framework for the entire business line, including standard logos, standard colors, auxiliary colors, standard fonts, standard operating fonts and auxiliary graphics.

3. UI Design

Optimize the homepage layout and focus on core functions

Re-arrange the functional priorities of the homepage. According to the product positioning and revision goals, we strengthen the perception of high-value functions such as sports tools, ensure the inclusion of banner revenue modules required by the business on the first screen, maintain the original status of auxiliary functions related to interest points, and strengthen the operational capabilities of homepage events, reduce the priority of low-frequency functions, and return low-value functions to the secondary page.

We use modular cards to prioritize functions. A modular card structure is used to carry the three sports tools of "step counting, running and walking". This allows information to be regularly integrated and displayed, reducing the user's understanding cost while ensuring the uniformity of the design side.

In addition, the card-style structure also has a natural advantage in guiding user behavior. Users are more likely to subconsciously slide cards to explore functions, increasing the exposure opportunities of subsequent sports tools.

In terms of visual design, the designer used the brand color and auxiliary graphics in the UI interface. In order to increase the sense of speed and power of the movement, the numbers are in a thick and tilted DIN English font, and the progress bar uses a hot rainbow gradient color, which strengthens the overall sports professionalism.

Optimize exercise records and improve user experience

Running is the core function mainly used by QQ Sports target users, and is also one of the key contents of this adjustment. We have optimized the UI and animation from the perspective of user behavior and usage scenarios.

Users who are running rarely stop to operate the APP immediately. When the phone is shaking and the user is probably tired, the probability of accidental touches may increase. Taking this into consideration, we have enhanced the feedback effect after touching so that users who are tired during exercise can pay more attention to whether they have accidentally touched the interface. In the design of some key functions, users need to be given reaction time to "regret". For example, ending a run is a decision that users need to think carefully about. We have designed two different operation methods for buttons with different functions: "short press to pause running" and "long press to end running". This prevents users from accidentally touching the button due to sweaty hands and other reasons, which leads to the premature end of step counting.

Considering that most users run outdoors, in this interface design, the visual contrast of interface elements is highlighted through the re-planning of colors, while strengthening the brand color of QQ Sports.

Optimize step counting details to enhance user stickiness

People keep exercising and record their exercise data, firstly to improve their real self and secondly to show others a better social self. In the previous version, the step count details page was mainly used to accumulate exercise data and help users focus on the growth of their real self. In the new version, we combined the original exercise data, check-in gameplay, and advanced system into one, hoping to enhance user stickiness by strengthening functions related to the social self.

Based on the original sports data, check-in gameplay and advanced system, we first determine the key information that needs to be presented on the homepage. As the core content of the step count details, important sports data is displayed, such as today's steps, target steps, distance and calories; the check-in gameplay is mainly used to drive users to persist for a long time, so it is necessary to display historical check-in status and accumulated high-value data, including the check-in calendar and three-dimensional check-in data; the advanced system is mainly for users to clarify their sense of purpose and provide opportunities to show their social self. This part achieves its purpose by showing check-in milestones and step levels.

Based on the above key information, we clarified the priorities and sorted out the information architecture. We divided the content of the step count details page into three modules - check-in calendar, check-in data and exercise data, and interspersed the advanced systems of the two dimensions in the corresponding modules. At the same time, the information architecture highlights the information hierarchy of functions related to the check-in gameplay, hoping to keep users active by guiding them to check in continuously.

The clock-in calendar is not only used to display historical clock-in status, but also serves as a time scale for exercise data. Therefore, the calendar is carried in the form of global navigation. It exists independently and is used to switch and display exercise data on different dates. After that, the arrangement of the content in the clock-in data module and the exercise data module is unified, and the priority of the two modules is determined according to the revision goals. In addition, the detailed exercise data is collected on the secondary page to facilitate the future expansion of the design of a data system with richer dimensions. After the new solution was launched, the retention rate of the step count details page increased by more than 50%.

The final complete design draft of QQ Sports Phase I is as follows:

Build UI components for quick management

QQ Sports is part of the QQ system, so during the componentization process, designers need to align with the design principles and specifications of the mobile QQ 8.0 version and add relevant elements that conform to the independent brand in specific application scenarios. Componentized management helps to unify the manuscripts output by multiple people on a daily basis. Subsequent designers will also continuously update and iterate component specifications according to the needs of new projects.

Project Summary

After the new version of the official website was launched, the click-through rate of the check-in function on the homepage increased by more than 60%; the homepage retention rate increased by nearly 20%; the advertising CPM increased by more than 700%; the revenue increased by 280%; the event click-through rate increased by nearly 400%; and the DAU increased by more than 110%.

In addition, the designer also precipitated and summarized the design methods, mainly including:

• The most important thing in design management is the underlying logic of the project, that is, product design thinking. Designers should stand in the direction of the product, clarify the real design goals according to the product characteristics of different periods, and then determine specific design indicators to quantify the design.
• The unified brand design thinking and "T" design execution method are applicable to all design projects. Designers should not only master the breadth of knowledge, but also work hard on the depth of knowledge. Therefore, designers need to constantly break through their own barriers and continue to grow.
• UI component management facilitates multi-person collaboration and improves work efficiency.

In short, today’s Internet design requires more and more professionalism. Designers cannot just play an executive role, but need to think beyond the design itself. From the perspective of the product, design can help products achieve the dual value of user experience and commercial realization, thereby increasing the total value of the product.