AI-Powered Orders Listing & Global Search Redesign

Context & My Role

HikeOn is a B2B eCommerce ERP platform designed to manage end-to-end operations — from orders and inventory to pricing and fulfilment. As the sole designer, I own the entire product experience, working directly with the product owner and frontend engineering team.

This case study covers the redesign of the Orders Listing screen — the highest-traffic screen in the platform, used primarily by Customer Service teams handling real-time order queries across hundreds of daily calls.

The Challenge

CS teams were navigating fragmented order data spread across multiple screens. To resolve a single customer call, an agent might open 4–5 different views: order status, payment history, shipment tracking, product details, and return requests. There was no unified search — every lookup was a manual workflow.

"The problem wasn't that the data didn't exist. It was that the system made you go hunting for it in the middle of a live call."

Process & AI Initiative

Began with a structured workflow audit — shadowing CS team calls, mapping every screen transition, and cataloguing the questions agents were trying to answer. Found that 80% of call queries fell into 6 repeatable categories: order status, payment queries, shipment delays, return requests, product availability, and pricing disputes.

The NLP-powered Global Search was already in development as part of the AI initiative. My job was to design around it — building a screen architecture that made the AI's output immediately actionable rather than just informational.

Key process steps

• Mapped CS workflow end-to-end, identifying every context switch and manual lookup
• Defined search intent categories (order ID, customer name, SKU, pricing history, shipment status)
• Designed search result previews that surface the most likely answer without requiring a full page navigation
• Iterated on KPI card placement through low-fidelity wireframes tested with 2 CS team members
• Built all components on the existing 250-component design system — no new atoms created

Key Solutions

Unified Orders Listing with contextual KPI cards surfacing the 6 most common query types at a glance. Smart filters that remember agent preferences across sessions. AI-powered Global Search that understands natural language queries like "show me pending orders for SKU X with a price dispute" and returns structured results with inline previews.

Each search result includes a confidence indicator showing which data signals drove the result. Agents can resolve the most common query types directly from the search result — without opening a full order record.

KPI widgets auto-highlight exception states: delayed shipments, unresolved refund requests, and payment failures — using the AI's priority scoring to surface what needs attention first.

Impact

CS call-handling capacity increased significantly — teams now handle 3× more calls per shift with higher first-contact resolution rates. Average call handling time dropped by over 40%. The screen is live in production with real users.

The design reduced the number of screen transitions required for the 6 most common query types from an average of 4.2 to 1. Agents described the new experience as "actually being ahead of the customer" rather than scrambling to catch up.

What I Learned

The most important design decision on this project wasn't a UI pattern — it was the decision to structure the search results around intent categories rather than data types. Data-typed results (orders, products, customers as separate tabs) felt like the obvious approach. Intent-typed results (here's the answer to "where is this order?") is what actually changed the workflow.

Working within the existing 250-component design system meant I could move from problem framing to testable prototype in 2 days. The constraint accelerated rather than limited the work.