Navigation, Browse, & Search
Similar to in-person shopping, an exciting and successful online shopping experience depends on a customer's ability to search, browse, and navigate a store's catalog.
How do we combine these elements to create one seamless online experience that works for customers with all types of shopping intentions?
Role: Product Designer
Timeline: July 2021 - November 2021
Org Collaborators: Retail, Growth, & Engineering
Existing UX & UI
Our customers' current navigation, search, and browse experience are separate functions with little overlap.
“As someone who is gluten-free and enjoys shopping local, I'd like to be able to view items that fall under those two categories easily.”
“I’d really like to be able to see all of and filter through my search results instead of flipping through each page.”
“I have a tough time using the search bar; instead of offering me the most relevant item, it first shows me products that contain what I search as an ingredient, instead of the item itself.”
Increase Discoverability → Increase AOV & Brand Value
Decrease initial user drop off rate with a seamless transition from initial site contact → catalog browse
Limitations & Scope
This project was moving at a fast pace and with limited engineering resources. Designs needed to meet the customer and business objectives while remaining technically lean.
I also had to ensure that new designs would function parallel to how SKU input is performed in our dashboard by the Retail team.
Designed to tie navigation, search, and browse into one cohesive experience on two screens. Each department would get a landing page to feature products. Search and categories navigate to the product list screen where items can be filtered down or sorted.
Use cases define specific functions that this new feature should include.
Prototype validated by testers. Conducted desktop and mobile tests on three flows: Navigation, filtering tag and subcategories in category browse, and search.
Key pieces of feedback:
“It’s hard for me to tell the difference between the tag buttons above the products and the tags underneath the filter; they look the same.”
“Once I really look at the filter options, they make sense, but they aren’t clear from the get-go.”
“I find it challenging to scroll through the mobile categories when scrolling down causes the popup to close.”
“If I have filter options selected in one category and I move to browse through another, I’d expect the filter options to clear.”
How I addressed it
A category page with options to filter by tag, on the left, or subcategory, at the top.
Search dropdown to search results page in mobile. Customers can add directly to the cart in the search dropdown or view all.
Department landing page with category hover state active. Hover state displays subcategories for customers to view the breadth of the catalog from the landing page.
What I learned...
What I would do differently...
For this feature to function successfully, it needed to align with Zero's SKU input function in the dashboard. I was asked to go into this product with no knowledge of how the dashboard works with the idea that after creating the designs, we could descope it to fit the flow with the dashboard. While I understand removing prior knowledge limitations, I think the process would be more efficient if I designed it with some background knowledge of the dashboard, especially given the shorter timeline and quick pace.