Callaway Golf offers a selection of product models with varying levels of customization to accommodate different types of players, a single model can have over 100 variants. These variants are already in stock and available to be purchased in bulk to our business customers. With our developers planning to restructure the code for our B2B ecommerce site, we decided to take advantage and make some improvements to the visual design of the page to simplify the bulk ordering process for clubs.
The Challenge: How might we make it easy for business users to bulk oder stock clubs?
On our existing site, users would input a quantity onto a table based on the combination of attributes of that club. Each input box in the table represents a specific club configuration. and because some clubs had a large amount of variants, the table could get quite large and would require horizontal scrolling. Red info icons displayed any notices about stock availability.
Below the ordering table was an order summary that displayed abbreviated information about the clubs already you had selected. It also did not show full information about the clubs you were ordering or any notices about stock availability. Users would have to recall what they inputted.
While we were unable to conduct user interviews or user testing of the current site due to business constraints, I was able to gather insight on some of our users from members of my team who had previously worked on the B2B site. Our users ranged from big box retailers to small local golf equipment or fitting stores. Users on this site were placing orders for their stores to either replenish stock and order newly released products, sometimes for a specific one of their customers.
Compared to our B2C sites, users already knew what products they were going to order before arriving on the site and so they preferred a simple interface. The page content that was valuable to them were product title, product image, product configuration, and stock information.
I designed 2 mockups to present to our business and developer stakeholders. I relied on research of best practices and members of my team who had worked on the last B2B project to inform my designs.
My first design kept the horizontal scrolling on the table but added filters on the table headers to give the user control over what they were viewing. A collapsible order summary was added that to show users information about the products they had selected.
My second design reorganized the table to display one product per row. Like in the first design, filters were added to the table headers to help users find the products they wanted. The order summary was also displayed beside the ordering table so users could keep track of what they had selected.
4 User tests of both designs were conducted with high volume customers. Testing showed that users favored the second design over the first one. They found the single column of input boxes to help with reducing errors in ordering. For both designs, the filters were found to be helpful in finding the correct products to order. Some users also commented that the first design resembled the B2B experience of some of our competitors, which they found to be a positive change.
The new designs were passed off to our development team and have been implemented on our live site! 🎉 Feedback surrounding the ease of use of the new bulk ordering tool has been positive. As my first project with B2B users, this was a huge learning experience for me. The biggest challenge I faced during this project was being unable to conduct user research before starting on designs. However, working closely with my team and conducting research on design best practices online helped me create a simpler stock ordering process for our B2B site.
