NetEase "World Cup star card" design project actual combat experience

Editor's note: Time to study! Many students are studying software and design theory, Wood has a company internship experience, job search is more difficult, small set to a suggestion, see large company's design project actual combat experience! For example today to share this article, NetEase classmate @neilyoung_ixd summed up the " World Cup star card "project experience, not only to understand the process, but also to steal division experience, why not?"

It's written in front.

It's a lucky thing to make a job of interest. The task of the inevitable PK and time is also a matter of urgency, because this is the value of the maximum embodiment of the time. Also should that sentence, good mentality only have a better scenery.

I believe that, like everyone else, every time you download a foreign application, you should be amazed. and rethink how they can do so well. In addition to open vision, dare to first, believe that lifestyle and work mentality differences also played a crucial role. Say a plump ideal. Foreign workers are working slippers on the feet, comfortable armchairs on the back, and beats on the ears. Sit down at a bar or watch a baseball with your family. The different mentality does the thing to be really different. Don't long-winded, hurry back to the project time is pressing, the demand heavy bone sense reality.

Project background

In the warm spring of March, took over the World Cup star card project. The main project is to create a star card activity platform. Let's start with a simple process: collecting cards through different channels--giving cards to each other--when you set up a team card, you can redeem the corresponding prizes. In addition, using the platform's parent frame series of the marketing department of the five-person football match, mobile Center Quiz World Cup, sports channel to find knowledge of the ball Emperor, brand joint marketing and other child activities.

Like a string of sugar gourd (forgive my putonghua is not good), the star card is a sign, and then the child activity is a hawthorn fruit son. Require the designer to do macro control, in addition to the immediate already confirmed the sale of several child activities, but also required when inserting new activities, can be a combination of hemp, no Shong feeling.

Introduction of Star Card

Star Card is in the World Cup, NetEase News client launched a virtual card, a total of 110 pieces, divided into 16 teams. Collect cards to achieve a certain achievement can redeem prizes. Just like with us as a child eat simply face, collect the margin of the entity card cards.

In order to make cards more worthy of collection, we invited the top Chinese illustrator to design the card characters and styles, but also invited the senior editor of the sports channel to each star to write a unique humorous profile, and attached to the attack, defense and other attribute values. Unfortunately, Ribery, Royce's star players who were supposed to be in the World Cup are quitting.

Design ideas

First, confirm that the platform of our activity is the mobile side and the PC side coexist. According to the news attribute of NetEase News client, the target users are divided into the following three kinds:

Expert fans. On the eve of the World Cup to know the information before the game, during the night to watch the ball, the day is willing to receive the relevant detailed event reports and lace anecdotes, gossip of the talk is also related to football.

Ordinary fans. Need to focus on the game of the match results push, by watching the news and highlights of the accumulation of talk, will focus on 3 or less teams.

Little white fans. The World Cup is not a cold, passively received the World Cup related news exposure, but do not dislike football news.

Under this setting, we conducted a World Cup user survey under limited resources. Expert fans and ordinary fans have expressed a willingness to participate in the World Cup interactive event, but if there is no incentive, it is not necessarily a long-term concern. And little white fans hold not disgusted with related activities, concerned about the specific prize attitude.

Combined with research and analysis and brain violence results, respectively, set the gold coin Quiz World Cup, see picture guessing words activities, and then match the card characteristics of the star card set five people football game, friends give each other star card, test your most like stars and many other activities. Making this activity more entertaining and enriching, the user's sense of participation and interaction is stronger. In addition to highlight the advantages of the mobile side, that is, fast (user time fragmentation, use of the scene is not stable), light (user participation threshold is low, no need to be in front of the PC, pick up the phone to participate), quasi (the entrance to the World Cup channel, targeted users).

This platform, whether visual or coding, is a large amount of work, hope that in the later time can be active form reuse, to maximize the use of resources.

Program Presentation and Features

The project lasted for two months. Back to the origin of the interactive design, I understand the role of the job is to comb the task process, the level of information on the layout, feedback and transitions and other details of the design, the final core is the demand for macro control and micro-focus.

In the Star Card activity platform this plan, because involves the page multitudinous, and the docking personnel many, therefore in order to facilitate everybody to read the prototype, reduces the communication threshold, first set the interactive demo specification. and has been extended to the group interaction specification, here is not to elaborate. Then further is the activity of the process to do the task comb. Relatively speaking, the user's path is still quite clear. The main process is: Activity home page (collecting card and redemption prizes)--My Star card bag (check his card situation, you can also directly redeem the corresponding prizes)-card details (you can view the card characters and large map, you can also sell cards, gifts and share to friends).

In addition, the emphasis is given to the consistency of the mobile version and the PC version, combining the characteristics of different terminals. Then use the mobile version of the focus, slightly deeper level. PC version information tile, the way to play the window timely. Create a class-responsive experience. So that the player can still experience near consistency on multiple terminals.

Comparison of competing products

Here is a simple comparison with the competition product scheme. The main is a comparison of several news clients during the World Cup interactive activities of the scenario. Tencent's "Ola Run" and Phoenix "shake a Lottery" have a good interactive effect.

Design Reflection

Mobile end of the interactive activities, the main two, one is the brand marketing interaction activities, one is functional interaction. At the beginning of the design of these schemes, it is necessary to have the target user set up and use the scenario planning. Conversely, even if the promotion again strong, users will not buy.

Written in the last

In the work of the most gratifying thing is that their work has been recognized by others, on the line, the enthusiasm of everyone to play I do not overdo the rendering. I'm really happy when I'm told that the PC version and the mobile version experience are the same.

Finally, a few words, the user experience to do is wins, not just a frame, arrange the Next button, play point dynamic effect. As mentioned above, it is more focused on the logical consistency of similar tasks (such as the exchange process for different types of prizes), on macro control in demand (framework rationality), micro-focus (button condition judgment).

Activity is only to promote ruthless-the prize is big, also need interactive elegance-visual stunning.