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
Position
Product Manager
Wu JiaJun
Position
IOS Developer
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
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动画效果，这太有趣了！
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!感谢我的两位伙伴，虽然他们现在都去到不同国家了，但是还是希望再次合作，谢谢!
