跳到正文
TV view聊聊吧
中文
全部作品

网页应用与仪表盘设计

Rei do Pitaco. 步骤简短的等候名单

一个博彩产品等候名单的注册流程:选择进入方式,分几个简短步骤填写资料,并确认邮箱。

简而言之

问题
一家梦幻体育公司正在推出一款博彩产品。它的候补名单需要带人完成注册、身份验证和邀请,并给出值得等待的理由。
我的部分
2022 年 3 月至 10 月,我作为团队中的产品设计师,为梦幻游戏和博彩产品的发布负责 UX 与 UI、交互设计、可用性测试、启发式评估和用户研究。
关键决定
在画任何界面之前,先把发布分成四个阶段:注册、身份验证、邀请和积分。之后每个界面只要求一件事,错误提示和每项要求的原因都显示在原位。
我的职责
产品流程与界面设计
项目状态
界面设计 · Figma 存档
黑色圆盘上的 Rei do Pitaco 标志。
Logo。

来自原始 Figma 设计文件的页面,使用示例数据。

我的贡献

2022 年 3 月到 10 月,我在 Rei do Pitaco 担任产品设计师,参与它的梦幻体育游戏,以及一款新博彩产品的上线。这份工作包括 UX 和 UI 设计、交互设计、可用性测试、启发式评估、用户体验研究和产品探索。

这个案例讲的是博彩产品的等候名单,从规划到登录后的区域。它背后的用户研究是另一个案例,需凭访问码查看。

录自 Figma 原型。注册流程,一次一个问题。示例邮箱已做模糊处理。

先梳理上线,再动手画

工作从结构开始:一份等候名单的站点地图,加上一条分四个阶段的主流程。注册把人带进来,KYC 确认对方是谁,推荐和分享带来更多人,积分显示他们排在哪里。之后的每个页面,都必须服务于其中一个阶段。

主流程:注册、KYC、推荐与分享、积分。
主流程,分四个阶段。
等候名单的站点地图。
这份等候名单的站点地图。

两种进入方式,一次一步

第一个页面把两种情况分开:创建新账号,或使用已有的 Rei do Pitaco 账号。回来的用户在这两个按钮下方有各自的链接,一个用来登录,另一个用来找回密码。

之后的每一步结构都一样:顶部是标志,接着是一个标题和这一步要填的输入框,底部是上一步和下一步,中间夹着三个进度点。CPF 这一步会在原处显示必填项错误,下方有一条说明,告诉用户这个号码之后不能更改。最后一步结束后,流程只剩一条消息和两个操作:重新发送邮件,或者关闭。

手机页面,有一张穿黄色球衣的足球球迷照片、Rei do Pitaco Betting 标志、两个注册按钮,以及用于登录或找回密码的链接。
注册的第一个页面把新账号和已有账号分开。
深色手机页面,要求输入 CPF,空的输入框带红色描边,显示必填项错误,下方有一条说明,另有上一步和下一步按钮。
身份这一步在原处显示错误,输入框保持为空。
深色手机页面,有全名、出生日期、密码和确认密码的输入框,两个确认复选框,以及上一步和下一步按钮。
最后一步收集账号信息和两项确认。所示日期为示例。
深色手机页面,有标志、一条说明邮件已发送的消息、一个绿色的重新发送按钮和一个描边的关闭按钮。
注册之后,流程要求确认邮箱,并提供重新发送邮件的选项。

把奖励讲清楚的等候名单

落地页只用一句话宣布这款新的博彩产品:“O betting do Rei vem aí!”,再配一个操作:留下邮箱,加入等候名单。页面下方的所有内容,回答的都是为什么值得这样做,首先是超过 R$ 1 百万的奖励。

接下来依次是奖励档位、积分规则和一个简短的常见问题,页面先把钱的问题交代清楚,再向用户提别的要求。

滚动浏览设计稿:等候名单页面,从奖励一直到积分规则。

注册之后,是一个倒计时

进入登录后的区域,上线始终摆在眼前:剩余天数、奖励阶梯,以及账号的验证状态。文件里同时有已验证和未验证两个版本,所以中途停下的人能看到还缺什么。

注册流程每个页面只问一件事:先是邮箱,再是姓名和出生日期,然后是 CPF,并用一条简单的说明解释为什么需要这个号码。

登录后的区域,有排名位置、积分和验证清单。
未验证账号的登录后区域。示例姓名和奖励已隐藏。