SEA Foreground App

SEA Foreground App

About

Garena Foreground App

The company’s front office, which urgently needs a system for registering visitors, will stop using the old third-party PC visitor system software.
Garena公司2015年终于搬到了位于oneNorth的新办公楼,美丽宽敞的公司前台,急需一个用于登记访客的系统,将停止使用旧的第三方PC访客系统软件,它使用起来也很复杂,

  • 旧版APP需要前台接待人员向来访人员询问,然后手动输入PC电脑
  • 旧版界面很繁琐,记录了很多无用信息,导致效率很低
  • 配合新公司环境设计,前台将换成Ipad

It is a registration system that every visitor to the company will use, representing the company’s service attitude towards customers. It means the company’s image and strength.
前台迎宾系统是每一位来公司的访客都会使用到的注册系统,代表着公司对待客户的服务态度,它代表着公司形象和实力

Selected Reasons

  • The COO of the company has praised this project since 2015 because the app is easy-using and intuitive
    这个项目从2015年之后,由于操作非常简单直观,受到公司总裁的称赞,成为看起来很“premium”
  • Up to now, it is still running, never changed its design. It is one of my best works.
    一直到现在都还运行,从未改过设计,生命力很强,虽然很简单,但却是我最好的作品之一
  • The first time I did Internal System UI design, I realized that a good UI design could have an impact on the company’s image
    这是第一次做Enternal System UI设计,才知道好的UI设计能对公司形象产生影响
  • I met the best partner in my career, Andrew
    第一次做IOS UI开发,认识了之后的好友,Andrew,之后每次的hackathon,都是和他搭档,记忆深刻
  • Experienced the IOS development powerful interactive animation function, since then began to focus on the learning of interact UI.
    体验到了IOS开发强大的interactive动画的功能,自此开始关注interact UI的学习

Our Team 

JiaXin

JiaXin

Position

Product Manager

Wu JiaJun

Wu JiaJun

Position

IOS Developer

Nic Cheung

Nic Cheung

Position

Product Designer

My role and activity

  • We are designing a large-size UI according to the IOS iPad system.
    根据IOS ipad系统,设计大尺寸的UI,
  • Redesign the entire UI flow according to the existing PM design UI flow, replace the old registration system, which can only run on PC, and keep communicating about its new needs
    根据现有的PM设计UI flow重新设计全部的UI,替换原来的只能在PC上运行的老旧的登记系统,并保持沟通对其新的需求
  • Ensure that the UI flow is effortless and accessible to all people, from children to the elderly unfamiliar with computers.
    保证UI的使用流程极端简单,并保证所有的人,从小孩,不熟悉电脑的老年人,都能无障碍,

This is the old register system

PM‘s Mockups

Challenges

Easy Control

To change the visitor to enter their information, the UI is required to be easy to understand and use
需要前台接待人员向来访人员询问,然后手动输入,现在要改成来访者自己输入信息,所以要求UI易懂易用

UI design

UX should be both streamlined and elegant, with complete functionality配合新公司环境设计,前台将换成Ipad IOS
UX既要精简优雅,功能要完整

 

User

There are three identities that people will use, employees, cleaning staff security, employees home visitors, which need to be easily distinguished in the UIUX
除了标准外来人员,还有三种身份的人会使用,员工,清洁人员保安,员工家庭参观者,需要在UIUX上很容易区分出来

Tough Time:2 weeks

Working on another important project, the Garena PC Platform, and could only find time to do the design.
开发的时间是两周,
我正在制作另一个重要项目Garena PC Platform,只能抽出时间做设计工作

My Process

Startup & learn

After communicating with PM, I first understood most of the requirements and then understood the use of scenarios
和PM沟通后,先了解了大部分需求,然后理解了使用场景是在公司前台,用来登记访问公司人员

UI Design

By making a mood board and determining the general style direction of the UI, we started to try to design the UI style.
通过制作moodboard,并确定了UI的大致风格方向,
开始尝试设计UI风格,因太久,没有留存moodboard

开始逐页的设计,发现一些UX问题,比如按钮要做的很大才行,去掉不必要的解释文字,

核心痛点逐渐被挖掘出来,把流程归纳成最重要的3个步骤来制作,减少用户注册时的烦躁,

Communicate

Mid-turn, PM urgently called it off because three registration types must be represented in the registration process.
中期,用XD制作基本的原型,和PM以及developer讨论可行性,并得到功能的修改

PM紧急叫停,因为有三种注册类型需要在注册流程中明确地体现出来,这非常难 

UI Review with Dev

After the completion of the post, the IOS developer modifies the details of the UI.
后期完成后,配合IOS developer修改UI的细节,保证最终的成品的字体、色彩、尺寸、动画效果和设计预期相符合

和Developer讨论了合适的字体

 

Major Design Decision

Material

Create a light UI style effect with the hairy glass effect.
用毛玻璃效果营造轻盈的UI风格效果

Control

Use simple, large, round buttons to guide the user’s vision and perform actions
用简洁,大尺寸的圆形按钮引导用户视觉,进行操作

consize

Simplify the original more than 4 steps to 3 so that users do not feel cumbersome
把原来超过4个的步骤,简化成3个,让用户不觉得繁琐

Colors by user Type

I use three colors to represent different types of users so that no matter which step, you do not have to can remind of the sort. 
使用3种颜色分别代表不同类型的用户身份,这样无论在哪个步骤都不用可以提醒类型,即弱化了类型信息提示对操作的干扰,也增加了UI的色彩美感,大大减少了文字的数量,在用户来看,UX复杂度也没有增加,

Can spark, often on the hard stone.

Learning

A

Learn From Quick Mission

Sometimes quick tasks can give us an excellent opportunity to learn
有时快速任务能给我们带来很好的学习机会,从那以后,我会时不时主动接受一些紧急任务即使它不在我的产品线,

No Rush & Keep Simply

The use of color is also a means of UI optimization.
功能越多,越不要着急增加文字说明,可以使用颜色等UI手段在不增加UI数量的情况下,依然保持优雅简洁的结构

Research Animation for interaction

IOS animation effects can make stunning and smooth UI animation effects.
IOS的动画效果可以做出非常优雅流畅的UI动画效果,这太有趣了!

w

Research Interaction Animation

In the mid-term, I should actively understand the changes in requirements to the PM and proactively demonstrate the phase results.
在中期也要积极向PM了解需求的变动,主动展示阶段性效果,否则容易错过最重要的功能需求,导致错误的工作方向

Thank you for watching!

Thanks to my two partners, although they have gone to different countries, I still hope to work together again. Thanks!感谢我的两位伙伴,虽然他们现在都去到不同国家了,但是还是希望再次合作,谢谢!

Thanks for Watching!

I'm Available for futrue!
Back to Portfoliohome Page

JS Live2D girl – 2nd ver

JS Live2D girl – 2nd ver

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

Chen Zhiming

Web Full Stack Developer, Taiwan

Harold Jew

Product Manager, Singapore

Nic Cheung

Creative Designer, Singapore

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