2.
IDEATE AND PROTOTYPE
Brainstorm ideas, create and test solutions.」
构思与原型 「 进行头脑风暴,提出并测试解决方案。」




Sketch Iterations

草图迭代
Through multiple rounds of sketch iterations, we continuously refined key features and user interfaces, exploring various design solutions and optimising based on user feedback. Each iteration aimed to enhance the user experience, making the design more intuitive and efficient.
通过多轮草图迭代,我们不断改进关键功能和用户界面,探索不同设计方案,并根据用户反馈进行优化。每次迭代的目标是提高用户体验,使设计更直观、高效。


第1版草图:订单访问界面设计
描述如何为用户提供清晰直观的“我的订单”访问方式,探索多种界面布局与访问点。
第2版草图:包裹追踪界面设计
重点在于展示包裹的详细信息,通过定制化图标和色彩强调附加服务,同时提供地图视图和时间线视图。

第2版草图:配送时间与方式调整
探索如何根据用户需求灵活调整配送时间和方式,通过简洁的界面布局和推荐功能来优化用户选择。

第3版草图:包裹追踪详细界面设计
增强了多种视图模式的切换功能,包括地图视图和列表视图,让用户更方便地查看包裹详情,并通过滑动手势置顶重要包裹。


Digital Wireframes数字线框图
These digital wireframes illustrate the full process design for accessing orders, tracking packages, and adjusting delivery times and methods. Each wireframe represents different interface and functional perspectives, emphasising intuitive user actions and improved efficiency in managing orders and packages.
这些数字线框图展示了用户访问订单、追踪包裹、调整配送时间与方式的全流程设计。每张图代表不同的界面和功能视角,强调用户在管理订单和包裹时的直观操作和效率提升。


#1. 我的账户:用户可以通过“我的账户”页面进入“我的订单”,并管理个人偏好和查看优惠券。
#2.  我的订单 - 地图视图:用户通过地图视图概览所有包裹的当前状态,并查看预计送达时间。
#3.  我的订单 - 列表视图:列表视图提供了所有包裹的详细信息,帮助用户快速浏览和选择。

#4. 我的订单 - Green+ 地图视图:用户可以查看Green+项目的成就,包括回收包装次数和节能贡献。
#5.  地图视图 - 查看我的订单详情: 显示包裹状态、预计送达时间和操作选项,用户可通过搜索框和自定义标签快速查找和管理包裹。
#6. 管理我的自定义标签:
允许用户通过个性化标签管理包裹,快速查找和分享包裹信息。

#7. 追踪包裹:用户可以查看包裹的详细行程,并根据位置和时间更新选择调整。
#8. 更改配送时间:
用户可以根据时间表灵活更改预计的配送时间。
#9. 更改配送方式:
用户可以根据推荐和配送限制选择最合适的配送方式。

用户流程:展示了从“我的账户”到“更改配送方式”的完整用户流程,说明了各步骤的前进和回退导航。



3.
TEST & ITERATE
「Refine the design through feedback and continuous iteration.」
测试与迭代「根据反馈优化设计,不断迭代。」




High-Fidelity Prototype and Design Rationale

高保真模型与设计依据
The high-fidelity model design in this section aims to enhance user efficiency in managing orders, tracking packages, customising filters, and rescheduling delivery options. I continuously refined interface layouts and interaction logic based on user feedback to ensure an intuitive and convenient user experience. Each iteration focused on addressing pain points and incorporating improvements identified during user testing to optimise the details of each functional module.
这一部分的高保真模型设计旨在提高用户在管理订单、追踪包裹、定制筛选和重新安排配送方式时的效率。我通过用户反馈不断改进界面布局和交互逻辑,确保提供直观且便捷的用户体验。每次迭代都基于用户测试中收集到的痛点和改进建议,从而逐步优化各个功能模块的细节。




Map View Page Iterations / 地图视图页面迭代:
The map view iterations optimised the navigation bar, progress bar, and slide-out drawer, improving the overview of order status and enhancing interface clarity and information visualisation.
地图视图迭代中优化了导航条、进度条和滑动抽屉,改善了用户对订单状态的概览,提升了界面的整洁度和信息可视化效果。





Customised Filters Page Iterations / 定制化筛选页面迭代:
Adding titles, image galleries, and plus-minus buttons enhanced the filter management. The new layout divides the page into “Favourite Tags” and “Current Tags” sections, helping users better understand the filtering tasks.
通过添加标题、图像画廊和加减按钮,优化了筛选器的管理。新设计将页面划分为“收藏标签”和“当前标签”两个部分,帮助用户更好地理解筛选任务。





List View & Shipment Details  / 列表视图与订单详情:
Multiple iterations improved the “My Orders” page with the addition of foldable drawers and text-icon buttons, enhancing the navigation experience. The shipment details pop-up was replaced with a foldable drawer for easier access to order status.
通过多次迭代,改进了“我的订单”页面,新增折叠抽屉和图文按钮,使导航体验更流畅。将订单详情的弹窗调整为可折叠抽屉,以方便用户查看订单状态。





Reschedule Delivery Options Page Iterations / 重新安排配送选项页面迭代:
The iteration improved the rescheduling of delivery methods and dates by merging the two original pop-up windows into one, reducing user steps. A confirmation prompt was added to prevent date selection errors, enhancing the overall user experience.
改进了配送方式和日期更改的功能,将原来的两个弹窗合并为一个,减少了用户操作步骤,并加入了防止误选日期的提示,提升了整体操作体验。





Heuristic Evaluation & Improvements

启发式评估与改进
The evaluation identified issues with “system status visibility” and “error prevention,” such as confusing search bars and unclear navigation. Improvements include adding visual markers on order cards and prompt text near confirmation buttons to reduce errors and enhance efficiency.
评估发现页面在“系统状态可见性”和“错误预防”方面存在不足,如搜索栏混淆和导航不清。改进措施包括在订单卡添加视觉指示标记,确认按钮附近增加提示文本,以减少错误,提升整体效率。





User Flow

用户流程
Show users access orders, customise filters, view package details, adjust delivery options, and check “Green+” environmental data from the “My Account” page.
展示用户如何从“我的账户”页面访问订单、定制筛选、查看包裹详情、调整配送选项,并查看“Green+”环保数据。

Footer with Icons