移动收银

背景介绍

移动收银是提供给美业店铺营业SaaS服务的一部分,是现有桌面Web平台收银在移动场景下的补充,一套集商品、服务收银、开卡充值、购买赠送优惠券和疗程、还款等服务的系统。但由于移动端的体验差,用户反馈不佳,使用率极低(日活用户仅个位数)。

在产品使用上抛出了一个问题:怎样提升实体门店与我们平台的粘性?

interest


了解我们的目标用户

为了更精准地定位和解决问题,我们先从目标用户开始,通过问卷、访谈等方式调研。

用户画像

《用户分析》

体验地图

《用户体验旅程图》

核心问题

无纸化收步骤银

在美容、美发、美甲门店,收银通常从服务开始前就已经发生了:助理先开单,顾客在服务过程中增加项目,发型师调整价格或优惠,最后再由员工完成结账。移动收银让这些操作可以在手机上完成,减少员工往返前台、记录纸单和事后补录的麻烦。

但旧版难以支持这种连续、可变的业务过程,主要存在三个问题:

  • 流程割裂: 搜索会员与选择业务交叉在一起;同一顾客办理不同业务时,需要返回首页、重新搜索。
  • 订单修改不便: 已选项目隐藏在购物车中,部分信息需要删除后重新添加才能修改;挂单后继续添加项目,也要重新进入开单流程。
  • 移动操作负担较重: 输入方式受限,关键入口不突出,部分点击区域过小,弹窗信息密集

如果要让门店用上移动收银,系统就需要适配门店的工作流。

所以本次改版的重点,先梳理从 开单到结账 的整个过程,围绕三个目标展开:让操作顺序更直观、让订单持续可编辑、让移动端操作更容易。


设计方案

1. 理顺入口

🤯 问题

旧版的操作顺序是:输入手机号 ⇢ 选择功能 ⇢ 搜索会员和选择 ⇢ 进入功能详情。用户输入手机号后,通常期待直接看到搜索结果,但系统要求先选择业务,容易造成困惑。

原流程的问题并不是单纯的“步骤多”,而是产品的流程模型与用户真实的任务模型不一致。

原流程概览

开单流程问题

开单流程问题页面

🤠 优化

用户真实的任务其实是:
找到顾客 → 围绕这个顾客完成一系列操作 → 最终完成交易

因此优化后,以“顾客”作为整个交易流程的核心上下文,用户进入会员后,可以连续完成开单、充值、开卡、还款等操作,而不需要反复回到首页重新搜索。

优化概览

优化开单流程

优化开单流程页面


优化的具体流程和交互

同时,提升了收银首页的输入体验:优化数字键盘的键位高度与布局,支持切换系统或第三方键盘,方便输入姓名及带字母的卡号,并增强散客开单入口的辨识度。




2. 重构开单页

🤯 问题

旧版开单页默认展示门店全部服务和商品,已选项目则藏在购物车中。但员工开单时更需要确认的是:当前顾客是谁、已经添加了什么、还需要调整什么。

开单主页问题

🤠 优化

以顾客作为开单的核心上下文,并对服务和商品按业务分类筛选,支持直接修改服务/商品价格、数量、优惠和服务员工,无需删除后重新添加。

开单过程中支持开卡、充值、购买疗程等相关业务也可从当前页面进入。添加项目和修改信息通过浮层完成,减少页面跳转,让员工更容易保持对当前订单的关注。

通过压缩关键任务路径、减少页面跳转和重复操作,将原本割裂的多步骤流程重构为连续的任务流,降低用户的操作成本与认知负荷。

这里解决的不是一个页面的问题,而是从根本上解决了:

  • 为什么要反复搜索同一个会员?
  • 为什么完成充值后还要重新开始搜索会员开单?
  • 我在哪里?下一步还能做什么?

开单主页优化




3. 打通待支付订单

🤯 问题

