A New Search Experience for Macy’s
Case Study
Overview
Founded in 1858, Macy’s is one of the oldest retail brands in America. In 2015 it was the largest U.S. department store. Macy’s has been a company in transition over the last years, trying to beef up its online presence as its had to adapt from being a traditional retail store.
Problem Statement
With Macy’s online catalog expanding by millions, how do we ensure that customers are still able to find what they are looking for?
Users & Audience
Macy’s customers skew older, the majority of which are women (close to 45%). In recent years they have tried to focus products towards a younger demographic — a confident, digital-first, fashion-focused spender who values speed, experience, and fun.
Role
While the search team is larger overall the team for this particular project consisted of 5 people. 3 developers, 1 Product Manager, and myself. As the lead UX designer for this project, my role was in helping to design the experience through research and testing, create visual designs that pushed the craft (one of our department goals). This effort was made in tandem with the redesign efforts of Macys.com.
Scope & Constraints
- Time cut short. Forced change of priorities from upper management to develop a new feature took away our runway to test multiple hypotheses for an MVP.
- A company in flux with a design process historically driven by product managers. Macy’s was in the middle of a transition to help alleviate ongoing struggles. In the past, the design process was led by product managers, with UX serving as pixel pushers. A lack of innovation in their products, a stale website that hurt brand integrity and trust, along with a drop in sales forced a change in how UX, Product, and Engineering teams worked together.
- Design subsumed into an engineering-driven process. With epics and stories already determined, designers were usually expected to supply artifacts needed and not contribute insights towards the final customer experience.
- Very limited analytics around search. This proved to be one of the biggest constraints. An older in house tagging system that didn’t accurately track metrics combined with a faulty hookup around a new analytics platform made it difficult to get significant data. I pulled from books, periodicals, user testing, heuristics, intuition (backed with rapid testing), and system log files to get a better understanding of how customers used search.
Process
Current Experience
The changes to Search were part of a larger initiative to redesign the site into a more modern enticing website for Macy’s customer base and target audience, fashionista’s.
Discovery Phase
Forcing a Discovery phase
Historically at Macy’s, design was subsumed into an engineering-driven process. With epics and stories already determined, designers were expected to supply artifacts when needed. Part of our goal was to show how customer-centered design could help build a better road map that would bring results.
After having 1 on 1’s with each of the Project Managers running Search about their goals and vision for success, my research partner and I invited PM’s to a brainstorming session to help prioritize questions for research to help gain a better customer perspective. Organizing questions with similar themes together, then prioritizing those themes. The questions were grouped with these themes:
- Number of Search Results
- Personalization
- Pain Points in Existing Experience
- Improvements
- Features Most Used
- Overall Experience
It established which questions were most important in figuring out with research and data. This forced a deeper look into what was proposed on the roadmap. The research would ultimately reveal pain points from the customer’s perspective to better prioritize the roadmap.
With the questions listed in order of priorities, I transferred them over into a spreadsheet and distinguished which questions we can answer through analytics, research or both, along with comments
Customer Insights
The live moderated study gave us insights on how customers used search and helped to answer questions from our brainstorming session. Having PMs watch along in the sessions was a powerful experience. They witnessed first hand how customers interacted with the site. And where some of the problems lied.
The moderated study helped surface:
- Autosuggested product recommendations not personalized to the user.
Some customers had an expectation that autosuggestions and the related autosuggested product recommendations (APR) were personalized to their experience. When it surfaced items that didn’t pertain to them it felt like Macy’s didn’t know or understand them. - Wonky interactions that make engaging with search difficult for user
We saw fixing some of these interactions as quick wins and a way to immediately be on par with customers expected experience with search. Some of these were as simple as how to initiate search and close autosuggestions from the search input. - Tight spacing on suggestions makes it harder to read/scan
In general, text legibility was an issue throughout the site. But with search becoming a larger entryway to finding products, then this is of high concern. It also speaks to brand equity and customer trust. - Customers like the autocomplete feature and use it actively.
Not a real surprise. It’s consistent with findings from other research. It gave more credence to make sure it worked right and helped customers in their journey. - They feel that autocomplete gives them an idea of what all Macy’s offers.
This gives us insight into how to creatively use this space and the dangers within it. If a couple of keystrokes doesn’t pull up the right suggestion, then customers will leave the site and go elsewhere even if we do have the product they’re looking for. - Customers did not notice the images that appear below the autocomplete (APR), as they are below the fold for most and said they would want it to be moved.
- For those who noticed the APR, they were seen as ads and not personable to the user.
This means they were likely to be ignored and to be treated as another annoying ad. The click rate had relatively low numbers that strongly suggested the same. We could now attach a reason as to way with high level of confidence. - Customers did not notice that hovering over the autocomplete results changes the APR.
This was due in part because for some screen resolution sizes the images sate below the fold.
The results made it clear that quick wins could be had by fixing usability issues. Then concentrating on the other more time-intensive findings. There was an opportunity to have the auto-suggested product recommendations (APR) that appeared below some of the autosuggestions provide more value to our customers. They saw value in the APR when they believed the suggestions were personalized and helped them in their journey.
Reading is Fundamental
Not being a subject matter expert in search led me to do a lot of reading. It proved even more useful after learning that the analytic tags associated with search weren’t tagged properly. Without that crucial data, I would rely on some suggested tricks, like looking at system log files, to help get a better sense of how customers were using search. It also provided a framework for the different search user types and the intents behind.
It provided a framework to understand the different Search roles for a customer — something we could at least map our customers too to start with. It helped immensely with the less UI intensive parts of search to understand which role customers were in when they engaged with search.
Books:
Search Analytics: Conversations with Your Customers — Louis Rosenfeld
Ambient Findability — Peter Morville
Search Patterns — Peter Morville & Jeffrey Callender
Designing the Search Experience: The Information Architecture of Discovery — Tony Russel-Rose, Tyler Tate
Designing Search: UX Strategies for eCommerce Success — Greg Nudelman
Articles that proved helpful:
https://searchpatterns.org/ -
https://searchuserinterfaces.com/ — 2009
https://www.nngroup.com/articles/search-log-analysis/
https://www.nngroup.com/articles/internal-website-search/
https://www.bigcommerce.com/blog/ecommerce-site-search/#meet-the-consumers-who-use-on-site-search
https://www.baymard.com/ux-benchmark
https://rosenfeldmedia.com/search-analytics/log-sample-google-appliance/
https://en.wikipedia.org/wiki/Exploratory_data_analysis
—
Design + Solution
By default, the placeholder text in the search input field read “Search…”. This was to give more affordance to the underline that served as the search bar. When active the text changed to “I’m looking for…” to make the language more personable.
A quick links section was added to the blank state of search that listed some of the popular actions (find a store, pay bill, gift cards, rebuy) customers take on the site but have a hard time surfacing. This would help limit calls to customer service, while also surfacing prime business initiatives.
Search was expanded to be a full-width experience. which enabled more horizontal real estate for the APR.
To help with legibility we gave more breathing room between auto-suggestions, along with an increase in tracking.
Prototypes and Guerrilla Testing
To come to decisions faster we would continually create prototypes to guerrilla test. The Product Manager and I would work together to decide what we wanted to test, usually fine-tuning specific interactions that we thought we could improve on.
A good example of this was testing around the search modal on mobile web. The full screen modal on search results was a big departure from the dropdown pattern currently being used on mobile web. Our testing showed that it was the better customer experience but there was still confusion over how to exit the screen and/or clear search.
C is a direct iteration of B with the ‘clear’ icon lighter on screen. We felt B’s version was too heavy and wanted to see if we could get the same effect by reversing the knockout.
D came about in our quest to remove as many pixels as possible after feeling C had too many icons. It answered questions we had: Was the search icon necessary after a customer has intentionally entered search? No. It wasn’t. Would customers understand the difference between “clear” and the ‘X’ icon? Yes, they did.
We went through one more update to make sure there was continuity between the mobile app and mobile web experiences after coordinating with the lead designer for App. Because the home screen didn’t have an underlined search, we removed it.
Outcomes
In A/B testing we saw a 5% increase in search usage. Were people finding items faster though? Because Search was tested along with changes to the main navigation in the header, it was tough to determine if the increase was due to people having trouble using the new navigation, the prominence given to search in the header, or both.
When the changes to the navigation failed in A/B testing Search was pulled along with it. Though we didn’t get all the insights we wanted it was determined to have enough of a significant increase to queue it for release. The changes were also rolled into the global design system.
Lessons Learned
We did a lot of guerrilla testing, but considering the numbers, we could reach with an online test it would’ve been great to have that as a more reliable option. Having a live prototype would have given us the ability to better test auto-suggest, interactions, and flows for Search. This is something our whole team was in agreement with but in current Macy’s environment it's hard to get a provisioned server for user-testing. With all the transitioning happening around making our teams work better, I believe this will happen sooner than later.
It’s amazing how teams can gel together through adversity. There were a lot of unforeseen hurdles that arrived due to all the transitions happening at the time. We took the bumps as they came, and pivoted when necessary. As a designer who puts a high value on quality and is the voice for the customer experience, it can be hard when decisions are made by a combination of subjective opinion and company rank rather than customer and business needs. To our teams' credit we pushed on this as best we could. What I’m most proud of is the progress we made as a team and the strides we made on getting Macy’s closer to a better process.
