For the initial launch of Bezar, we created a simple vendor portal that allowed designers to ship products to customers. Vendors could view a list of orders and download packing slips to fulfill orders as they came in. The design was nothing special - just some default Bootstrap styling - and we knew we could do better.
Six months later, we expanded Bezar to incorporate permanent Storefronts for designers. Vendors would manage their entire brand on Bezar, including the visuals, copy, and product selection. For this update, we revisited the existing vendor portal experience, redesigning the existing functionality and adding in additional features for managing Storefronts.
To start, we focused on improving the current workflow for vendors fulfilling orders:
We placed the high-level navigation at the top of the page, giving us extra real estate to present important information such as order date, order number, and details of the product purchased by customers.
We added in the ability for vendors to download multiple shipping labels and packing slips at once by selecting multiple orders and combining multiple documents together into one printable PDF.
Vendors could also filter orders by state, such as "Awaiting Tracking" or "Shipped". We connected these filters with an Aftership webhook so that the order states would automatically update once scanned in by FedEx or UPS. This allowed vendors to treat their vendor portal like a todo list or email inbox, consistently checking the "Awaiting Shipping" tab to get the latest batch of orders to fulfill.
From there, we focused on allowing vendors to build out their Storefronts. We mirrored the location of the form fields with the customer-facing Storefront page, making it easier for vendors to understand the layout of their page:
We heavily-emphasized previewing the Storefront to prevent mistakes such as typos from being on the site. "Preview Storefront" and "Save Changes" buttons were shown in a sticky footer that followed the vendor down the page.
The final step involved getting information for the products. For this, we used a product management catalog called Merchantry. Unfortunately, vendors would have to log into a separate service to manage their products, but we provided a handy link to the service and to documentation within the vendor portal:
Once the products were imported from Merchantry, vendors would access the vendor portal to make products active and set the presentation order of the products:
Using this new vendor portal, Bezar was able to onboard hundreds of vendors simultaneously with only one account manager overseeing the process. We launched the updatd Bezar in October 2015 with 10,000 new products.