Catch A Cat!
现有的 Chatham Area Transit（CAT）公共交通网站在信息层级与用户体验方面仍存在优化空间。随着用户需求的不断变化，网站亟需通过体验升级，提升信息获取效率、服务便捷性与用户满意度。
本项目以用户为中心的设计方法为基础，对 CAT 公共交通网站进行重新设计，重点优化信息架构、页面导航及核心操作流程，打造更加现代化、便捷且符合无障碍设计原则的数字化平台，帮助用户高效完成公交车票购买、线路查询及公共交通信息获取等关键任务。
-
我们如何通过网站体验优化，打造更流畅、高效且具有包容性的公共交通服务体验，让不同用户都能便捷、快速地获取信息并完成出行相关操作？
-
围绕用户购票与信息查询场景，优化票务信息架构、支付流程、优惠信息展示及视觉设计，提升信息可读性与操作便捷性，降低用户决策成本，打造清晰、高效且符合无障碍设计原则的数字化购票体验。
-
通过优化信息呈现、明确内容优先级、完善导航结构，降低用户的认知负荷，提升信息获取效率与操作便捷性，进而增强用户参与度与整体使用体验。
-
通过精简导航栏结构、优化线路搜索功能、明确按钮的视觉层级与交互指引，提升用户查找信息及完成关键操作的效率。同时，统一各页面与首页的视觉语言及交互规范，确保界面一致性与操作连贯性，打造清晰、直观且易用的网站体验。
Tidy Inn
Now, let’s see how we got there…
Now, let’s see how we got there…
设计流程
1.头脑风暴、方案设计与迭代
为深入了解现有 CAT 网站的用户体验问题，团队首先邀请 10 名参与者开展初步用户研究，识别网站在易用性、信息获取及交互体验方面的关键问题，并收集用户反馈，为后续设计方向与迭代目标提供依据。同时，结合研究结果，进一步细化目标用户群体及年龄分层，明确不同年龄段用户的需求与使用特征，为更具针对性的体验优化奠定基础。
2.现有网站体验分析
通过对 Chatham Area Transit（CAT）官方网站进行系统性分析，结合前期用户研究结果与行业设计实践，识别现有网站在信息架构、交互体验及无障碍设计方面的优化机会，并制定针对性的设计迭代方向。首页布局优化
导航结构优化： 调整导航栏的尺寸、色彩及功能排序，将原有双行导航整合为单行布局，精简界面结构，强化核心功能入口的可见性与导航效率。
首屏信息层级优化： 保留品牌背景视觉元素，同时计划缩减首屏图片的展示面积，增加核心功能区域的可见空间，引导用户向下浏览并快速定位关键服务信息，减少对顶部导航的依赖。
线路搜索优化
地图交互与信息展示优化： 计划扩大左侧线路搜索区域，增加可同时展示的信息量，并参考 Google Maps 的交互模式或探索直接跳转至 Google Maps 的方案，降低用户的操作学习成本。
功能入口与交互优化： 将右侧功能区域重新设计为更清晰的按钮式布局，强化可点击元素的视觉识别与操作指引，提升功能的可发现性与使用便捷性。
购票页面优化
导航一致性优化： 统一购票页面与首页的导航栏设计，保持视觉样式与交互逻辑的一致性，帮助用户快速返回首页或切换其他功能，提升跨页面操作的连贯性与便捷性。
移动端购票信息优化
APP 下载入口优化： 在移动端购票介绍区域新增 APP 下载二维码，强化下载入口的视觉识别，方便用户直接扫码获取应用，简化从网页浏览到移动端购票的操作路径。
票种信息展示优化
用户反馈驱动设计： 根据用户访谈反馈，发现部分用户更倾向于在同一页面直接浏览所有票种的详细信息，而非逐一点击查看，以减少重复操作。
票种信息架构优化： 基于用户的信息获取习惯，提出集中展示票种详情的优化方向，减少不必要的页面跳转，帮助用户更直观地比较不同票种，提升购票决策效率。
3.双版本高保真设计
为探索更优的用户体验方案，团队针对网站首页与车票购买页面分别设计了两套高保真方案，从页面布局、导航结构及视觉呈现等维度进行差异化设计。两套方案重点围绕信息可访问性、票种信息展示及浏览操作效率展开，通过对比不同的信息层级、交互流程与视觉设计策略，探索更符合用户需求的解决方案，为后续设计验证与方案迭代提供依据。
4.用户测试
本阶段的用户测试主要围绕两个核心维度展开：购票体验（Purchasing Experience）与视觉偏好（Visual Preference），通过真实用户反馈验证不同设计方案的易用性，并为后续迭代提供依据。
A/B 方案对比测试
团队邀请 13 名年龄在 20–35 岁之间的参与者（包括学生与设计师），针对 CAT 网站的不同设计方案开展对比测试，重点评估页面视觉设计、任务流程及整体使用体验。任务流程评估： 收集用户在网站导航、信息查找及购票相关任务中的操作反馈，识别潜在体验问题。易用性与功能验证： 评估不同设计方案的功能可理解性、操作便捷性及整体易用性。设计方案对比： 分析用户对不同视觉布局与交互方式的偏好，为设计方案的选择与优化提供依据。反馈驱动迭代： 根据测试结果识别关键改进方向，针对性优化页面设计与交互流程。
视觉设计偏好调查
团队邀请 27 名用户参与视觉设计偏好调查，针对两套设计方案的界面布局、视觉呈现及信息可读性进行对比评估，收集用户对不同设计元素的偏好与反馈，为最终方案的优化提供依据。视觉偏好分析： 对比用户对不同页面布局、配色方案及视觉元素的偏好，识别更受认可的设计方向。界面可用性评估： 收集用户对信息清晰度、功能识别度及操作直观性的反馈，分析不同视觉方案的优势与不足。数据驱动设计迭代： 结合问卷结果与具体反馈，优化界面视觉层级、信息呈现及交互细节，使最终方案更贴近用户的实际需求。
页面导航与信息层级
交互引导优化： 增加页面滚动提示，帮助用户识别下方可浏览内容，并通过阴影与对比度调整，强化关键界面元素的视觉层级。
内容布局优化： 将「Did You Know」模块调整至页面更靠前的位置，优化新闻动态模块的图标设计，并重新梳理页脚的信息层级，提升页面整体的可读性与导航清晰度。
用户反馈与设计迭代
通过对两套设计方案的用户测试，团队识别了各版本的优势与待改进之处。结合多数参与者的反馈，整合两套方案中更受认可的设计元素，进一步优化视觉呈现、导航结构与操作体验，形成最终迭代方案。
线路搜索体验
周边线路信息展示： 优先呈现距离用户最近的公交线路，并明确标注公交车与用户当前位置的距离，提升线路信息的实用性。
线路覆盖范围可视化： 在地图中展示公交线路经过的区域，帮助用户直观了解线路覆盖范围，辅助出行决策。
购票页面体验
移动端购票引导优化： 用户测试发现，APP 下载提示位于页面较深的位置，且网页购票入口更加突出，导致部分用户误以为必须使用移动设备才能购票。建议将 APP 下载说明调整至票种选项下方，明确不同购票方式。
购票信息精简： 减少冗余说明文字，优化内容层级与信息呈现方式，降低用户理解成本，提升购票指引的清晰度。
票种分类与选择
筛选功能合理性评估： 鉴于当前票种数量有限，用户反馈认为额外的筛选功能并非必要，可考虑简化操作流程，避免增加不必要的交互步骤。
票券交互反馈优化： 在票券悬停状态（Hover）下展示更多详细信息，帮助用户快速了解不同票种的特点，减少重复点击。
优惠信息识别优化： 通过红色价格突出显示折扣后的票价，并为第二版中的半价优惠图标补充文字说明，提升优惠信息的可理解性。
详细页面展示
首屏视觉设计
品牌视觉一致性：将公交卡视觉元素融入页面设计，强化品牌识别。信息层级优化：通过字体、排版及视觉对比，突出购票相关信息。核心任务引导：帮助用户快速识别购票入口与页面功能，减少信息查找成本。
核心体验设计 - 购票页面
APP 下载引导区域
信息分区优化：将品牌宣传与 APP 下载信息分开展示，建立更清晰的内容层级。交互引导优化：通过滚动提示提高下方内容的可发现性，帮助用户理解页面仍有可浏览内容。
票种分类与筛选优化
票种筛选优化： 新增票种筛选功能，简化车票查找与选择流程，帮助用户快速定位符合需求的票种，提升信息获取效率。票券卡片视觉优化： 重新设计票券卡片的视觉样式与信息层级，统一界面设计规范，提升信息可读性与整体购票体验。
信息展示层级优化
用户反馈驱动优化： 根据用户反馈，发现用户进入购票页面后更希望直接查看可购买的票种，而非优先浏览购票方式介绍或联系信息，因此重新调整页面内容优先级。信息架构与布局优化： 将购票指引及相关介绍移至票种分类区域下方，优先展示核心购票选项，减少非关键内容对购票任务的干扰，帮助用户更高效地查找票种及获取所需指引
核心体验设计 - 首页
顶部导航优化
强化首屏导航栏的视觉层级，提升核心导航入口与搜索功能的可见性，帮助用户快速定位所需信息，优化页面导航与信息查找体验。
欢迎介绍区域优化
通过精简文字内容与优化排版结构，提升页面信息密度与可读性，帮助用户快速浏览并理解网站介绍，降低信息阅读成本。
核心功能区域优化
交互引导优化： 强化四项核心功能的可点击视觉提示，明确交互入口，引导用户进一步探索相关内容，提升功能的可发现性与操作直观性。视觉层级优化： 通过区分上下区域的背景设计，强化内容分区与信息层级，提升页面结构的清晰度与整体浏览体验。
行程规划功能优化
用户反馈驱动设计： 根据用户反馈，发现更多用户倾向于熟悉且易于操作的 Google Maps 风格界面，因此参考其交互模式优化行程规划功能，提升用户对操作方式的理解与接受度。降低学习成本： 通过沿用用户熟悉的地图交互逻辑与界面布局，减少用户适应新界面所需的时间，提升线路查询与行程规划的直观性及操作便捷性。
CAT 服务展示优化
视觉一致性优化： 调整服务卡片的阴影色彩，使其与品牌主题色保持统一，强化界面视觉协调性，提升整体设计的一致性与精致度。
内容浏览引导优化
滚动交互引导： 增加页面浏览进度的视觉提示，帮助用户感知剩余内容及当前浏览位置，增强浏览过程中的方向感，引导用户进一步探索页面信息。
新闻与动态信息优化
信息层级优化： 通过差异化色彩区分信息类型与可点击链接，强化内容分类及交互元素的视觉识别，帮助用户快速理解信息结构，提升内容浏览与导航效率。
页脚导航优化
快捷操作入口优化： 在页脚新增购票页面的快捷入口，方便用户在浏览结束后直接跳转至核心购票功能，减少页面跳转与查找成本。社交媒体渠道整合： 集成 CAT 官方社交媒体链接，帮助用户快速访问品牌社交平台，拓展信息获取与互动渠道，提升网站的服务便捷性与用户连接体验。
项目反思
在 CAT 网站购票体验优化项目中，我深刻认识到用户反馈与数据驱动设计的重要性。通过用户研究、数据分析及 A/B 方案对比测试，识别购票流程中的关键痛点，并将研究洞察转化为具体的设计决策，通过优化信息架构、操作流程与界面布局，提升方案的易用性与直观性。项目也让我进一步理解了团队协作与持续迭代的价值。从需求分析到最终方案，我们结合用户反馈不断调整设计方向，在功能实用性、视觉表现与用户需求之间寻求平衡。同时，通过关注无障碍设计与包容性体验，进一步认识到优秀的 UX 设计不仅需要良好的视觉呈现，更需要以真实用户需求为依据，通过持续验证与迭代创造切实的用户价值。