Apple Toolbox (ATB) Fulfillment Redesign

Making it easier for customer service agents to track and view online order shipments.

Role
Design lead

Client
Apple

Why redesign Fulfillment?

Customer service agents (or Agents) frequently struggle to provide customers with real-time status updates within Toolbox, Apple's internal order management system. Shipping and delivery questions are the third most common request from Agents.

2021 Customer Calls

FAQs

Users

Apple Toolbox (ATB) serves global customer service agents, measuring their efficiency and quality. Agents handle tasks like real-time chat, information verification, order locating, and request processing.

Use Cases

Agents primarily handle returns and fulfillment requests but also handle cancellations, trade-ins, and payment updates.

Pain Points

Navigation: Difficult to find information.

  1. Learning Curve: Steep for new agents.

  2. Information Overload: Important details are scattered.

  3. Fragmented Workflow: Fulfillment process is complex.

Goals

Enhance customer service through a unified fulfillment view for specialists. By centralizing order and item information, we aim to equip specialists with the tools they need to resolve customer inquiries swiftly and efficiently, leading to a more positive customer experience.

Users had to select items (and invoices) one-by-one in the old design, or make changes on the order level.

Grouped actions by status keep things clear and easy to manage.

Issue #1:
Creating Bulk Actions

Challenges with the Old Design:

In the previous design, taking action on items required clicking on each one individually to access available options. This became cumbersome and time-consuming, especially for users managing multiple items.

New Design Approach:

To streamline the process, I explored ways to allow users to select multiple items and then choose the action they want to apply. This eliminates the need to click on each item separately.

Differentiating Actions based on Fulfillment Status:

My research revealed that the available actions differed significantly for unfulfilled and fulfilled items. There was little overlap in what actions could be performed on each type. Based on this finding, we decided to separate the actions for unfulfilled and fulfilled items to provide a more intuitive experience for users.

CTA (Call to Action) Decision:

I initially debated how to best present the available actions:

  • Combined View: Should all actions be consolidated into a single section, regardless of fulfillment status?

  • Grouped by Status: Alternatively, would grouping actions by fulfillment status (multiple CTAs for fulfilled and unfulfilled items) be more user-friendly?

I ultimately decided to group the CTAs by fulfillment status. This approach ensures that users only see actions relevant to the items they have selected, simplifying the process and minimizing confusion.

Built to Last: This future-proofed fly-in adapts to 5 variations while maintaining a cohesive design.

Issue #2:
All-in-one Item Details

Challenge: Integrating a Flexible Item-Level Widget

A crucial part of this project involved incorporating an existing "item level widget" into our new design. This widget needed to:

  • Accommodate 5 Variations: Function seamlessly with five different fulfillment options, including pick-up points, IDL shipping, and trade-ins.

  • Future-Proof Scalability: Be adaptable to potentially include more options in the future.

  • Maintain Cohesion: Remain a single, unified element within the interface, even with multiple functionalities.

New Design Approach: "Edit Fulfillment Detail" Widget

I named the widget "Edit Fulfillment Detail" and explored three different UI options. Ultimately, I chose a design that prioritizes:

  • Scalability: The design allows for future incorporation of additional actions without compromising usability.

  • Clarity and Simplicity: Both internal stakeholders and potential users found this design less visually complex and easier to understand.

  • Functionality Transparency: It clearly communicates that once an item is selected, users can modify various aspects of its fulfillment, including changing the type, updating the address, or even adding more items to the update request.

P.S. We are mostly likely going to rename “Edit Fulfillment Detail” to something easier to understand!

Seamless Order Tracking! Effortlessly switch between Order Details and Fulfillment updates - all on the same screen.

Zooming in: Order & Item Fulfillment details are organized for a clear, at-a-glance view.

Issue #3:
Faster Fulfillment Lookups

Simplifying Fulfillment Information Access for Specialists:

One of the key objectives was to streamline how specialists access and manage fulfillment details. In the previous user interface (UI), specialists needed to switch between multiple widgets, which was cumbersome and time-consuming.

Introducing the Fulfillment Tab:

To address this pain point, I created a dedicated "Fulfillment" tab within the UI. This tab acts as a one-stop shop for all fulfillment-related information, eliminating the need to switch between widgets.

Structured View for Easy Reference:

The Fulfillment tab is divided into two clear sections:

  • Order Level: This section provides an overview of all fulfillment details pertaining to the entire order, including the six different fulfillment types you mentioned (ship to home, Apple store pickup, etc.).

  • Item Level: Here, specialists can delve deeper into the individual items within the order. We've designed this section to handle both unfulfilled (in process) and fulfilled (delivered) states.

Continuous Improvement:

I’m currently refining the accompanying text within the UI to ensure crystal-clear communication of all functions and information.

The bottom-anchored fly-in expands/collapses easily, letting you access other app info without losing track. It offers flexibility and clarity.

Issue #4:
Creating an Action Pattern


Standardizing Actions Across the Toolbox (ATB):

A critical design decision was establishing a consistent way for specialists to take actions within the ATB interface, not just for fulfillment but across all functionalities. We defined "actions" as any task a specialist could perform within the UI.

Desired User Experience:

I aimed for a uniform experience for all actions. Additionally, it was crucial for specialists to easily reference basic order information while completing tasks. Ideally, they should be able to minimize this information when not in immediate use.

Design Inspiration and Exploration:

I was particularly drawn to Gmail's compose window design. It appealed to me because it's anchored to the bottom of the screen and can be minimized while working on the email. I considered this approach, along with modals and full pages, ultimately selecting the minimized window design.

Benefits of the Chosen Design:

  • Flexibility: This design adapts seamlessly to all fulfillment actions, as well as payment, trade-in, cancel and return functionalities.

  • Consistency: I prioritized design consistency across all actions, ensuring specialists can easily navigate the interface.

  • Information Balance: The design offers enough information to complete tasks but allows minimization for quick reference to order details.

  • Clarity: We further refined the UI by implementing a blue header, enhancing its visibility within the broader interface.

Before

There were 3 different widgets for fulfillment information and actions. Specialists had to go through all the steps each time they need to answer a single question.

After

In the new design, the user has one fulfillment tab with all this information consolidated together in a more coherent and organized way.

Apple’s engineering team is developing the design, and I conducted thorough testing on a prototype to make sure it adheres to the design. It will be part of a pilot in 2025.

Initial Testing

Understanding "Where is My Order?" Efficiency:

A crucial question for customer service agents is "where is my order?". To gauge their ability to answer this efficiently within the new design, we conducted usability tests with 12 agents. During these tests, I tasked them with locating and providing specific details such as the item's current status and delivery address.

Test Results

The good news!

My usability testing showed that 100% of users were successful in finding the address and status of shipped items in the new design. This indicates we've addressed a key need for agents: easy access to order information.

However, to ensure the Fulfillment tab is fully optimized, I will be conducting further testing on its overall structure and design.