Creating A Better B2B User Experience
Want an example of how custom development work can make managing your business easier? Check out this feature we recently built for a client – a product personalization live preview designed for their specific merchandising needs.
We were challenged by our client, an industrial distribution company, to create a live preview feature to help customers order safety vests with customized logos and text. The live preview would be dynamic, letting customers upload logos and input text to see them instantly appear on a preview image. Users would be able to try out different looks by changing the input and moving it to different areas on the vest (top, bottom, front, back, etc). Customers also needed to be able to order customized products in bulk.
IntuitSolution’s team built the product personalization feature to not only be functional, but also easy and intuitive to use. This focus on user experience is part of a growing trend in B2B ecommerce.
“Stay competitive by giving B2B customers a slick user experience, just like they’d expect on a B2C site.” – Aaron Nowlen, Lead Developer
Multiple Personalization Options
These safety vests are highly customizable. Customers can upload logos, input text, or include both text and a logo. They can also decide where on the vest the personalizations should appear. For example, a personalized vest might include a logo on the front pocket and a line of text on the back. IntuitSolutions’ challenge was to replicate this in the live preview.
“This particular product can be customized in so many ways,” said Nowlen. “We knew we had to account for every possible combination while making it easy for the store owner to manage.”
When a customer navigates to the product personalization modal, they are prompted to choose a location on the vest (front, back, top, bottom, etc) and to either upload a logo or input text. They can edit the text or logo to see it instantly update and they can also change the location through a dropdown. If they want to add additional personalization (for example, a logo and a line of text or two separate text areas), they can choose a new location and repeat the same process.
“This particular product can be customized in so many ways. We knew we had to account for every possible combination.” – Aaron Nowlen, Lead Developer
Improve UX With Popup Modal
Because the personalization process is multi-step, our team made the decision to not implement the feature directly on the Product Detail page. Instead, the personalization feature is contained within a popup modal that appears when you click the “Personalize” button below the main Product Photo.
“We want to cater to everyone who comes to the site,” said Nowlen. “By putting the personalization window into a popup modal, we make it easy for both the customer who just wants to grab a couple items and the customer who wants to place an in-depth, personalized order.”
These small design changes make a big difference. By streamlining the Product Page, we created a more simplified user experience that guides customers to what they need.
“We make it easy for both the customer who just wants to grab a couple non-personalized items and the customer who wants to place an in-depth, personalized order.” – Aaron Nowlen, Lead Developer
Configurable Based On Specific Product
Another challenge for creating a site-wide live preview feature is that not every safety vest can be personalized in the same way. For example, one vest might have an area where personalization should not appear, like a breast pocket, while other vests could have personalizations in that same spot.
Our developers solved by this by creating “personalization zones” that are configurable by product. By default, a safety vest has nine areas where custom logo or text can appear. If a given SKU cannot be personalized in one or more of those zones, that zone is disabled. To use the example from before, the safety vest with the right breast pocket would have the right breast zone disabled. This means the customer wouldn’t see that adding personalization in that location was even an option for that particular vest.
If you ever need to change or edit how a Product can be personalized, it can be done easily, without writing any code. Personalization options are controlled in the Merchant Center with Custom Fields.
“This is a great example of how custom development work can support your business needs,” said Nowlen. “When you work with a developer, you can say to them, ‘Not all of my products can be customized in the same way’ and we can build that into a solution that’s still easy for you to use.”
“When you work with a developer, you can [explain your exact need] and we can build that into a solution that’s easy for you to use.” – Aaron Nowlen, Lead Developer
Built For Bulk Ordering
B2B customers often order in bulk, but apparel customers ordering in bulk almost always need to select multiple sizing options. That means that, in a single order, a customer might order 100 vests in size Large, 200 in size Medium, and so on. Our developers know the client needed a bulk ordering feature so that customers could order the exact quantities of each size they needed without having to manually re-enter the personalization information each time.
Our developers created a bulk ordering grid which lets customers directly input the exact quantity of each size they need. Customers only have to choose personalization options once and can select size options from the same screen. This greatly reduces customer confusion and time to checkout.
A bulk ordering feature lets customers order multiple personalized Products in different sizes without having to manually re-enter personalization information.
Improve Your BigCommerce Store Today!
Need help with your BigCommerce store? IntuitSolutions specializes in creating personalized solutions with custom development work. This particular client needed help with product merchandising, but we create solutions for every aspect of an ecommerce business: payment, shipping, user experience, and more.
So if you have a pain point or challenge in your business, we want to hear about it. Call us today at (866) 590-4650 for a free consultation from our web development and design experts!
