Powr-Flite search dropdown
I designed an integration for Bloomreach, a search and merchandising tool for e-commerce sites. I designed versions for both Powr-Flite (a commercial-grade vacuums and cleaning company) and Nancy's Notions (a sewing company).
You can view this live at Powr-Flite's site. Unfortunately, the version for Nancy's Notions was never implemented.
Challenges
- Making a version of this that would work well on both sites, ensuring it would be easier/cheaper for our Magento agency to develop it
- Taking advantage of Bloomreach's filtering
- Highlight not only suggested searches and products, but content as well
- Working with Bloomreach representatives to ensure everything possible on their end
Nancy's Notions search dropdown
Search Dropdown
The main search dropdown on each site showcases the top suggested searches, categories search, content search, and suggested products.
Content search varied depending on what sort of content each site has: On Nancy's Notions, content was focused on projects and blog posts. On Powr-Flite, it was more product support based.
Bloomreach's representative told us category searching wouldn't work exactly how I had laid it out in that it would only show the categories that start with the search term the user has entered. We were fine with that.
Powr-Flite search results page
Search Results Page
Bloomreach fits into Powr-Flite's standard layout. To avoid having content results mixed in with products, I put them in separate tabs (Products, Articles & Support) with products selected as the default. Each one lists the number of items beneath it.
Nancy's Notions mobile filter menu on the search results page
Mobile filter menu on search results page
The mobile filter menu is a full slide-out that takes up most of the screen. The user can select available options, and the search results will automatically update in the background. The "Done" button at the bottom simply closes the menu, but it gives the user an easy-to-understand way to move forward when they're done selecting filters. (Clicking outside of the menu will work as well.)
Content Search
The content results page shows a mixture of content types that the user can filter and sort through similar to how they can on the product search. At the time of design, the only content Powr-Flite had was manuals, spec sheets, and parts lists. Since the team was actively writing blog content, I included articles as well.
Nancy's Notions content search had projects and how-tos instead.
Nancy's Notions sample branded search page
Branded Search
I mocked up a version of search that included a more "branded" approach. Bloomreach has the capability to customize the design of key search terms. In this case, if a user searches for a particular fabric designer we can display the results below a banner.
Unfortunately this (as well as showing product and banners on a no-results page) was out of scope for us.
You can view the Powr-Flite updates live on their site. The Nancy's Notions updates unfortunately did not come to fruition, but I'm glad I had the chance to work on them! It was a fun challenge to come up with a design that would match both sites.
Thank you for viewing!