HOME
CN
Triton2Go：少思考，更流畅，更安心
重新设计UCSD的校园点餐系统的结账页面——让点餐流程更清晰、更便捷
Background
App简介
Triton2Go 是加州大学圣地亚哥分校的官方点餐App。学生和教职员工提前订购餐点以便在校园餐厅取餐。这个App原本是为了简化线下餐流程并减少等待时间，但我和我的组员同样作为用户，在结账时常常出现失误和感觉迷惑，非常影响点餐速度和心情。因此，我们的重新设计的页面专注于改善结账体验，以便为 UCSD 的校园社区提供更快、更清晰和更直观的订购体验。
Research
痛点陈述
结账体验的不足之处
我们的研究确定了三个主要的可用性问题，导致了混淆、低效和延误：
Lack of Quantity Feature
Users can’t directly modify item quantities in checkout, leading to repeated back-and-forth and longer edit times.
Unintuitive Payment Method
Payment options look alike, and balances (Triton Cash, Dining Dollars) aren’t shown — causing frequent wrong selections.
Inaccurate Waiting Time
The displayed pickup estimate often mismatches actual prep time, creating frustration and uncertainty.
改善整体用户体验
解决这些问题可以创造一个更顺畅、更直观的结账流程，提高用户满意度并鼓励重复使使用
提高用户留存率
更好的体验使校园内外的学生都能保持参与，让Triton2Go成为他们日常生活的一部分
Research
数据收集
为了识别Triton2Go结账流程中的问题，我们采用 Master–Apprentice（师徒式）模型采访了18为学生用户。这种方法让被采访者在执行真实的订单任务时像老师一样解释他们的思维过程，帮助我们捕捉到真实的用户痛点。
Research
采访流程
步骤 1 — 基本信息统计
了解用户背景（在校外/校内居住，学年，饮食习惯）
步骤 2 — 基于任务的问题
被采访者将完成定时任务：
添加/移除/自定义项目
更改支付方式
描述结账信息
步骤 3 — 任务后反思
收集关于可用性、喜欢或不喜欢这个结账流程以及对比其他点餐App
这个结构化的采访流程帮我们收集了行为观察和用户感知等重要信息
Research
数据分析
通过采访18个学生用户，我们通过分析，观察到了结账过程中常见的错误和不流畅操作，这些问题与我们最初的痛点猜测高度一致。
14 / 18 (78%) 人在结账时遇到了修改数量的困难
6 / 18 (33%) 人由于相似的支付条而错误点击
2 / 18 (11%) 人找不到移除商品的按钮
2 / 18 (11%) 人表示没有关于用户积分的运用规则
6 / 18 (33%)人表示显示的时间与实际取餐时间不匹配
5 / 18 (28%）人觉得的标题和布局设计不当，难以确认点餐信息
2 / 18 (11%) 人提出没有通往取餐地点的导航。
数据清楚地揭示了一个核心需求——用户在结账时希望拥更有把握、清晰度和信心。我们重新设计的页面正是围绕这些性质展开，通过更直观的交互、更清晰的视觉呈现和更完善的功能来满足用户需求。
Ideation
属性权衡
当然，设计不可能面面俱到，所以我们通过分析其他竞品，画出了Design Space进行取舍与权衡。我们分析了 类似的食品订购应用程序 — 如 DoorDash 和 Grubhub — 以了解它们如何处理结账交互。比较这些界面帮助我们评估 功能丰富性、直观性 和 信息密度，并确定 Triton2Go 的不足之处。
通过分析，我们讨论出两个关键权衡点：
功能丰富性
vs.
直观性
重新设计的结账流程在新增功能与易探索性之间取得了平衡，确保新功能直观易用，而不会让用户感到负担或困扰
重新设计的页面强化了视觉层级与内容分区，使页面更易于快速浏览，同时保留足够的细节，让用户能做出清晰的决策
可读性
vs.
信息密度
design
重新设计的方案要点
• 增强直观性 – 为操作提供指引，避免用户迷失。
• 提高可读性 – 建立排版的层次和视觉分区。
• 扩展基本功能 – 在同一页面编辑数量、显示所有支付选项和准确的等待时间反馈。
design
低保真设计
我们用低保真线框来设计层次结构和交互流程。这个阶段让我们能够优先考虑布局的清晰度和关键功能的位置，例如数量控制、切换支付方式和等待时间反馈
design
高保真设计
接下来将介绍每个界面元素是如何被优化 以增强可用性和一致性
design
重新设计的细节介绍
改进等餐时间预估条
预计等待时间不准确。预期与实际等待时间之间的不一致可能导致用户的不满和沮丧。
显示本订单前还有多少订单，用户可以更有效地规划取餐时间，从而减少与不准确的等待时间导致的厌烦感
餐品图标 & 数量调整
食品图标可以表示购物车中物品的类型，并减少用户识别和检查订购内容的认知负担
我们使用粗体和较大字体来显示项目名称，并为自定义的描述加下划线，以向用户提供更明确的可操作性，以便进行编辑
数量调整按钮
物品数量调整按钮有清晰的视觉指引，而非依赖用户记忆，有助于避免操作的错误发生。
更改支付方式
用户可以通过快速和简单的方式参考他们的账户余额来选择付款方式。与原始设计相比，新页面增加了账户状态的可发现性。
促销和积分图标缩小
我们用绿色和下划线强调打折券，让用户知道可以点击并展开该功能。并且缩小此功能的占位，留更多的位置给核心功能。
evaluation
总结反思
通过多轮测试与迭代，我们解决了 Triton2Go 结账流程中的三大可用性问题：支付方式不清晰、等待时间反馈不准确，以及数量调整受限。基于用户反馈与权衡分析，我们在功能丰富度、直观性与可读性之间取得平衡，打造了更顺畅的下单体验。
在“Double Diamond Design Process双钻模型”的引导下，我们通过用户分析与持续评估不断完善页面设计，移除不必要的视觉元素，并强化关键指示符，以提升交互清晰度。
我们计划开展更大规模的 UCSD 学生可用性测试，并探索与 UCSD Dining 团队合作，将重新设计的结账页面应用于真实场景。