← 返回作品

SGAG Media,HEPMIL Media Group · 2018–2019

Panik! by SGAG

一款将新加坡人对本地冷知识的热爱,转化为每周现金奖励活动的实时问答游戏应用。

已上线 iOS 与 Android
30 秒速览

要解决的问题

一档做进 app 里的直播答题节目:全部观众在周日晚 9:30 同时涌入,为真金白银而来,对界面毫无耐心。

我做了什么

负责 UI/UX 设计并用 React Native 实现——与开播倒计时赛跑的注册流程、推荐增长闭环、直播玩法状态,以及涉及真钱的页面。

结果如何

上线当晚 2,500 多人同时在线,以每周一期共播出 10 期,双平台应用商店上架。

PANIK by SGAG — promotional banner showing the trivia game app

项目概述

Panik 是 HEPMIL Media Group 首次尝试从社交内容业务拓展至自有产品:一档由 SGAG 自家出镜主持人主持的直播问答游戏节目,整合进一款移动应用中。玩家实时收看直播,回答十道关于新加坡本地冷知识与流行文化的问题,并与其他高分玩家共同瓜分真实现金奖池。上线首夜——2019年4月21日——超过 2,500 人同时在线参与,当晚的最高分玩家赢得了 729.02 新元。

我的角色

我与 SGAG 的项目经理及内部工程团队协作,负责应用界面的设计与实现。这意味着下面这些页面的 UI 与交互设计都由我负责——注册引导、推荐邀请闭环、直播答题玩法,以及账户相关页面——然后再用 React Native 把它们实现出来,让设计接受真实产品的检验,而不是停留在原型里。此外,我也为创意与制作团队开发内部工具,并完成了支撑上市计划的竞品分析。

Panik 的玩法

01

实时主持问答——节目每周日晚 9:30 直播,由 SGAG 主持人 Fauzi 与 Nadia 主持,将直播视频与实时游戏玩法结合。

02

十道题目,真金白银——玩家回答十道关于新加坡的冷知识与流行文化问题,每答对一题即可获得积分,答错不会被淘汰。

03

奖池滚动累积——最高分玩家共同瓜分一个起始为 1,000 新元的现金奖池,此外还设有「PANIK」附加轮:最快正确作答者可独得全部奖池。

04

提现门槛极低——获胜者可通过 GIRO 转账提现,最低提现额仅需 10 新元。

我设计并实现的部分

  • 设计直播答题玩法的 UI 与交互模型——题目卡片、作答状态、时间反馈——并用 React Native 实现这些页面。
  • 端到端设计注册引导与推荐邀请流程,从入口到兑换码核销,作为应用最主要的增长闭环。
  • 设计涉及真实金额展示、兑换与提现的账户与奖励页面。
  • 开展竞品分析以支撑产品定位,并与 SGAG 创意与制作团队跨职能协作,负责内部工具与制作形式。

背后的设计决策

Panik 是有开播时间的。下面的每一条,都源于同一个前提:观众在周日晚上 9:30 同时涌入,而且不会有耐心去研究界面。

01

与倒计时赛跑的注册引导

无论你准备好没有,节目都会准时开始,所以注册必须塞进「听说这个 app」到「第一题出现」之间。字段最少,推荐码可填可不填而不是强制拦截,新手教程也允许任何只想直接开玩的人跳过。

02

长在产品里的邀请闭环

增长靠的就是推荐机制,所以它被当作一条真正的流程来设计,而不是塞进设置里的一个条目:在「账户」里找到它、分享一个码、注册时兑换。三步,每一步都能单独看懂——因为分享的人得能在一条短信里把它讲清楚。

03

真金白银,状态不能有歧义

余额、PANIK 积分、两者之间的换算,以及 10 元的最低提现门槛,全都在同一屏上。当一个数字代表真实的钱,它可能处于的每一种状态——待结算、已兑换、可提现——都必须不看帮助文档就能读懂。

04

与节目共用一套语言

这款应用要与 SGAG 的荧幕形象、以及既有受众的预期并肩存在。界面既要让人觉得和节目是同一个 IP,又不能借用过多,以至于玩法控件不再像可以点击的控件。

直播游戏对界面提出的要求

01

倒计时就是界面本身

每题十秒,数千人同时作答。屏幕上的一切都必须一眼读完、不用看就能点中——字号要大到用余光也能识别,热区要大到让一根已经在移动的拇指也不会点错。

02

两个图层,一块屏幕

主持人的直播画面与可交互的游戏层共用同一部手机。游戏层必须压在直播视频之上,却不能把主持人埋掉——这为填充色、对比度,以及界面允许出现多少装饰性元素,划下了硬性边界。

03

状态必须瞬间落地

已锁定、答对、答错、被淘汰、仍在场上——每一种状态都需要一个不会误读的表达,因为玩家在下一题开始前只来得及看一眼,没有任何解释的余地。

04

奖池是情绪的锚点

真金白银的实时奖池,才是人们真正为之而来的东西。让奖池在每一轮都保持可见、可读,才能把一场问答变成值得准时守候的节目。

Panik 是我的第一款产品,也是我第一次在同一个项目里同时负责界面设计与实现。上面这些约束,是直播这种形式本身强加给界面的——也正是我至今仍偏爱实时、高压产品的原因。

我设计的页面

点击任意截图可查看原始大图。

邀请入口——闭环从「账户」页开始,因为来查余额的人本来就会经过这里。
分享邀请码——只有一个明确的操作,因为这一屏的全部任务就是被分享出去。
注册时兑换——邀请码字段就放在注册表单里,且非必填,绝不拦住第一次进来的玩家。
账户页——余额、积分、道具与提现门槛,按玩家查看频率排序。

成果

Panik 于 2019 年 4 月 21 日正式上线,首期节目吸引超过 2,500 名玩家实时同场竞技,并同步登陆 App Store 与 Google Play。节目以每周一期、共 10 期的形式播出——这是 HEPMIL Media Group 在社交媒体与内容业务之外推出的第一款自有产品。

「Panik 是我们打造自有产品、在数字空间聚集用户迈出的一步。每周一次,来和我们一起玩,享受这份乐趣。」

Karl Mak,SGAG 与 HEPMIL Media Group 联合创始人

产品细节已对照当年媒体报道核实: Vulcan Post ——《Keep Calm And Play PANIK》(2019年4月29日)

下一个案例: Carb Kun Carb