[Case Study] Details behind an H5 campaign with 130 million UVs revealed!
![[Case Study] Details behind an H5 campaign with 130 million UVs revealed!](/upload/images/67cc1b352e7fb.webp)
|
Hello everyone, we are the team responsible for the QQ red envelopes with 200 million cash on New Year's Eve this year. We have also done a lot of work behind this project. In addition to the important functional experience of "Everyone Swipes", we also made pre-promotion H5 on New Year's Day and New Year's Eve to inform users of the relevant information and content of this event and make users interested in this event. Preheating promotion will affect the number of users participating in the swipe event and their experience. Therefore, to create a good preheating H5, close cooperation between planning, technology, and design is required. So what does the designer do? Let me tell you this story... Baby is feeling a little sad "Would you like to work on the H5 to warm up the red envelopes for New Year's Day?" "Oh... okay~" When I took over this operation activity, based on my previous experience in operations, I expected that this demand would not be too difficult to handle. Soon, the operation planners came to explain and communicate the requirements to me. The communication was pleasant at the beginning. Then they told me that they wanted to do a warm-up H5 activity to inform users of the time to swipe red envelopes, and gave the following requirements and some risk points: This H5 needs to educate users on how to swipe, needs to tell users the exact time to grab red envelopes, who will send out the red envelopes, and needs to have a clear timeline. Except for the last page, the only interactive action is pulling down (clicking, swiping left or right does not appear). The picture needs to be exquisite (this is the general requirement). The entire timeline section should preferably be displayed within 3 screens, one of which should be the complete timeline. We hope to have content that stimulates users to share. It is difficult to finalize the specific stars, companies and total number of stars and companies involved in the event, and there may be multiple adjustments. There may be changes and adjustments before the launch date. … What the hell? When I heard it, I was totally stunned. This requirement seems to be a big challenge... A flash of inspiration? It's no use being confused, the real solution is to solve the problem through practical action. When I was in a state of panic, an idea suddenly came to my mind! To meet the various conditions mentioned above, then, just do this! So the following thing came out: This is simple and easy to implement, the operation is clear, the timeline is complete, and it is also very easy to adjust if modifications are needed in the middle. The above requirements seem to be met, hahahahahahahahaha... Such a "simple and complete" solution, of course~ First of all, as a person with aspirations, how can you be so casual? Furthermore, this time the demand is a promotional operation activity, which needs to achieve the purpose of attracting users to participate and promote it, so I personally think that it should have the following points at the design level: The information to be conveyed is clear. It should be related to the function to be promoted. The theme tone runs through the event (or hot spots or topics). The visual style and feeling have a sense of atmosphere and a certain visual impact. The whole event has highlights and some interesting creativity and details. Judging from these points, the so-called "solution" above is actually completely incompatible. To meet the needs of operation, we must also meet the requirements in design, so we should think seriously and down-to-earth. Officially started Topic Keywords First of all, we still need to determine the tone of the entire event. This operation is about the promotion of the "Swipe for Red Packets" function that QQ preheats on New Year's Day. Therefore, the theme keywords of this H5 should start from New Year's Day. However, New Year's Day is no longer a traditional festival in my country since the Republic of China, and there are not many reference points. Therefore, through discussion and combined with needs, we came up with the keyword: joy. Later, we brainstormed through the theme keywords. I thought of the happy scene when I played Monopoly game with friends in the past. Monopoly game can also be associated with red envelopes and money, so we used Monopoly as the carrier of the keywords and extracted elements to use in the design. As for the Monopoly game, it looks something like this: Screenshot from the game Monopoly 7 Relevance of functions to activities After determining the activity's tone and carrier elements, the next step is to consider how to link this H5 preheating with the "swipe for red envelopes" function. In addition to the red envelope element, users also need to be educated about the swiping action in advance, so the plan is to have only one pull-down interactive operation in H5, and through repeated pull-downs (which becomes swiping), users will be subtly influenced. In terms of actions, we base them on some common sense habits in life, and use the pull-down as a way to start the next step, giving users instant feedback (such as drawing open curtains, moving clouds, turning on lights, etc.), allowing users to feel natural and not abrupt in this H5. Finally, the video at the end of the H5 tells users intuitively how to participate in the "Swipe" activity, linking the function with the activity. In combination with what has been said above, we have also discussed the issues and details of sharing and adjustment and developed a plan. We will mention these points later. Let’s take a look at the entire plan first! as follows: …Well, since the sketch is too rough and hard to understand, let’s just look at the visual draft: Flexible adjustment The most critical part of this H5 is the timeline. Based on the above two points, we thought of using the map as a carrier to convey the specific celebrity and company information and time points of the event to users in a clear order. This is not only intuitive but also interesting. However, due to the timing, celebrity and corporate information, there will be strategic adjustments and investment issues before the launch, which will greatly increase the risk of rework. In addition, the design of operations often involves many things. Changing one place will involve several places (sometimes affecting the entire page or even the entire process). For this reason, I used this map to think of a design that can be flexibly adjusted to deal with the risks that may arise in this operation. I jokingly call it "building blocks assembly". The design process is as follows: As usual, make a sketch first (there will be differences between the sketch and the final plan)～～ Then the specific drawing begins. First, the basic map is drawn, and the basic modules are laid out to facilitate adding or reducing them later. The next step is to componentize the elements. This is the core of this solution. After assembling the elements, they can be assembled on the map like building blocks according to the modules mentioned above. The above is the effect after assembling the basic components, with the main route for placing companies and celebrities in the middle. After placing the stars and businesses, in order to highlight the main route and combine the feeling of New Year's Eve, the areas outside the main route are darkened to create a sense of atmosphere and make users more focused on the route (timeline). The corresponding time points are also made into components to highlight them and facilitate replacement. Through the "building block assembly" method, even if there are adjustments, they can be completed by adding and deleting components or changing their positions, greatly reducing the workload caused by frequent rework due to investment promotion and decision-making factors. Of course, drawing components and maps in the early stage is also a lot of work... But, after all, it was proposed by myself, and designers always have to pursue... share In order to let more users see and understand this h5, in addition to exposing it through various channels, another method is to stimulate users to share it on platforms such as QQ Space and Moments, and achieve exposure and create word-of-mouth through various relationship chains. I have summarized the h5 contents that can stimulate users to share into the following categories: rankings, test results, news hotspots, income, and personal data. However, they all have one thing in common, that is, they are all content information related to the users themselves. Therefore, we combine the relevant data of the red envelopes and package them to make users feel more involved psychologically (the WeChat platform cannot pull the information and will display it separately). detail Copywriter Copywriting is particularly important and is mentioned in many design articles, and the same is true for operations. In this operation, in addition to conveying the above-mentioned celebrity and corporate information and time points, the most important thing is to inform users that "12.31 at 7 pm, come to QQ to grab red envelopes." Therefore, you can see that this information is in a prominent position on almost every page, and the user's impression is strengthened through repeated emphasis. Loading and sharing masks Although loading is a part that can be skipped quickly, it still takes some waiting time when the network is poor or the signal is below 4G. This New Year’s Day h5 uses the detail of a bouncing red envelope to increase the fun and reduce fatigue. Due to the system of WeChat, a sharing mask prompt will pop up after clicking Share. We also made a small animation here to get rid of the monotonous text instructions in the past. Animation In addition to loading and sharing masks, we also used some dynamic effects to replace the monotonous transition in the entire H5. These dynamic effects make the entire H5 more dynamic and surprising, cater to the theme of joy and make the user's psychological feeling more smooth and natural. Phew~ The above is the design part of the entire New Year’s Day red envelope H5. The final experience of the entire h5 is smooth. Although there are many pitfalls in the middle, it is still quite fulfilling after solving the problems ~ Thanks to the hard work of the planners and technical friends... uh, it feels like something else is going to happen? “Oh, yes, there’s a New Year’s Eve red envelope later, just continue working on it~” “Uh, okay…” Sure enough, it wasn’t finished that quickly. Keep fighting The New Year’s Eve red envelope operation H5 is generally similar to that of New Year’s Day, with relatively consistent process operations. It can form a series and maintain consistent branding of the two red envelope activities. However, the requirements for New Year’s Eve are higher than those for New Year’s Day, so the picture processing should be more detailed than before, and the experience should be smoother than before. Unlike New Year's Day, New Year's Eve is a traditional Chinese festival, a day for reuniting with family to welcome the new year. This sense of New Year's atmosphere of returning home and reuniting is what we want to convey. After discussion, we decided to set the keyword for this theme as: warmth. Due to limited space, and the experience of just completing the New Year's Day H5, I solved many problems, so except for the design points that are different from the New Year's Day H5, the rest are directly posted in pictures. Here is the entire plan for New Year's Eve: Design process of New Year's Eve map: The previous New Year’s Day map had to use the entire map due to the zooming animations, which resulted in excessive resources. In addition, the left and right switching of the New Year’s Day map still made it difficult for users to understand the direction of time. After learning from the lesson, this time we used a long strip format, only taking the main route, reducing the size of resources, and the movement order was from bottom to top, making it easier for users to understand the direction of the timeline. Related components: Customized components: The main difference from the New Year's Day h5 is that this time it is necessary to customize components related to celebrities and companies, highlight their corresponding attributes and temperament, promote their brands to a certain extent, and improve recognition. Share content: There was instability when pulling the red envelope background data in the New Year's Day H5, and the inconsistent content seen on QQ and WeChat was indeed not a very good experience. Therefore, this New Year's Eve H5 combined some memes and used the "red envelope swipe gesture" as content to stimulate users to share. On the one hand, it strengthened users' awareness of "swipe", and on the other hand, since there was no need to pull data, it reduced the risk after release and ensured consistent experience on each platform. Animation: This time we put more emphasis on the atmosphere in the animation, so after entering from the homepage, we added a snowfall effect to make the scene echo the warm feeling we want to convey. I personally think the highlight of the entire H5 is when you reach the end of the map and red envelopes start to rain, you can see a wishing tree with red envelopes hanging on it. Its original dark color is lit up, representing a new beginning and the wish that all wishes will come true. This is roughly the design of the two phases of the event. Of course, in addition to the two main H5s mentioned above, there are also a series of promotional materials that come with them, and the entire operation is complete, but I won’t go into details here. During this period, after watching the two phases of the entire H5 being realized and launched online, I personally feel quite a sense of accomplishment~ Follow-up thoughts I personally think that the experience of these two H5s is relatively smooth, and they have achieved good results after being launched. This is due to the close cooperation among all parties. Thank you very much! At the same time, I have learned and realized a lot during this period of operation. I would like to share some relevant experiences and feelings with you: 1. Do a good job in the early stage of event planning Although these two phases of the red envelope preheating H5 were accompanied by many problems, from the perspective of the entire project cycle, I think it was relatively smooth. I think this is due to the good planning and arrangement work done by the early operations guys. Flexible time arrangements and timely adjustments ensure that the design and development work time is more guaranteed on the project. In addition, H5 planning gives a specific direction in the early stage and sticks to it, which avoids the situation in which the previous design often leads to major rework due to changes in direction. 2. Sketches/manuscripts must be produced before drawings are produced Nowadays, designers often directly produce drawings on computers in the preliminary draft stage. However, when it comes to the design of operational h5, doing so will most likely lead to starting over again, affecting efficiency, because the planner may not be able to quickly imagine the specific picture effects after communication. By quickly drawing the manuscript in the preliminary draft stage and providing relevant style references, the other party will be able to have a general understanding and improve design efficiency. 3. Be good friends with your developers! In such an H5 project, the planner controls the overall process and overall coordination, but in terms of cooperation and close coordination, the relationship between design and development is very important. Be good friends with the developers, communicate and understand each other. The designers understand the technical processing and difficulties, so as to avoid complex and difficult points as much as possible; the developers know the requirements and problems of the design, so as to find appropriate solutions. Only in this way can we cooperate and make good things more efficiently. 4. Have more insights into people and life In my opinion, the design of a good operation often needs to start from and consider the perspectives of human nature, life, etc. Through understanding human nature and grasping the psychology of users, we can achieve the purpose of operation. Through understanding life, we can extract relevant elements from our synaesthesia and experience of life and transform them into planning and design, so as to conceal or soften the discomfort caused by the means and let users resonate and feel natural in the process of experience. I believe that a good operational experience comes from continuous insight into and transformation of human nature and life. 5. Try to leave room for flexibility in your design when there is uncertainty Operational requirements often have certain uncertainties, and the resulting changes and rework have always been a painful and frustrating experience for those doing operational design. For parts that are uncertain or may need adjustment, try to leave room for flexible adjustment in the design as much as possible, so that even if rework is really necessary, comprehensive changes can be relatively avoided. Of course, it’s best if you don’t adjust it. 6. Still copywriting The importance of copywriting has been mentioned in many places, so I won’t go into details here. Operations require the power of copywriting even more. A good copywriting can really solve many problems and bring benefits. At the end of this article, I would like to mention the data (UV) of these two phases of operation, which seems pretty good: If you need ASO optimization service, please click this link: Introduction to ASO optimization service APP Top Promotion (www.opp2.com) is the top mobile APP promotion platform in China. Welcome to follow our official WeChat public account: appganhuo [Scan the top APP promotion WeChat QR code to get more dry goods and explosive materials] |
<<: Demand analysis for B-side product operations!
>>: Second-class e-commerce advertising | 15 product cases in 7 categories!
Recommend
What are the functions of Lanzhou's online activity mini program and the detailed cost of developing the activity interactive mini program?
Nowadays, various activities emerge in an endless ...
How to write a good article title for WeChat public account?
There is no doubt that the title of an article is...
How to use data to optimize channel delivery and achieve user growth?
With the disappearance of the new population divi...
Apple App Store Submission and Review Guide (Part 2)
Introduction: Apple's review is much more com...
How to write an activity planning proposal? Here are 4 tips for you!
If your boss is a fanatic about offline and onlin...
How much does it cost to develop a food mini app in Yangjiang?
The main factors affecting the price of mini prog...
Herborist live broadcast room operation strategy
It took only two short years for live streaming e...
2021 Xiaohongshu High-efficiency Marketing Manual
Xiaohongshu is a lifestyle sharing platform that ...
Price list for renting overseas server bandwidth configuration
The price list for renting overseas server bandwi...
How to improve the sign-in function and increase user stickiness?
One thing that people who work in operations love...
Analysis of the full activity of Zebra AI course APP for old and new students
1. Case Link Official website personal center ent...
7 mistakes in app user acquisition and 7 ways to avoid them
Exploring mobile applications is not an easy task...
How to build a product from 0 to 1: Growth
It is not difficult to find growth points for any...
Video Network Promotion Methodology
According to iResearch mUserTracker data, in 2016...
It turns out that the Apple developer account [Chinese registration entrance] is here. It is said that 99% of people don’t know it~
When Apple announced the launch of Search Ads, it...