门店通常在服务结束后结账,开单与支付之间存在时间差。期间增加服务、调整项目或修改优惠,都是正常业务需求。

旧版待支付订单的添加入口不明显,继续添加项目需要重新进入开单流程;改价、选择员工和使用优惠的操作也分散在不同位置,按原有的流程会降低结账支付的效率,还增加商家的操作负荷和繁琐感。

增删改项目流程

待支付订单问题

🤠 优化

所以设计不应该把“开单”理解成一次性的表单提交,而应该把订单看成一个持续变化、可以随时编辑的业务对象。

在待支付订单中复用开单页的添加与编辑方式,使订单在结账前保持可编辑,缩短支付环节的操作链路,门店员工能更聚焦于结账订单本身,业务操作不会各种页面跳转。

会员信息同步补充,便于核对和更换;底部订单操作改为列表排列,增大点击区域与留白。

这样,员工在不同阶段处理同一订单时,可以沿用一致的操作方式,减少重新理解页面的负担。

增删改项目流程优化

待支付订单优化




4. 保持任务上下文

开单过程中经常会出现一些临时的关联需求,例如选择员工、设置优惠等。这些操作虽然不是当前开单的主任务,但又是完成当前交易所必需的。

🤯 问题

过去的方式通常需要新开页面进行操作,这会造成明显的任务上下文丢失,用户需要重新确认“我刚才开到哪里了”。

内容的信息密度大且没有做分类收纳,信息获取效率反而更差。

dialog-before

🤠 优化

通过弹窗 / Bottom Sheet 的局部任务承载方式,同时能将这些关联操作直接嵌入当前开单场景。

底部弹窗占窗口75%,同时对信息重新分类组织,减少浏览满屏信息带来的复杂感。

用户无需离开当前页面,只需在当前上下文中完成一个短任务,再立即回到原来的开单流程。

这不是单纯的“减少页面跳转”,而是:

通过局部任务承载,将辅助业务从“独立流程”转变为“当前任务中的一个动作”,保持用户的操作上下文与任务连续性。

dialog-after


总结

功能取舍

移动收银需要支持现场的核心业务,也要控制页面复杂度。在功能范围层面,移动端应该要求精不求全。一是指能够精准匹配大部分核心主要的业务,保证完整业务闭环和落地;二是用户体验和设计上的精细。

旧版已有商品与服务收银、充值和疗程销售,但还款、自定义疗程购买、推送收款等需求仍需补充。本次改版在理顺主要流程的同时,也为后续功能预留了入口。

取舍的依据是:这个功能是否在使用场景?缺少它,会不会让一笔交易无法完成?加入后,店员是否仍然容易理解和操作?

这样的判断有助于产品逐步完善,同时保持清晰的使用方式。

重构原则

本次改版设计从店员的日常工作出发,调整了操作顺序、信息展示和订单编辑方式。重点要考虑交互框架的拓展性和易用性,重新设计核心交互和流程,重塑移动收银的产品概念模型以符合用户的心智模型。

  • 贴近实际业务

    脱离实际业务的设计没有多大的价值,要以解决问题为原则;其次是不要一直陷在考虑美观层面,跳出来多思考更顶层的业务场景、真实的商业模式。

  • 提升效率

    提升收银开单和结账的效率,快速完成开单和结账,减去不必要的页面跳转和流程重复。

  • 增强产品交互框架的扩展性

    考虑后面有其它功能新增时,可以以最少的成本进行增量叠加。

  • 容错性

    减少操作失误的发生,即发生输入错误、选择错误等操作都可以用最少的成本修正。

  • 尊重客户已养成的使用习惯和认知模型

    好的地方要借鉴甚至加以优化使用,不好的果断要去掉。除非有更好的选择,否则遵循已有的设计原则和模式。

  • 移动优先

    原有的设计掺有不少桌面软件的交互和操作习惯,但这些在移动端上是极不友好和难以使用。


📮 到底了