About
Projects
×
Order Status Tracker
Deliverables
  • UI Design
  • Usability tests and findings
  • High-fidelity mockups and prototypes

The Order Status Tracker allows the customer to complete various order status tracking tasks via My Telstra. For example, connecting a new service where there is no nbn service, viewing the correct inventory status on a sales order, and resolving issues that may arise in their order.

The Challenge
Improve the customer experience by uplifting the Order Status Tracking page by continuing to build on the foundation of the feature's capabilities.
The Solution
There were 3 areas that required improvement based on our review of the current experience.

1. Lack of visibility of tracking 'Current Status'
When an order has multiple milestones it is important to visually distinguish the 'Current status' as this allows users to immediately know their progress.

2. Lack of prominence in Information hierachy
Content in the order page needs to be organized in a way that reduces the cognitive load on the user. This includes removing content that is not essential to another screen and optimising what is important.

3. Banner message prominence
Presently, only one banner message is allowed in the order. This is very restrictive as certain orders require additional information to be displayed to inform the user of changes or action they need to take.
Ideation
Multiple design concepts were explored as part of the ideation, and these were presented to the team for feedback. Also, the final design had to be reviewed by the dev to make sure it was technically feasible.

User Testing
Working closely with the UX designer, we conducted user testing to evaluate whether uplifted treatment helps users better understand their order status. An interactive prototype was implemented in usability testing to understand how users navigate through 3 given tasks and flows and the pain/gain points associated with them.
Design Uplift
As part of the design uplift, I updated all the components to what is presently available in the Design System and introduced new patterns to help users better understand their order details.


My Orders
My Orders live in the Get help section where there's a link to My orders. Users can view all their Pending orders here with each order card displaying the current status.

Order Summary
All orders are shown on the summary page, this includes completed orders in a separate tab.

No Milestone
Orders with no milestone show only the default detail information about that particular order.

Single Milestone
A single milestone order has a card design highlighting important information about the order.

Multiple Milestones
Users with an order that has multiple milestones are presented with a step-by-step process showing information relevant to the current step. In the old design, there was a cognitive load on the user as there was too much to take in and understand. By removing all information that is not required, the user can focus on the key step quickly and easily make changes if needed.

Users can still easily navigate to the information on upcoming milestones by simply tapping on the cards. This brings up a modal that shows more detail with key actions.
New patterns
Part of the uplift design required new patterns to be created as it solved several problems that were inherent in the old design. For example, interactive cards provided a simple way of highlighting key information in a compact design and everything else that's not necessary can be access via a modal.

Another improvement in the design was presenting the current milestone in its own detail section area, this solution fixes two pain points that were flagged. Firstly, it puts the important information into focus for the user when they scroll down the page. Secondly, this difference in design was a way to visually distinguish between a current milestone and a future milestone in the user's order.