About
GarenaLive is an exclusive live streaming platform for gamers with a Garena gaming account. GarenaLive players can earn coins through gifts from viewers, which can be exchanged for cash when accumulated to a certain level. About 600,000 players are active on Glive monthly, mainly in Taiwan, Vietnam, and Thailand.
GarenaLive是专属于Garena游戏玩家的专属直播平台，只要有Garena游戏账户，就能登陆观看别人直播游戏，或者播放自己玩游戏的直播社交平台，直播玩家可以通过观众送出礼物获得金币，金币积累到一定程度，可以兑换成现金。每天大约有25万玩家在Glive上活动，主要是台湾，越南，泰国。GarenaLive除了直播玩家自己玩游戏，也会定期举办/转播大型的Garena游戏比赛。
Why choose this product?
- It was all done by 3 of us. It’s tough to imagine! I finished all the design resources for this project, web site design, mascot design, gift animations, backend management system of the live platform, etc.
这是我第一次做直播平台，项目来的特别突然，因为是试验项目，人力给的很少，仅一个前端工程师，一个PM，一个设计师，所以这个项目到最后我去到shopee，都全部是我们3个人完成的，真的很难想象！我完成了这个项目的所有设计资源，网页端设计，吉祥物设计，所有的礼物动画，直播平台的后台管理系统等等 - I have improved my web design skills and learned a lot about web design, such as 12 grid, responsive web
这极大的提高了我在网页设计方面的能力，知道了很多网页设计相关知识，如12栅格，响应式网页 - I learned the front-end knowledge of HTML, CSS and JS from this project, and was able to finish some web animation effects by myself.
我从这个项目中深入的学习了前端知识HTML，CSS，JS，能自己完成一些web的动画效果
But only one thing need to tell you: Bullet Comments
- How to remove fraudulent ads, Certified chat rooms for malicious players
这次只说其中一个最精彩的案例：解决聊天室恶意玩家认证的问题
Our Team
My Role
- Creative Designer, vision & graphic
- HTML+CSS interactive animation，
The tough situation
Resource
With only three people to do the entire site
只有三个人，要做整个网站，但好在大家共同的努力经过2个月，完成了主要功能，在线人数还算稳定，大概12w人/天
Design
Many fake advertising pop-ups in the chat room, affecting the Barrage subtitle‘s experience of audience.
随着玩家快速的涌入，和弹幕功能的加入，在聊天室中出现了大量的虚假广告弹幕，影响了观看体验，
RVicious Ads
Ad pop-ups from bots and some players from other games came to the live channel to speak and have abusive speech
很多类似机器人的广告弹幕，还有些其他游戏的玩家来到直播频道发言，并有辱骂性言论，但谈论的不是该频道的相关内容，主要是用来引流，大致占全部聊天记录的8%，增加了80%，为了避免情况恶化，我们必须有所作为
- the vicious advertising barrage accounts for 8% in top10 broadcast chat rooms
- 75% are financial fraud, money laundering, and usury advertisements account
- 24% is porn content
My Process and Major Design Decision
Explore Question
I propose the use of answering questions, asking questions specific to the game. Only those who get all the answers to up to 60~80 questions will be able to send a screen barrage. Still, the function is done as long as the number of questions is a little more significant, and the order of the answers is randomized, filtering out the majority of robots and cheaters who know absolutely nothing about the game on their channel.
通过读取数据，我发现发送广告，有23%都是一些洗钱类的广告，61%是色情类，这些人要么对游戏一点都不懂，要么是机器人
为此我提出使用回答问题的方式，提出针对游戏的问题，只有全部答对率达到80分的人才能发弹幕，但是功能做好后，只要题库量大一点，并且随机答案排列顺序，这能过滤掉绝大多数机器人，和对所在频道游戏完全不懂的骗子，
Explore NPC
Answering questions is boring, and there must be relevant design to make answering questions interesting. There should be a friendly interface + graphic characters, like the NPC characters in RPG games.
探索，另外我也提出，做答题是枯燥无趣的，必须要有相关的设计让回答问题变得有趣，应该有亲切的界面+生动的角色，像RPG游戏中的NPC角色那样，
尝试绘制各种角色绘制，很不幸我的手稿都在adobe Sketch的cloud储存上，由于这个app不在存在了，所以云端的画稿全部都没有了，
我尝试使用2d风格放在界面旁边，但是因为没有互动，还是显得不生动，当时我就考虑如果角色NPC能和鼠标产生互动就好了，
Design
Trying to create characters with fake 3d effects.
Made the first character prototype and got her moving
I drew 4 styles of fairies and finally chose this green version that
divided into 24 layers, then driven by JS, and finally finished that我尝试用假3d效果尝试创建角色，制作了第一个人行，使用了JS的一个库叫做JS3d，使用他的函数构建了基本的测试，发现是能工作的，
接着我制作了第一个角色原型，让她活动起来，他的层数比较少，只有8层，他工作了
为了能和游戏风格匹配，要加入更多的游戏风格，并能兼容各种风格，所以我画了4种风格的仙女，最终选择了这个绿色的版本，
分成了24层，然后用JS来驱动，最终完成，
设计了游戏风格的问答UI，配合仙女角色，完工！
Develop Duration
The front-end directly uses 90% of the front-end code of my NPC
前端直接使用了我的NPC的前端90%代码，只在问题呈现地方用了node.j，用来引入动态问题数据库，
Chatroom
Major Design Decision
Based on the data, I proposed a solution to use the question module to increase the cost of sending time for malicious accounts to stop malicious pop-ups.
Using my experience designing games, I proposed to design the visual effect of answering questions in a way similar to the dialogue of NPCs in RPG games.
Using JS’s 3d web technology, I used a 3d pixie image to increase the friendliness of the question-answering module.
根据数据，我提出了用提问模块，来增加恶意账号的发送时间成本，来阻止恶意弹幕的解决方向
我利用设计过游戏的经验，提出类似RPG游戏中，NPC对话的方式，来设计回答问题的视觉效果
利用JS的3d web技术，用3d小精灵形象，增加了答题模块的友好度
Final Result
- We finally officially launched a month later, with an average monthly online population of 150,000w and 50,000 people active daily.
我们最终在1个月后正式上线，月均在线人数150w人，日活跃5万人， - After Pixie went online, the malicious pop-ups bullet comment almost disappeared. The data shows that it is about 2/1000, mainly in Thailand, because his game account registration rules lead to some unavoidable telecommunication loopholes, such as the ability to register phone numbers without ID cards, etc. The underlying reason is that the time cost of placing fraudulent ads increased by 60 times, and the malicious information was regular pop-ups. The data is recovered, and the percentage rate accounted for is significantly reduced.
小精灵上线后，恶意弹幕直线减少，减少到几乎没有，数据显示是2/1000左右，主要在泰国地区，因为他的游戏账号注册规则导致有一些无法避免的电信漏洞，比如不需要身份证就能注册电话号码等等，其根本原因是投放诈骗广告的时间成本增加了60倍时间，恶意的信息被正常的弹幕信息稀释掉了，所占百分比率大大降低 - Every day there will be about 100 players to complete the Q&A hosted by the fairy lady.
每天会有100名左右玩家完成仙女精灵主持的问答，对了，这个问答每个玩家账号只会见到一次哦！所以大家都称他为彼得潘的精灵
My Learning
Research By Data
The analysis played a key role in this case, and if I encounter similar problems afterward, I will be the first to look for clues to the data.
数据分析在这个案例中起到了关键作用，之后如果遇到类似的问题，我都会第一时间去找数据的线索，
Brounding Thinking
To package and beautify the original user experience with game thinking.
需要跳跃思维方式来解决问题
要用游戏思维去包装和美化原来的用户体验，即用户体验是要最终由美丽的UI视觉来包装，才能最终达到目的的，俗称“卖相要好”
Learning FrontEnd
Front-end knowledge can strongly support the designer
学习前端知识能强有力的支撑设计师在团队中的地位，能得到尊重，自此开启了我继续学习HTML+CSS+JS的学习旅程
misunderstandings
Write code that sometimes puts pressure on the front end to show that I am only doing visual CSS + JS, and there is a need to let them understand through communication.
自己直接写代码，有时会给前端带来压力，要表明自己只是做视觉的CSS+JS，有需要通过沟通让他们了解自己不是想取代他们的工作或者是不信任他们，避免误解产生
“Thanks to those players and colleagues who provide us with data, it is your efforts that make it possible for us to solve the problem accurately.”
感谢那些为我们提供数据的玩家和同事，是你们的努力，我们才有了准确解决问题的可能。
