Search Modernization: Data-Driven Discovery

Project Overview

Search is the highest-intent entry point for e-commerce, yet the Gap Inc. mobile app lacked foundational industry standards like auto-suggest and persistent access. I led the overhaul of the search experience to transform it from a static tool into a proactive discovery engine.

The project involved implementing a persistent search architecture, integrating "Store Mode" utilities like barcode scanning, and modernizing the UI to support multi-brand marketing needs—all validated against Baymard Institute best practices.

Key Result: The redesign led to a 200%+ increase in search engagement and a significant lift in Add-to-Bag (ATB) conversion.

Role: Lead Product Designer | Focus: Discovery, Utility, WCAG Compliance

1. Evidence-Based Strategy

To advocate for this overhaul, I anchored the design direction in competitive benchmarks and usability research:

Competitive Audit: Analyzed patterns from Amazon, Walmart, and Target, which confirmed that an exposed, persistent search bar is the industry standard for high-conversion apps.

Baymard Institute Research: Leveraged e-commerce best practices to justify specific UI choices, such as suggestion limits and text formatting, ensuring the solution was rooted in proven user behavior.

2. Feature Deep-Dive: Engagement & Accessibility

A. The Exposed Search Bar & Cycling Keywords

To drive top-of-funnel discovery, I implemented a persistent search bar featuring Cycling Suggested Keywords.

The Goal: Provide brands with a zero-click marketing channel to surface trending categories (e.g., "High-Rise Denim").
Accessibility (WCAG): To ensure compliance with motion guidelines for auto-updating content, I included a Pause/Play control. This allows users to stop the animation, balancing brand storytelling with user control

B. Utility-First Search Screen

I reimagined the search entry state as a functional dashboard:

Elevated Barcode Scanner: Moved the scanner from a buried menu to a prominent, docked position. This directly supports the business goal of driving "Store Mode" and in-store app utility.

Hierarchical History: Prioritized Search History above trending terms, recognizing that re-engagement is a higher-value user intent. I included a simple "X" for easy deletion to keep the interface clutter-free.

C. Auto-Suggest & Department Filtering

To accelerate the path to purchase, I implemented long-requested auto-complete logic:

Scannability: Followed Baymard guidance by bolding the predicted portion of text and capping suggestions at eight to prevent cognitive overload.
In-Search Filtering: Integrated department buttons (e.g., "Sweater in Women") directly into the suggestions, allowing users to bypass the broad results page and land in a filtered, relevant view.

3. Results & Strategic Impact

The launch proved that frictionless discovery is the engine of growth for the Gap Inc. portfolio.

Engagement: Observed a 200%+ increase in search interactions post-launch.
Conversion: Contributed to a measurable uptick in Add-to-Bag (ATB) actions, as users were able to find specific products with significantly fewer taps.
Cross-Platform Consistency: Successfully aligned the mobile app experience with the Gap website, creating a more seamless omnichannel journey for the customer.

Search Modernization: Data-Driven Discovery

Project Overview

Search is the highest-intent entry point for e-commerce, yet the Gap Inc. mobile app lacked foundational industry standards like auto-suggest and persistent access. I led the overhaul of the search experience to transform it from a static tool into a proactive discovery engine.

The project involved implementing a persistent search architecture, integrating "Store Mode" utilities like barcode scanning, and modernizing the UI to support multi-brand marketing needs—all validated against Baymard Institute best practices.

Key Result: The redesign led to a 200%+ increase in search engagement and a significant lift in Add-to-Bag (ATB) conversion.

Role: Lead Product Designer | Focus: Discovery, Utility, WCAG Compliance

1. Evidence-Based Strategy

To advocate for this overhaul, I anchored the design direction in competitive benchmarks and usability research:

Competitive Audit: Analyzed patterns from Amazon, Walmart, and Target, which confirmed that an exposed, persistent search bar is the industry standard for high-conversion apps.

Baymard Institute Research: Leveraged e-commerce best practices to justify specific UI choices, such as suggestion limits and text formatting, ensuring the solution was rooted in proven user behavior.

baymard

􀎡

􀯻

􀯶

􀏚

2. Feature Deep-Dive: Engagement & Accessibility

A. The Exposed Search Bar & Cycling Keywords

To drive top-of-funnel discovery, I implemented a persistent search bar featuring Cycling Suggested Keywords.

