One of the goals of Fitted was to provide a B2B e-commerce solution for retailers and brands. This solution would provide retailers with a "one stop shop" for all of their at-once orders. Even going as far as allowing retailers to place orders for different brands in one cart at the same time. Which is pretty interesting in the B2B world. (I'll save those details for another case study.)
As we continued to build things out for this one stop shop, what we were learning from the community was that a lot of orders get created and submitted by brand reps. Brand reps can be employees of the brand or they can be a part of a third-party organization. Each brand rep works with multiple retailers within a region. They serve as the primary point of contact for the brand regarding new product while also providing support and taking some of the administrative burdens off of the retailer like placing weekly orders for inventory.
So, Fitted had the opportunity to provide these brand reps with a solution to better manage and submit individual orders for all of the retailers they supported. All that was needed was to give brand reps access to the carts of each of their retailers.
In regard to UX, there were a few ways that this could have been handled, but a significant factor in determining the path forward was that the Fitted platform consisted of 3 separate applications: Retailer Portal, Brand Portal, and Admin. At the time we were working on this project, the only way that an individual user could have access to multiple retailers without having to create an individual account for each of them was through the Brand Portal and/or Admin. We knew brand reps wouldn't be allowed access to Admin, so we did everything through the Brand Portal.
The first priority was to make sure the user confidently knew which retailer they were acting on behalf of throughout the entire purchasing experience. This required updates to the Products page and the header of the application.
The Brand Portal was originally set up to present cumulative retailer activity and data to the brand user. So in order to allow a brand rep to fill carts on behalf of their retailers one of the first things we had to do was make the user select which individual retailer they wanted to work with. The solution we came up with was that the first time after log in the user lands on the Products page (which is where you view and add products to cart), they are required to select a retailer. We presented an empty state version of the page where they could search or scroll through all retailers they had access to to make a selection.
One thing to call out in the mock-up is that the standard cart icon doesn't show up until after the user selects a retailer. This was a compromise with the development team. Because of the cumulative information currently presented on other pages, we had to limit the selection and presentation of individual retailer information to just the Products page.
After a selection has been made, the header is updated to include a cart icon, quantity counter, and a retailer dropdown that shows the current retailer selection and offers the ability to search and select a different retailer to work with.
This was well received by users for a few reasons:
Out of caution, we updated the cart UI as well to ensure the user was confident on which retailer they were placing an order for throughout the entire purchasing experience. This didn't require much, just a bold banner across the top letting them know which retailer they were acting on behalf of.
There were two items that came about during early tests of the new experience.
First, users wanted to be able to know if they had an active cart open for their retailers. Seemed reasonable to place a small cart icon next to the retailer inside of the My Retailers dropdown.
And, second, users wanted to know which retailers had a method of payment attached to their account. What was happening, was that a brand rep would go through the process of adding products to a cart for an individual retailer and at the time they were to submit the order, they wouldn't be able to check out because they couldn't pay. Because of the complexities of handling payment for B2B e-commerce, a comprehensive solution to this issue was beyond the scope of the request, but the least we could do is display a small icon alongside each retailer who doesn't have a payment method on file anytime a user has the option to select the retailer.
It was nice to see a pretty impactful change to the user's experience get integrated nicely with the current interface. The solution doesn't look bolted on as an afterthought and it doesn't feel out of sync with the rest of the application. Though it would have been nice to see how selecting an individual retailer would be handled throughout other areas of Fitted's Brand Portal, I do think this was a very solid first iteration, for both the team and user, toward moving down that path.
