Tips for quickly and efficiently setting up and operating activities!

In the operation of activities, how can we efficiently build an activity homepage and promote user conversion while improving user brand perception? In this article, the author combines past operation activity design cases and compiles a strategy for efficiently building operation activities. Let's take a look, it may give you some inspiration.

1. Introduction

Nowadays, the operation activities of Internet giants are becoming more and more refined, and the gameplay is becoming more and more novel. From simple sharing gameplay to gamified activity experience, how can we attract more users to participate in activities and achieve operational goals such as attracting new users, promoting activation, and commercial revenue? This "secret" will combine the previous operation activity design cases of Baidu APP to briefly talk about how we can use limited time scheduling in our design work to quickly and efficiently build an activity homepage, while reducing costs and increasing efficiency, improving the brand perception of the activity and promoting user conversion.

First of all, we need to understand a complete set of operation activity participation processes, which includes users starting from the resource position, entering the activity homepage to participate in the activity, and finally realizing the full-link experience of the activity through pop-up windows, secondary pages and other content guidance.

The purpose of resource positions is to obtain traffic and attract user clicks. Therefore, in the design of resource positions, we will simply and roughly focus on means such as interest attraction or interesting creativity; and the event homepage is the most critical part of the entire event, and it is necessary to continuously maintain user stickiness to achieve conversion, which is also what we will talk about in detail below; pop-ups and secondary pages gradually guide users to complete a series of operations to enrich the entire event process experience.

2. What does the activity homepage of a large company look like?

Looking at the key operational activities of various nodes such as Kuaishou and Alipay, in addition to the sophistication of the design that has always been online, the framework structure, information layout and design elements of the activity homepage can be refined and summarized.

3. Three-tier architecture for quick assembly and operation activities

We can define the operation activity homepage as a three-layer structure: creative layer, skeleton layer, and dialogue layer.

Next, we will explain in detail the construction factors of the three-layer architecture and the specific contents of these factors. We will design based on this understanding to make page construction easier.

1. Creative layer

The creative layer is used to present static or dynamic theme images, or interactive gameplay entities, such as Monopoly gameplay maps, card displays for card collection gameplay, and question and answer cards for guessing and answering gameplay. This is the part where we need to focus on creativity in our design work. The creativity of different activities is different and flexible.

In the project process, it is usually necessary to first determine the general shape of the creative layer based on the main gameplay, place various functional modules in line with the general shape of the creative layer when designing the skeleton layer, and then enrich the detailed atmosphere elements of the creative layer to optimize the overall visual effects and screen effects of the activity page.

In the early stages of the project, we can use AI image generation tools to quickly generate different visual materials, from which we can obtain new design elements, color matching, and composition ideas, helping us predict the visual direction and quality of the event in advance.

2. Skeleton layer

The skeleton layer carries functional modules such as operation buttons. The skeleton layer of the first screen of gamification operation activities usually uses a "return layout" to make full use of the page space to carry functional modules, including title modules, main operation modules, sub-game modules (sub-game entrances, reward progress), and diversion modules.

Title module: usually includes theme header image, joint LOGO, auxiliary functions, etc. The layout style is highly versatile and suitable for all activities. It can be made into components for quick reuse.

Main operation module: It has strong guidance, strengthens the main button, and relatively weakens the peripheral operation buttons. The main operation area has the highest priority in the visual hierarchy, but the structure should not be complicated. Multi-function buttons seem to be rich, but the user's cognitive cost is high, which is not conducive to new users to get started.

Gameplay module: includes main gameplay auxiliary module and sub-gameplay module, which is used to present information such as current status and participation progress. It is usually highly motivating and comes with motivational copy and dynamic feedback. Sub-gameplay content should be carried in a semi-elastic layer as much as possible to reduce jumps and make the participation process more immersive.

Traffic diversion module: It is used for concurrent activities or commercial traffic diversion. Usually, the current activity page will pop up. Therefore, there should not be too many diversion positions. More diversion entrances can be displayed in rotation by queue or configuration. On the side of the circular layout, a certain amount of blank space can also avoid causing too much interference to users' participation in the main activity.

In addition, the brand design and material components of the event are also important parts of the skeleton layer. We can strip out the most basic components that make up the page and run through it, such as fonts, colors, symbols, materials, IP, animations, etc. These basic components will be used throughout the entire event process and are the cornerstones of building the interface.

1) Different fonts convey different personality traits. For example, for sports betting activities, it is more appropriate to use sans-serif fonts with an angle to reflect competition and professionalism; for travel or gaming activities, it is more appropriate to use more varied fonts with rounded corners to reflect ease and vitality.