The Goal: Provide brands with a zero-click marketing channel to surface trending categories (e.g., "High-Rise Denim").
Accessibility (WCAG): To ensure compliance with motion guidelines for auto-updating content, I included a Pause/Play control. This allows users to stop the animation, balancing brand storytelling with user control

B. Utility-First Search Screen

I reimagined the search entry state as a functional dashboard:

Elevated Barcode Scanner: Moved the scanner from a buried menu to a prominent, docked position. This directly supports the business goal of driving "Store Mode" and in-store app utility.

Hierarchical History: Prioritized Search History above trending terms, recognizing that re-engagement is a higher-value user intent. I included a simple "X" for easy deletion to keep the interface clutter-free.

C. Auto-Suggest & Department Filtering

To accelerate the path to purchase, I implemented long-requested auto-complete logic:

Scannability: Followed Baymard guidance by bolding the predicted portion of text and capping suggestions at eight to prevent cognitive overload.
In-Search Filtering: Integrated department buttons (e.g., "Sweater in Women") directly into the suggestions, allowing users to bypass the broad results page and land in a filtered, relevant view.

3. Results & Strategic Impact

The launch proved that frictionless discovery is the engine of growth for the Gap Inc. portfolio.

Engagement: Observed a 200%+ increase in search interactions post-launch.
Conversion: Contributed to a measurable uptick in Add-to-Bag (ATB) actions, as users were able to find specific products with significantly fewer taps.
Cross-Platform Consistency: Successfully aligned the mobile app experience with the Gap website, creating a more seamless omnichannel journey for the customer.

Search Modernization: Data-Driven Discovery

Project Overview

Search is the highest-intent entry point for e-commerce, yet the Gap Inc. mobile app lacked foundational standards like auto-suggest and persistent access. I led the overhaul of the search experience to transform it from a static tool into a proactive discovery engine.

This project involved a complete UI refresh, the implementation of dynamic auto-complete, and the integration of "Store Mode" utilities, shifting search from a utility tool into a high-performance marketing lever.

Key Result: The redesign led to a 200%+ increase in search engagement and a significant lift in Add-to-Bag (ATB) conversion.

Role: Lead Product Designer | Focus: Discovery, Utility, WCAG Compliance

1. Evidence-Based Strategy

To advocate for this overhaul, I anchored the design direction in competitive benchmarks and usability research:

Competitive Audit: Analyzed patterns from Amazon, Walmart, and Target, which confirmed that an exposed, persistent search bar is the industry standard for high-conversion apps.

Baymard Institute Research: Leveraged e-commerce best practices to justify specific UI choices, such as suggestion limits and text formatting, ensuring the solution was rooted in proven user behavior.

baymard

􀎡

􀯻

􀯶

􀏚

2. Feature Deep-Dive: Engagement & Accessibility

A. The Exposed Search Bar & Cycling Keywords

To drive top-of-funnel discovery, I implemented a persistent search bar featuring Cycling Suggested Keywords.

The Goal: Provide brands with a zero-click marketing channel to surface trending categories (e.g., "High-Rise Denim").
Accessibility (WCAG): To ensure compliance with motion guidelines for auto-updating content, I included a Pause/Play control. This allows users to stop the animation, balancing brand storytelling with user control

B. Utility-First Search Screen

I reimagined the search entry state as a functional dashboard:

Elevated Barcode Scanner: Moved the scanner from a buried menu to a prominent, docked position. This directly supports the business goal of driving "Store Mode" and in-store app utility.

Hierarchical History: Prioritized Search History above trending terms, recognizing that re-engagement is a higher-value user intent. I included a simple "X" for easy deletion to keep the interface clutter-free.

C. Auto-Suggest & Department Filtering

To accelerate the path to purchase, I implemented long-requested auto-complete logic:

Scannability: Followed Baymard guidance by bolding the predicted portion of text and capping suggestions at eight to prevent cognitive overload.
In-Search Filtering: Integrated department buttons (e.g., "Sweater in Women") directly into the suggestions, allowing users to bypass the broad results page and land in a filtered, relevant view.

3. Results & Strategic Impact

The launch proved that frictionless discovery is the engine of growth for the Gap Inc. portfolio.

Engagement: Observed a 200%+ increase in search interactions post-launch.
Conversion: Contributed to a measurable uptick in Add-to-Bag (ATB) actions, as users were able to find specific products with significantly fewer taps.
Cross-Platform Consistency: Successfully aligned the mobile app experience with the Gap website, creating a more seamless omnichannel journey for the customer.