Gucci‘s New Search
User Research / Interaction Design
Project Overview
Timeline: February - July 2019
Gucci is a luxury brand that continues to redefine high fashion, with a huge part of their brand’s sales now coming from millennials.
The digital team of Gucci is on an interesting journey. With sales booming, their heavily customized, monolithic e-commerce tech stack was slowing them down. Gucci conducted an assessment of their existing architecture followed by a gradual loose coupling from their existing tech stack. As part of this digital transformation project, I got the opportunity to join the team as a senior designer and paired with the Digital Design Head of Gucci to re-imagine the user-experience on gucci.com. We began with re-defining the Search experience.
This presentation focuses on three key areas:
Part 1: User Research during Sprint 0
Part 2: Designing Auto-suggest and Filters
Part 3: User-testing on UserZoom before first launch
Why Search?
Search driven conversion on Gucci.com was below current luxury e-commerce standards. Their search was not only inaccurate but also failing to surface all the relevant products for a query. This at a time when Gucci as a brand wants to experiment with new age solutions like Visual and Voice search. Lastly, Gucci’s own analysis showed that it was possible to increase search led conversion significantly.
Check out the video below to experience the new search. Comparison videos are also added towards the end of the project.
My Role
User Research
I began with user-research exercises to get a holistic understanding of the domain and the problem statement. This included gathering insights from labs tests conducted earlier by Gucci, talking to E-comm directors and the analytics team, market research in collaboration with the in-house research team.
Focus Group
I created three varied sets of clickable prototypes and presented to a group of luxury customers and recorded as they thought aloud and navigated through the interface. This was preceded by contextual inquiry about buying patterns, assessing other luxury fashion websites.
Design Delivery
I was responsible for defining the end-to-end new user journeys, clickable prototypes for user-testing and creating all the interface designs and visual assets for development.
During the sprint planning, I worked closely with the product owner and business analyst to explain the user journey: both happy paths and error scenarios and helped them with prioritization of the stories. Through the development process, I’d work with developers along with the quality analyst for story kick-offs and desk-checks.
User Testing
Validated the development with multiple users segments from the release market using unmoderated User Zoom interviews. Insights from these interviews helped in prioritizing the fast-following enhancements.
A/B/C Test
Used Optimizely to launch added two variations of Always-on Search, for a limited period, that increased the visibility of Search. Based on the insights from Google Analytics and Optimizely, we made incremental changes in the design and subsequently released in all the markets.
The Team
The experience design team consisted of two members: the Digital Design Head of Gucci and me. We, along with the business stakeholders and the team of developers worked in an Agile Scrum-based development framework.
Along with the two of us, the development team consisted of 5 back-end developers, 2 UI developers, 1 tech principal, 1 business analyst, 1 quality analyst distributed between India and Gucci and 1 product owner from Gucci.
Process
Continuous Discovery
The inception put in place a tentative release plan and a list of features. However, we, as part of the experience design team pushed for shorter releases (in QA environment as well as with certain user segments) for quicker feedback at regular intervals. This ensured that the backlog was enriched with incremental developments that were constantly prioritized and iterated on.
Documentation
I took it upon myself to document insights of research and dev spikes in the form of playbooks for features such as auto-suggest, filters, catalog refactoring etc. These playbooks were used by the development teams to build on features as well as appreciated and used by the leadership at Gucci Digital for product visioning and backlog creation.
Frequent Playbacks
I paired with back-end and UI devs to create quick prototypes for the filter structure, auto-suggest and overall catalog hierarchy. These were then shared with the product owners, CRM and catalog custodians in the form of frequent playbacks and walkthrough recordings. It helped bring up-to-speed all stakeholders in a distributed delivery setup.
Part 1: User Research
Millennials and Gen Zs want much more than just a brand name and a status symbol when they invest in luxury products. They expect a delightful experience, as they’re used to getting while shopping via retailers like Zara and Asos. Net-a-porter, Farfetch, Neiman Marcus and other such partner channels are crafting immersive digital luxury shopping experiences. Spanning across digital and physical touchpoints, these experiences are fully embedded with compelling content (image, social, and editorial) that are appealing for consumers.
Interviews with the E-Comm directors (names changed) helped understand the cultural landscape and nuances of shopping behaviour of customers from different regions. Some of these insights may inspire the new search experience, while some are relevant to the larger discussion on the personalization strategy.
Understanding Search (on-site) Behaviour of Luxury Shoppers:
There is a shift noticed in the ‘search behaviour’ of consumers. Traditionally, search engines like Google were the origin for product discovery whereas now consumers are directly using ‘Search’ on the brand’s site.
Upon arrival on a website, users spend an average of 10 seconds or less deciding whether or not to remain on the site.
In the next 30 seconds, they make a decision on the relevancy of the website’s content and usability of the site. This includes:
Scanning images/stories/messages
Glance at navigation & categories
If this interests them, the natural next step is to type keywords directly into the site search box or drill down through the navigation hoping to discover the product they’re seeking
For millennials the search behaviour shows that they are accustomed to results from Google search. On eCommerce sites they expect a similar experience. Some of the common expectations are, Type ahead & suggested search, ability of the site to search for full product descriptions, faceted navigation (rapid filtration of products).
Prototype Board
Additional Detailed Insights:
Always On Search is better but comes for a price
The participants found Always On Search easy to use and a faster way to find products. However, they felt it was a compromise on the aesthetics and is not something they expected on a Luxury site. A midway approach of Always On on Scroll can be tested with users.Gender buckets during Auto-suggest are not necessary
A quick and simple Auto-suggest done well, does the job. Gender based segregations are not needed if relevant results show up in the form of autosuggest one-liners.Refine button as the one-stop-shop works best
A majority of the participants used found horizontal scrolling in general very confusing and upfront Refine/Filters capsules not very helpful. They responded well to the Refine and Sort Buttons where various filters can be added at one go and they tap on Apply once they have made up their mind.‘Inspire Me’ is fine in very small doses
Prototype 003 was found to be overwhelming and distracting with its suggestions, inspirations and multi-tabs. A few relevant personalized suggestions are fine. These should be mostly textual with minimum images.
Part 2: Designing Auto-suggest & Filter Logic
Auto-suggest
Here is a breakdown of the basic units of Auto-suggest - the input query by the user and the intelligent responses/suggestions that can give prior visibility of relevant gender, categories and products to the user. The Autosuggest starts with the user typing in the first 2 letters - instead of 3 that’s currently implemented.
This improvement to auto-suggest will keep it clean, despite user writing slangs or competitor names. Over and above the auto-suggestions, if the users still choose to write a slang and hit enter, then it's up to them and like most sites, Gucci.com too should show a Search Result Page with the query on top without any censoring.
Scenario: User types ‘Shit’. Ignores autosuggest of Shirt, Shorts, and Shoes and still hits enter. Search Result Page heading is Shit and all products that were close matches to the spelling (like shorts, shirts, and shoes) will be on the grid.
Defined by business (and product count), some suggestions can be boosted to come up before the others. For instance, a Red Gucci Marmont bag makes more sense for business than Red cufflinks. Using contextual boosting, the order in which the Auto-suggest appears can be altered for maximum visibility of a product that is more relevant for business.
2. Filter Logic
Cluster 1
Gender influences Shop by Category (thereby also Shop by Products)
Shop by Category influences Shop by Products
Any selection on Shop by Product does not pre-select Shop by Category or Gender
Any selection on Shop by Category does not pre-select Gender
Cluster 2
Shop by Line, Color, Material, Product Size accordions do not visibly influence each other - no checkboxes ticked automatically on another accordion if one item in a particular accordion item is selected
Shop by Line, Color, Material, Product Size may have multiple options (inside each of them) to select from using multi-select
None of these Cluster 2 selection visibly influences Cluster 1 through pre-checked boxes etc.
If users start applying filters from Cluster 2 and then goes up to change/add selections in Cluster 1, then all the applied filters in Cluster 2 get refreshed with only those relevant to the new selection of Cluster 1
Part 3: User Testing
Key Challenges
Building Consistency
The new ‘Search’ experience, although new, had to fit into the overall ecosystem of Gucci. This meant new interactions, visual design assets had to be well calibrated and iterated on to make them seamless and consistent.
Cross-team Collaboration
In a distributed set-up between Gucci and India, it was challenging to align all stakeholders from different departments that influence the end-user experience. The analytics team, CRM, product teams, marketing and catalog departments were to be communicated with constantly.
Navigating Ambiguity
There were quite a few unknowns and anomalies in the catalog structure that we stumbled upon that needed to be picked up for discussion with relevant team representatives. I proactively mapped out the entire navigation map (diagram below) before delving deeper into designing the Filters and Auto-suggest logic as they were influenced by the existing catalog.
Navigation Map
Impact
In a month’s time, the conversion rate through search increased by +14%. Additionally, search related engagements increased by +33%.
Solutioning for search revealed discrepancies in the Catalog API. Subsequently this opened doors for restructuring of the catalog and a new stream of work.
Through the project, the design team was able to successfully inculcate a process-oriented approach towards delivery. This centred around user research, frequent smaller releases and validation through user testing.
Old vs New
Highlights from the New Search which were absent in the previous Search are: increased relevancy of search results, faster processing time in fetching results, auto-suggest and auto-complete, typo-tolerance, consolidated filters, reset applied filters, dynamic search results and product count.
Personal Feedback
“During the last year of work together I really appreciated your extreme dedication to your job, always balanced with calm attitude and professional approach.
What really impresses me is how you mix your different skills and strengths for helping people around you to understand what you are doing, why and how. When you have a strong opinion you are not happy until everybody around you understand the reason why you are so convinced of it!
I really believe that you are one of the key person in the team and especially during development of the search you has been an important "bridge" between Gucci and India.
Today, as well, your contribution and your good knowledge of digital products is crucial for bringing the Gucci.com experience to the next level.”
— Global Digital Product Manager, Gucci
“It’s always inspiring to work with you. You have contributed so much since the first time we met in Milan. Looking back at our collaboration, what stands out to me about you is the way you balance so well and effortlessly and incredible creativity and a very well structured methodology of work.
And the way you communicate to team members and stakeholders, which is always appropriate, thoughtful and clearly driven by the desire to make everyone feel included.
You do great at these things, and even more extraordinary to me is the fact you can do everything at the sped-up pace you are used to work at.
You are a true gem, a hardworking and talented human and designer..”