A bit of context: our platform helps retailers & suppliers manage, improve, and distribute product data to increase sales, reduce returns, and improve time to market. With multiple Fortune 50 retailers as users, our platform manages A LOT of data.
Currently, our product is extremely outdated, utilizing sunsetting, browser-specific, and painfully slow Silverlight. So, instead of improving the current version, our team is rethinking and reinventing the product experience in a complete end-to-end platform overhaul.
One of the biggest hurdles, which provides a key opportunity to “win” users in our next generation product, can be summed up in a single user story:
As a user, I want to be able to quickly find products, so that I can update, delete, or distribute its data.
With thousands of products, digital assets, and files being managed within our platform, our goal is to develop a simple process so that users can find any single product within their repository of thousands of products.
Evolving pagination & infinite scrolling
With tabs overflowing the top of my Chrome browser, I recently found myself overloaded with information in the middle of the battle between pagination and infinite scrolling. I was stuck in the mindset of deciding “this” or “that,” but luckily like clothing, UX is rarely a one-size-fits-all game.
Trends influence design strategies due to familiarity with users, but what separates great experiences from the good, is our ability as UXers to absorb, adapt, and evolve inspiration to solve our users’ problems, not others.
So, I hit the drawing board and began mocking up ideas to include the best of both worlds. From the start, we wanted to include:
- Location Context: Both pagination and infinite scrolling struggle with telling a user where they are in the pool of results. In pagination, page numbers don’t provide context to help “findability” because, like in the example below, it’s difficult to know which results will be found on a page. The same is true for infinite scrolling, as the scroll bar provides little-to-no value to users when perusing through an endless list of items.
2. Relative Category Depth: What this means is that we wanted to understand how many of each “category” there were relative to other categories. For example, if there are 5,000 products starting with “M”, how does that compare to products starting with “N”?
3. Quick Access: Understanding where and how many of something is great, but how does a user access it? We wanted to develop a system that enables users to quickly access their results, regardless of where they were.
Introducing: contextual scrolling
In the end, we built out a timeline-based scrolling feature that provides a simple way for users to locate, navigate, and understand products within a complex, infinite list of results.
The timeline scrolling feature includes the following elements:
- Timeline: The blue bar shows where the user is within the full list of results. As the user scrolls, the bar increases, and the ‘dots’ increase to show what category they are viewing.
- Categories: Dots are placed on the timeline to show how many groups (months, letters, etc.) there are and where they fall on the timeline.
- Category Depth: The distance between dots (categories) is relative to the number of results within the list. The bigger the gap, the more results.
- Navigation: Users can click on a dot to be quickly taken to those results within the infinite list. (We’ve worked with our dev team to pre-load the selected category and skip all other categories to cut down on load time and server requirements.)
Note: we also include a set of filters specific to each page, and we’re working on a global search to expand the findability of products.
Focusing on our “product-awareness”
With publicly shared style guides, inspirational Dribbble posts, and educational guides on Medium, it’s easy to do what I originally did and blindly follow best practices, especially with an overflowing backlog.
But, our job as UX designers is to help define and refine our own product-awareness to build products that are effective, impactful, and laser focused on our unique situation. We need to continuously strive to reach an intimate understanding of our user’s needs, business goals, and technical limitations to implement products that are effective, impactful, and laser focused on our unique situations.
Hope this article helps, and if you are currently building a product facing similar issues, or are planning to build one, I’d love to hear from you!