CRAFTING THE SOLUTION
Knowing we’re not re-inventing the wheel, I find a good practice is to see how others are approaching the problem. And ask: What is working for them? Why may it work for us? Why wouldn’t it work for us? For example, I browsed and took screenshots and notes from the below e-commerce sites to gain some inspiration on product listings and discoverability.
CRAFTING THE SOLUTION
Scale & Visual Hierarchy
We wanted to ensure feeling of clarity, and simpleness. By setting relevant scale and visual hierarchy to our components, we made important information take centre stage, and supporting information more muted but still present. For example, here in our shopping cart dropdown, we wanted to place priority on product name, quantity, cost, and the CTA to move to checkout.
We improved the loading state of products, such that users received communication and confirmation that products were indeed being loaded. Rather than a simple circular loading animation, we used an animated skeleton of our product listings in order to not only communicate that the site is loading, but also hint at what is loading.
The more visible an element is, the more likely users will know about them and use them. Our shopping cart was previously located on a certain page, in a certain location, and so may sometimes be troublesome to locate and proceed with checking out. By placing the shopping cart in the top right fixed header, this shopping cart will be accessible and visible at all times, reducing friction to checkout. Also, this plays on Jakob’s Law, as it is a common placement on other online shopping websites.
CRAFTING THE SOLUTION
Infinite scrolling vs. traditional pagination
Inspired by popular apps such as Twitter and Instagram, I was intrigued by the idea of the infinite scroll, where you can continually scroll content as new content loads in once you reach the bottom of a page. I prototyped the concept and flow, and pinned the two against eachother.
Through prototyping, I learned that it would be difficult to reach the storefront’s footer section. The concept evolved to a Load More button.
Through further research, I learned that infinite scrolling or load more buttons are popular on social media sites because users are browsing without necessarily looking for something specific. Infinite scrolling is not an ideal solution for site visitors who want to achieve goal-oriented activities.
For our purposes, shoppers are often looking for certain products, or certain categories of products. By sticking with pagination, this allows them to quickly jump to or back to products they wish to take action on. Furthermore, users have more control over how many products they can see per page, choosing a setting that fits their wants/needs with their internet speed connection (load times was a big sticking point for our users).
Infinite scrolling, or Load More button. Upon reaching the bottom (or pressing button), the product list will load more products to view (if any).
Traditional pagination. User can jump to next or previous pages, or jump directly to a certain page.
Tile & Row View Toggle
In the heart of improving discoverability, and seeing how other sites handle the display of their products, we explored the idea of allowing users to view products in a “tile” layout (i.e. multiple products per row), or “row” layout (i.e. one product per row). This would allow users to see more products more quickly, or view more of the description of products.
We loved this idea. But, it did not get implemented. Why? When scoping out the project’s dev resources and timeline communicated to our merchants, it got cutoff. We hired an external agency to handle the front-end development, and in order to meet deadlines (alongside concurrently running projects), we planned for our in-house devs to touch the back-end logic as little as possible.
But the plan was for this storefront refresh to be a kickoff v1.0 of many iterations to come. We made sure to table this new feature for future implementation!
Again, in the spirit of improving discoverability, we explored the idea of implementing categories that would automatically be generated based on certain parameters (i.e. recently added, sale). Current information architecture did not allow for products to be placed in more than one category, and this was something much requested from our users.
This was another feature that got left off the table for this go around of the project due to resource and time constraints.