Gen AI Search
Exploring opportunities around integrating Gen AI driven natural language search into the Dick’s e-commerce website.
8 min read
My Role
Product Design Intern
Duration
9 weeks
My Team
Product Manager Intern
Software Engineers (4)
Tools
Figma
Miro
Product Design
UX Research
Project Overview
Leveraging Gen AI to enhance the search experience.
What’s the background?
DICK’S is the largest sports retailer
Dick’s or DSG for short is the largest sporting goods retailer and brings in $3.2 billion annually in terms of revenue. Dick’s also carries many of their own vertical brands like Calia, Versed, and more. And even though most of the revenue still comes from brick and mortar, every year eCom continues to grow and is expected to become the majority of the revenue.
Problem
We sell A LOT of products which can be overwhelming
Dick’s has multiple smaller companies like public lands and moose jaw but even within the main line Dick’s store there are so many different brands and so many different products. Dick’s has its own brands but also vendors like Nike and Adidas and so it can be hard for a user to narrow down on a product on our website. Even though there are ways to narrow search results, very few users use the built in filter options.
Current Search Results Landing Page
Metrics
Reviewing Search Metrics
I wanted to learn more about the eCom strategy at Dick’s and while I can’t talk about some statistics publicly, I was able to get valuable information on user behavior on our website. The main thing that I found is that users go straight to the search bar when on the home page.
97% of search queries are less than 4 words
40% of the time when users go to cart it is empty
70% of traffic goes through search
Navigation Bar Activity Breakdown
What does this mean?
Users already have a general sense of knowing what they want when they come on the website and most people are going straight to the search bar. After talking to a few data scientists to get these metrics I also found that most users actually never scroll down the home page. They either go directly to search most of the time or they don’t visit the home page at all and come directly from google search results.
Thus we asked…
How might we make it easier for users to search for products they want using AI?
Context
Wait, why AI specifically?
Dick’s has an an internal strategy to go from the largest sports retailer to the largest sports company in the world. However, in order to do that there have been a lot of changes to the growth strategy in the company. Dick’s has already launched an AI powered app for in store employees where they can access more information about a product or if the product is in stock or back order. After talking to stakeholders and conversations from the CEO it is important that we stay ahead of trends and adapt to new technologies which is why AI was used.
Starting out with research….
1) Competitive Audit & Market Research
2) Interviews and UXR Analysis
I analyzed 8 major competitors within the retail/eCom ecosystem and selected 5 to do a detailed competitive analysis on. I also decided to conduct some market research on industry leaders in AI such as Open AI and Claude. Afterwards, I created a survey and interviewed users as well as analyzed past research conducted my team to gather more insights.
Competitive Audit
The competition hasn’t adopted AI search yet
I analyzed 5 major competitors and what I found was that most of the competition except for Amazon and to an extent Walmart have not yet implemented any sort of AI enhanced search or any frontend AI features. However, since AI is a very hot topic most of the competition is probably experimenting with AI search and we want to stay ahead of the curve.
Competitive Audit
Referencing Industry leaders within AI
Since our direct competitor hasn’t really been using AI I decided to pick four major AI models and during the competitive audit, I assessed their strengths, weaknesses, and opportunities. What I found was that design wise most of them were very similar to each other and a week after completing this audit Claude and ChatGPT had an update to their UI which goes to show how fast things change.
User Research Interviews
After surveying 110+ users…
I found that most users were receptive to the prospect of having an AI enhanced experience on our website, but most wanted an easy to “get out” of the AI search experience and refer back to the current search experience.
60% have never used AI when shopping online.
76% said they were likely to use AI enhanced search.
43% say that it is hard to filter/narrow down search results.
User Painpoints
Pain points in the current search experience
1) Decision Making
Difficulty in making a decision that leads to a purchase due to all the product options.
3) Irrelevant Results
Natural language search queries doesn’t bring up relevant results because current search model isn’t equipped to do so.
2) Establishing Credibility
Lack of validation and certainty with product purchases (more common in beginner users).
4) Search Queries
Changing the current athlete behavior to encourage repeat search interactions where natural language is used.
Our research findings showed that…
AI search hasn’t been widely implemented within the e-commerce ecosystem, and many users haven't yet experienced AI while shopping. However, DICK'S is in a unique position. With our extensive range of vendors, users often struggle to narrow down their product selections and our research shows that AI would effective in streamlining the shopping experience.
So, what is the product goal?
Leveraging Generative AI to enhance the e-commerce experience without jeopardizing the current search experience.
Ideation
Initial Search Experience
I first started out with thinking about how a user would start their interaction with AI search from the home page. I went through a few iterations but the finalized design was option a toggle between product and AI search because it allows users to defer back to the product search experience easily and preserves the current search experience while also allowing them to interact with AI search if needed. And even though the AI star is a common design convention, words help provide context instead of just icon especially since the average Dick’s user skews older.
Ideation
AI Chat Experience
One of the most important design decisions I had to make was how the initial AI chat experience would be brought to life. I wanted to ensure that it wasn’t too different from something like ChatGPT or other popular AI chat experiences but also had Dick’s brand identity. After doing some further refinement and usability testing, option 1 was selected because the prompts were more descriptive, and it would be the easiest for our engineers to build out compared to the other options while still preserving Dick’s brand identity.
Easiest to build out and users liked how descriptive the prompts were and it felt the most personalized.
Well received by users but would require A LOT more engineering effort to animate to other screens afterwards.
The “pills” seemed very generic to most users and didn’t really capture the (DSG) Dick’s brand identity.
Very easy to build out but didn’t really help users come up with detailed prompt ideas.
Engineering Collaboration
Dropdown or Fullscreen
When designing out the chat experience I wanted to figure out if a fullscreen or a drop down in the form of a SAYT (search as you type box) would be more effective. The major advantage of the dropdown is that it allows for better continuity and an easier way to exit the flow. However, I ended up going with the full screen design because even though during usability testing feedback was split 50/50, but my engineers said that it would be more difficult to implement the drop down since spacing and alignment on a full screen page is usually easier and it would be something they would have to create from scratch and so I took their input and decided to move forward with the fullscreen.
Previous Dropdown AI Chat
Finalized Fullscreen AI Chat
Nitty Gritty Design Decisions
Designing for a future state
Since the AI personal shopping experience would be launched with a new design concept for the e-commerce website, I had a bit more freedom to use the new DSG design system. I also paid attention to font-weight and made sure the AI gradient was used sparingly to draw attention to specific parts of the screen.
Final Side Bar
Initial Side Bar
Nitty Gritty Design Decisions
Iconography and Context
The average Dick’s user tends to skew older than most other eCom or large retailers. After doing some A/B testing we found out that it was important for us to have text describing the copy and regenerate icons since some users were still confused about the functionality and I also decided to update the button styling to have a smaller stroke and to be unfilled to make match the aesthetic of the other aspects of the design.
Filled Icons + Text
Unfilled Icons without Text
Unfilled Icons with Text
Nitty Gritty Design Decisions
Input and Output Fields
One of the main points of feedback I got from doing usability testing on the chat experience is that it didn’t really feel like a chat. The profile icon as a placeholder was impersonal, and it would take additional unnecessary effort from engineering to add that functionally, so I decided to create a right-aligned simplistic and minimal text box to better mimic a more realistic chat experience.
Initial Design
Final Design
Finalized Designs
Streamlining the shopping experience
Business Value
Impact
I learned a lot about the business's needs and how to identify KPIs and Metrics. During my internship, I had a product manager intern who also worked with me in lockstep, which really helped me learn more about how design directly impacts business.
91% of users reported they would use this feature.
79% of users felt like it makes searching for products easier.
$27 million expected increase in revenue (conservative estimate).
Conclusion + Learnings
What did I learn?
My internship experience was a great experience, and I was able to work on a business-critical problem that has the potential to impact millions of users. Although I had a great internship experience, there were a few main takeaways that I had from this experience.
Good design starts with good research. - Since the project that I worked on initially didn’t have a defined scope, I had to do a lot of market research and talk to a lot of users to see if they would even be interested in AI in the first place, especially since we were planning on launching such an ambitious and new feature.
Collaborating with PMs and Engineers - This was my first ever formal internship working with software engineers both on the front end and the back end. It was important for me to advocate for my design decisions, but I also understood when I needed to compromise and work with engineers to make sure my designs were easy to implement.
Understanding the Business - During this internship, I worked in lockstep with another product manager intern, and I learned a lot about key KPIs and Metrics that we should be tracking to ensure that this idea would even be viable in the first place. I also worked with my PM on finalizing our business case proposal to present to stakeholders to show that this would be a worthwhile investment.
Designing with Constraints - I was able to have a lot of creative freedom during my internship, but there were some aspects of the design that couldn’t be changed because they were owned by different teams who were also working on different design projects.
View Other Projects
Jointly
Empowering students to stay accountable
Design Systems
A collection of my UI Design and Prototyping projects
Mobile Design
Interaction Design
Product Design
UX Research
Prototyping
Visual Design