2) Like fonts, colors are highly symbolic and will determine the temperament of an event. For example, red represents passion and enthusiasm, reflecting a lively atmosphere, and is suitable for events such as the Spring Festival and Valentine's Day; green represents health and comfort, and is suitable for use in medical operations.

3) Symbols play a decorative and auxiliary role in activities. When they are consistent with the meaning of the activity, they can become a visual hammer, nailing the language of the activity into the minds of users. Symbols are repeatedly used in activities, which not only strengthens memory but also increases the unity of the activity.

4) The material appears as the main visual prop and decoration on the page. Through the standardized setting and arrangement of the materials, a component that can be quickly called and conveniently maintained is formed, which can avoid the problem of repeatedly creating new styles in the same scene and enhance the unity of the event brand.

5) IP image has typical symbolism. It can enhance visual interest, quickly narrow the emotional distance between users, and promote psychological identification and positive emotions. Therefore, we must also learn to flexibly implant IP image in activities. Common scenes include interactive main visuals, pages that inspire feelings, pop-up windows that reflect emotions, etc.

6) Motion effects are often an element that adds the finishing touch to user experience, but it is also a relatively time-consuming process. In addition to customized visual motion effects for each activity, we can dynamically componentize parts of the page such as btn breathing, pop-up windows, half-layer rises, small hand guidance, page lighting effects, etc., allowing us to reduce the time cost of design and development in one or more activities.

Through the understanding and flexible use of the above modules and components, the construction of the skeleton layer can be more enriched and complete.

3. Dialogue layer

In the design of the operation activity interface, traction is very important. On the basis of the skeleton layer, the dialogue layer can increase interactivity, thereby attracting users to participate. Common forms of the dialogue layer include: tips, pop-ups, and wizards.

Tips: Bubble prompts can be flexibly attached to various modules of the skeleton layer. They are often used to display motivational copy at specific times in conjunction with gameplay strategies to guide users to click on the prompted object. It should be noted that at the same time, it is recommended that only one tip appear on the page to avoid distracting users.

Pop-up windows: Pop-up windows are the most commonly used components in the human-computer interface. In gamification operations, they can be divided into three categories according to the scenario: incentive pop-ups, retention pop-ups, and abnormal pop-ups.

When designing pop-up windows, we focus our design work on incentive pop-up windows. Incentive pop-up windows are used to guide users to complete a single task. Therefore, it is necessary to strengthen the interest points and main operation buttons of the user's task, and keep the remaining elements and buttons as far away or weakened as possible, so that the user's vision can be more focused and the guiding effect of the incentive subject can be improved.

Although motivational pop-ups have the strongest guiding effect, they can easily give users a sense of being blocked. Therefore, we usually incorporate activity IP and atmosphere effects into pop-up design to offset the negative feelings of interrupting users. At the same time, we also enhance the fun of motivational scenes and make appropriate changes locally to give users a richer and more diverse visual experience.

Wizard: Wizards are used for novice education. Different from product function wizards, in gamification operations, users often lack the patience to learn, so it is necessary to use lightweight wizards as much as possible. We commonly use three types of wizards: gesture pointers, step-by-step guidance, and non-modal dialog boxes.

In activities with simpler gameplay, the gesture pointer is usually used only once to indicate the key action buttons.

If the gameplay is a bit complicated, in order to avoid too many button functions making users feel complicated, you can use step-by-step guidance with gesture pointers to gradually display the skeleton layer and lead users to experience various gameplays one by one. It is recommended that the step-by-step guidance should not exceed 3 steps. If there is a lot of content to guide education, it can be divided into multiple stages or delayed to guide users to experience.

The non-modal dialog box is our recent new attempt. It can be integrated into the creative layer and can also guide the skeleton layer. It is a flexible and lightweight form of dialogue. When used with IP, the use of first-person and second-person copy can give users a stronger sense of interaction and make the IP more vital.

IV. Postscript

Faced with limited time schedules at work, it is very important to complete business needs quickly and efficiently. Through AI image generation tools and component decomposition, each important element is designed. At the same time, combined with the three-tier architecture method, the corresponding "building blocks" are put together like playing Lego, and gradually adjusted and optimized, and an operation activity page is formed.

Work efficiency is improved, and designers can have more energy to focus on the experience and details, and realize more commercial value of the design.

Finally, thank you for reading this far. I hope this "cheats" can inspire you.

Author: MEUX

Source public account: Baidu MEUX (ID: baidumeux), Baidu Mobile Ecosystem User Experience Design Center, is responsible for the full-link experience design of users/commercial products in Baidu's mobile ecosystem.