This project centered on a significant overhaul of the Gap Inc. mobile app's search experience, introducing several key enhancements. The primary focus was the implementation of an auto-suggest/complete feature, a standard in e-commerce that the app previously lacked. Beyond this core addition, the project encompassed an exposed search bar with cycling suggested keywords—customizable by each brand to capture user attention. We also integrated trending searches and refreshed the overall search UI, which had remained largely unchanged since the app's inception. To further improve accessibility and utility, a barcode scanning feature was incorporated into the updated search interface.
The project began with a competitive analysis of leading e-commerce apps (Amazon, Walmart, Target, etc.), which revealed a common pattern of prominently displaying the search bar across multiple screens. This observation aligned with internal Gap data indicating a strong correlation between search interaction and conversion rates, highlighting the value of making search easily accessible. While the initial push was for exposed search on most pages, some compromises were made based on brand input, with a plan for iterative testing based on performance data.
<aside>
Example snippet of Competitor Audit
</aside>
Further foundational research was conducted using insights from Baymard Institute, leveraging their extensive studies on e-commerce search best practices. This research informed the design direction for several key elements of the new search experience.
<aside>
Example snippet of Baymard Research
</aside>
To increase visibility and engagement, the search bar was made persistent on key screens. It also incorporated a subtle animation of cycling suggested keywords, a feature previously successful on the Gap website. Brands could curate these keywords for marketing purposes. Adhering to WCAG guidelines for motion, a pause/play control was included for accessibility. Note: A technical limitation meant that these brand-selected cycling keywords were sourced separately from the dynamically generated trending search keywords, potentially causing a disconnect for users. This constraint is noted for comprehensive understanding. To manage screen real estate, the exposed search bar features a collapsing/hiding behavior upon scrolling, tucking into a search icon at the top.
<aside>
</aside>
Upon tapping the search bar, users are directed to a dedicated search screen featuring:
The main search input field.
Dynamically populated Trending Search Keywords (with some brand influence), indicated by a consistent fire icon (aligning with the web experience). Based on backend limitation of seven terms, these were displayed in a maximum of two lines with an expand/collapse affordance for any additional terms.
A redesigned and more prominent Barcode Scanner button, docked for easy access. This enhancement supports the business goal of increasing in-store app usage for store mode. Explorations into voice search were considered but ultimately not pursued for this phase.
<aside>
Barcode Scanner Button Before & After
</aside>
<aside>
</aside>
Implementing a long-requested industry standard, the search now provides up to eight keyword suggestions as the user types, a quantity aligned with Baymard Institute's recommendations for optimal usability. Also following Baymard's guidance, the predicted portion of the text is bolded to draw attention to what the user hasn't typed.
To streamline category-specific searches, department filters were integrated as buttons within the auto-suggest results for the initial suggestions, drawing inspiration from the web experience and adapting it to the app's design system.
<aside>
</aside>
The search bar remains fixed as the header on the search results page for easy re-engagement. The barcode scanner is also docked at the top for persistent access. If a department filter was selected during the search, it is automatically applied on this page. Otherwise, department filters are prominently displayed at the top of the results to encourage users to refine their search.
<aside>
Department selected, department not specified, scrolled state
</aside>
<aside>
Different Barcode Scanner CTAs
</aside>
<aside>
Different Icons and Placement
</aside>
<aside>
</aside>
<aside>
In future iterations, we plan to:
Overall, the improved search experience was received very positively by both users and stakeholders. It led to a 200%+ increase in search engagement and contributed to a noticeable uptick in add-to-bag actions. The update also brought greater consistency between the Gap app and website, furthering our goal of creating a more streamlined, cross-platform experience. Brand teams were especially pleased to see their highlighted search terms integrated, and we plan to continue monitoring their performance across brands and seasonal campaigns.