GFS Search Autocomplete & UX Behavior Documentation

Gordan Food service (B2B eCommerce)

Improving autocomplete logic, UX behaviors, and design-system components across the Gordon Ordering platform.

Overview

Search is one of the highest-traffic features in Gordon Food Service’s B2B ordering platform. However, the original experience lacked intelligence, consistency, and flexibility, resulting in missed opportunities, slower ordering, and user frustration.

As the End-to-End Designer and  Implementation Engineer, I redesigned search across web and app with a focus on smarter autocomplete, improved filtering, and reusable search components integrated into the GFS Design Library.

Problem

The legacy search experience suffered from:

• Low relevance and slow discovery

• High abandonment rates

• No support for typos, synonyms, or SKU variations

• Inconsistent UI and behaviors across devices

• Poor grouping logic and unclear hierarchy

Analytics, Baymard audit findings, and user interviews confirmed that power users — high-volume buyers — needed a much more efficient search experience to support repeat ordering.

Approach
Research & Audit

• Reviewed support tickets and session recordings

• Conducted Baymard-based heuristic evaluation

• Analyzed competitor flows (Sysco, Amazon Business, Grainger)

Scenario Planning

Mapped real ordering behaviors to ensure search could handle:

• Suggestive queries

• Exact matches

• No-results scenarios

• SKU-only inputs

Ideation

• Explored new approaches to: autocomplete, fallback states, and recovery patterns, with a special emphasis on improving the “No Results Found” experience.

Search Scenarios
Product Suggestion

Designed for users who rely on common or repeat orders.

Behavior: smart suggestions, predictive typing, and personalized ranking.

Exact Match

Prioritizes fast navigation to a known SKU or product title.

Behavior: direct PDP navigation and grouped variations.

No Results Found

Redesigned to prevent dead ends.

Behavior: fallback suggestions, typo handling, category pivots, and clear recovery paths.

Autocomplete by Product ID

For power users who memorize SKUs.

Behavior: immediate ID recognition and keyboard-first interaction.

No Results Page — Iteration Work
Iteration 1

Basic tips and category links.

Feedback: Informational but not helpful — still felt like a dead end.

Iteration 2

Contextual suggestions, related categories, smart recovery, and typo handling.

Feedback: Felt proactive, reduced frustration, increased engagement.

User Testing Insights

Tasks included misspelled queries, filtering, SKU searches, and empty-state recovery.

Key Takeaways

• Search speed improved

• Suggestions felt more relevant

• Users recovered from “no results” faster

• Autocomplete hierarchy reduced cognitive load

Final Design Enhancements

Improved Autocomplete

Clear grouping, headers, spacing tokens, focus states, and visual separation..

Smarter Query Handling

Supports typos, synonyms, exact matches, SKU logic, and intent detection.

No Results Recovery

Avoids dead ends, promotes discovery, and strengthens user trust.

Updated Layout + Hierarchy

Visually organizes suggestions by type for faster scanning.

Before vs After

The redesigned experience dramatically improves visual clarity, speed, and accuracy — especially for SKU-heavy workflows.

Outcome & KPI Lift
Search Success Rate:

↑ 15 percent

Search Abandonment:

↓ 12 percent

Search-to-Purchase Conversion:

↑ 13 percent

These enhancements significantly reduced friction and improved ordering efficiency for high-volume users.