会员系统上线两周之后,林晨开始写小程序的第二个版本。
第一版的小程序很简单,只有一个菜单页面和一个会员充值页面。界面是他用周末两个下午赶出来的,用了最朴素的UI组件,白底黑字,菜单排列像一张Excel表格。菜品名称左边对齐,价格右边对齐,中间用点号填充,整整齐齐但毫无美感。小吴第一天用的时候说了句这个页面有点丑,林晨回了一句能用就行,然后背起电脑包去t厂上班了。
但他知道能用和好用之间有一段距离。他每天早上打开小程序后台看数据的时候,能感觉到这段距离。菜单页面的停留时间只有三秒,客人点进来,看一眼密密麻麻的文字列表,没有图片参考,只能靠菜名猜分量和卖相。会员充值页面的跳出率也不低,百分之十八的人点进来没有完成充值就退出了。这些数字在后台报表里排成一行,每一行都在说同一件事:界面不行。
他在t厂的工位上打开小程序看了一遍,然后又关掉了。白天公司的事情排得满,FinGpt v4的迭代计划、客户需求评审、团队周会,每一件都比快餐店的小程序紧急。但紧急和重要不是一回事,他心里清楚。小程序是客人接触晨枫快餐的第一个界面,就像一个产品的首页,用户三秒之内决定留还是走。三秒留不住人,后面做得再好也没用。
周三晚上他回到家,洗完澡坐到书桌前,打开了小程序的开发环境。台灯的暖光照在键盘上,客厅里苏婉已经睡了,只有书房的灯还亮着。第一版的前端代码他全部推倒重写。菜单页面用了卡片式布局,每道菜一张小卡片,左边是菜品图片,右边是名称、价格和口味标签。图片是林浩做菜的时候他用手机拍的,厨房光线不太好,有些照片偏暗,但他在代码里加了一个亮度滤镜,调完之后勉强够用。口味标签他设了五个:辣、微辣、不辣、下饭、清淡。每道菜最多标两个标签,标签用不同颜色的胶囊框显示,红的代表辣,绿的代表不辣,客人一扫就能过滤掉自己不吃的。
会员页面重写之后加了三个模块:余额显示放在最上面,大号字体,跟充值成功时的提示风格统一;消费记录排在中间,最近十笔交易按时间倒序列出来,每一笔显示日期、菜名和扣款金额;积分明细放在最下面,当前积分、累计积分和抵扣记录分三行展示。
他还加了一个新功能:在线预点单。客人可以在到店之前在小程序上选好菜,选一个到店时间,提交订单,到了店之后直接报手机尾号取餐,不用排队等点单。这个想法来自他观察了三天的午高峰数据。每天十二点到十二点半之间,收银台前面排着七八个人,其中有百分之三十是在等点单而不是等出餐。这些人的点单时间平均两分钟,从看菜单到选菜到确认付款。如果这百分之三十的人提前在小程序上点好菜,到店直接取餐,排队时间能缩短三分之一。
预点单的流程他画了一张流程图贴在冰箱上。林浩早上来备料的时候看到了,看了一眼没说什么,但第二天他把灶台上调料瓶的位置重新排了一遍,把出餐最快的几道菜的配料放在最顺手的位置。他没有问林晨为什么要调,但林晨知道他是看了那张流程图之后自己做出的调整。
林晨在t厂午休的时候用公司的测试手机调了一下交互流程。他从客人的角度走了五遍完整路径,每一步都计时、截图、记笔记。打开小程序、浏览菜单、选菜、提交订单、选到店时间、确认,每一步的操作他都像跑测试用例一样严谨。第一遍他发现菜品数量选择器的加减按钮太小了,只有二十像素,手指粗的客人容易按错。他把按钮尺寸调到了四十四像素,加上了一圈浅灰色的点击区域,确保手指不会误触旁边的菜品。第二遍他发现取餐码的字体不够大,客人站在取餐口隔着玻璃隔断看不清屏幕上的六位数字。他把取餐码字号从二十像素调到了三十六像素,背景色从白色改成了黄色,数字用黑色粗体,在手机屏幕上一眼就能看到。第三遍他走完了支付流程,没有发现问题,从选菜到支付完成总共十四秒。第四遍他测试了会员余额扣减和积分增加的联动,发现了一个bug:余额扣减和积分增加不在同一个数据库事务里,如果网络断了会导致只扣钱不加积分。他花了半个小时修好了这个并发问题,把两个操作包进了同一个事务,要么同时成功,要么同时回滚。第五遍他重新走了全流程,确认没有问题。
修完之后他把小程序更新包提交了审核。提交审核的时候已经是凌晨一点了,他检查了三遍代码确认没有遗漏,才合上电脑。两天后审核通过,新版本上线。
上线那天是个周二。中午十一点半林晨远程确认了新版本在所有机型上都能正常打开之后,给林枫发了条消息:新版上线了,中午让小吴推一下预点单。
林枫回了一个字:好。
中午十一点五十分,小吴在收银台旁边摆了一个立牌:小程序点单,到店即取。小芳在每张桌子上放了一张名片大小的卡片,正面印着小程序的二维码,背面写着三行字:扫码点单,不用排队。字不多,但意思清楚。
前十几个客人还是老样子,进了门直接走到收银台前面报菜名。小吴在打完单之后加了一句:我们现在有预点单功能,下次来之前可以在小程序上先点好菜,到了直接取餐。
大多数人点了点头就端着餐盘走了。但立牌和桌上的卡片已经摆出去了,信息在传播,不需要每个人当场响应。
第一个用预点单功能的客人出现在十一点五十八分。林晨坐在收银台后面的板凳上看后台数据,手机屏幕上弹出了一条新订单:回锅肉一份,米饭一碗,手机尾号3721,预计到店时间十二点零五分。他站起来走到厨房传单口旁边,把订单小票打印出来递给林浩。
预点单。
林浩接过小票看了一眼,灶台上已经起了火。回锅肉是出餐最快的菜之一,从切配到出锅三分钟以内。他开始备料,五花肉从保鲜柜里拿出来切片,蒜苗洗净切段,豆瓣酱挖了一勺放在碗边。
十二点零三分,一个穿格子衬衫的男生推门进来。他走到收银台前面报了手机尾号:3721。
小吴在系统里查到订单,点了一下确认。厨房里林浩已经把回锅肉出锅装好了盘,从备料到出餐总共用了三分钟。小吴把餐盘从取餐口递出去,格子衬衫男生接过来的时候愣了一下。
这也太快了。他端着餐盘找了一张空桌坐下来,边吃边看手机上的订单记录。两分钟之后他在同事群里发了一条消息:科技园南区新开的那家快餐店可以提前点菜,到了直接拿,不用等。
第二条预点单在十二点十分进来了。第三条在十二点十三分。到十二点半的时候,后台一共收到了八条预点单。林晨在手机上拉了一下数据:八条预点单的客人从进门到取餐平均用时四分十二秒,同期堂食客人从排队到取餐平均用时七分半。预点单比堂食快了将近一半。
第二天的预点单数量涨到了十二条。第三天十八条。一周之后,预点单稳定在每天二十到三十单之间,占中午时段总单量的百分之十五。林晨在后台数据上看得到,每天十二点之前,有二十到三十个订单是提前下的。这些客人的到店时间集中在十一点半到十二点之间,比非预点单客人早了十五分钟。也就是说,预点单把一部分客流从十二点的高峰期拉到了十一点半的平峰期,错峰了。
翻台率从三点七提升到了四点零。这个数字意味着每天中午多翻了一张桌子。一张桌子一个中午多接待一组客人,一组客人平均消费二十五块,一个月多出来的营收大概在一千五到两千之间。加上晚上时段,全天的增量在三千到四千。
林晨把这个数据做了一张折线图,用微信发给了林枫。折线图上两条线,一条是上线前的翻台率,平缓地躺在三点七附近;另一条是上线后的翻台率,从三点七爬到了四点零。图的标题他写的是翻台率变化,没有加任何解读。
林枫看了之后回了一条消息:你写这个小程序用了多久?
三个晚上。
三个晚上值多少。
林晨没回。三个晚上写的代码换来的数字已经摆在图上了,不需要他再解释什么。技术是工具,不是答案。真正值钱的不是三个晚上的代码,是林浩的手艺让回锅肉三分钟出锅,是小吴在收银台前一句一句推预点单,是小芳每天早上把卡片摆上每一张桌子。这些加在一起才是一个完整的系统。
他关掉手机上的小程序后台,切回t厂的工作界面。FinGpt v4的模型有一个小参数需要调整,下午三点有个会要讲这个调整方案。两条线,来回切。午休结束前他还有十五分钟,他把折线图的源数据导出来存了一份备份,然后合上电脑,走回工位。走廊里的日光灯嗡嗡地响,有人端着咖啡从对面走过来,点了点头算是打招呼。