BOBST sales & marketing tool
A web tool for Bobst sales teams and customers to visualize and configure industrial label printers.
Don't judge until you try it 😉 https://configurator.bobst.com/
SUMMARY
A web-based 3D configurator that enables BOBST's customer as well as sales teams to interactively showcase and customize BOBST "Digital Master" series of label prniters
GOAL
Attract credible leads by showcasing to customers the option to tailor the printer to meet their company's specific requirements.
ROLE
Project manager, Product designer (Research, UX/UI design, user testing, handoff) in collaboration with developers and 3D artists
CONTEXT
BOBST approached frontline.io after seeing the Rotax configurator, looking to create a similar 3D-based tool for configuring their machines—focused on simplifying complex setup processes while maintaining an intuitive, visual experience.
After the success of the Rotax project, I again was given the responsibility to be both the Project Manager & Product Designer for this project.
PROBLEM
BOBST needed a lightweight, accessible sales tool that could demonstrate machine configurations with minimal technical barriers. The solution had to be universally usable, both by potential customers independently and by sales representatives, without requiring complex login processes or extensive system integration.
The tool needed to be truly "plug and play", allowing immediate interaction and configuration with zero friction for users unfamiliar with BOBST's internal systems.
SOLUTION
A web-based 3D configurator that empowers BOBST's sales and marketing teams, during sales presentations, to :
-
Interactively demonstrate product capabilities
-
Enhance customer engagement
And proceed to send the configuration to the Bobst CRM for continuation of sales.
DESIGN PROCESS
Empathize
Despite being a sales and marketing tool, the primary persona development focused on the end customer, typically packaging industry professionals responsible for procurement and production decisions.
This customer-centric approach was crucial because the ultimate goal was to provide a solution that addresses their core needs: understanding machine capabilities and visualizing custom configurations. Moreover, BOBST intended on integrating the tool in to there own website for anyone to access.
By building the tool's user experience around the end customer's perspective, I ensured that the configurator would not just serve sales objectives, but genuinely solve customer pain points in equipment selection and customization
.png)
Requirement gathering
BOBST personnel had several important guidelines that needed to be considered in the design process:
-
Enable users to start their configuration from a base digital configuration.
-
The user will be able to visualize each component separately, with a one line description of its function.
-
There are components that have dependencies- need other components to be added first.
-
There are some base components that can't be removed or moved to a different location.
-
There should be a summary of the configurated machine during checkout.
User flow
Wireframe
I created a low fidelity wireframe. I wanted to make sure the overall structure of the website was logical and agreed upon by the BOBST before moving on and incorporating the design system and branding rules provided by them.
Machine selection
More info panel
Configurator
Checkout
High fidelity design
I received the Bobst brand guidelines and continued on to implement it in the high fidelity design.
The design went through some iterations- correcting branding decisions and added limitations that Bobst wanted regarding adding and placement of certain components.
It was important to fine tune the limitations of the configurations, so I would be able to design it in a way that prevents users from doing logical errors or impossible configurations
-
Red active label (“Machine selection”) keeps users aware of where they are in the process and what to expect in the next steps
-
While in rearrange mode the view of the model was set automatically and locked to movement- this ensured user didn't get confused with dragging and dropping in a 3D environment and not to contradict mouse controls, that were used for navigation before, and used for drag and drop while in the rearrange mode
-
Contextual information placement: Module details shown only when relevant, reducing cognitive load while configuring.
-
“Proceed to Checkout” in a bold color stands out as the next obvious step.
-
Keeping “My Configuration” visible throughout checkout supports confidence and quick revision
-
Inline error messages keep the user informed without cluttering the form flow
Cross platform
One of the key use cases raised by BOBST was using the configurator at conventions and trade shows, where sales and marketing teams would interact with it on both tablets and large touchscreen displays. Beyond ensuring responsive behavior, we specifically designed the desktop layout to be fully touch-friendly.
The design was responsive and can be interacted with on mobile too. But, the main focus was to make sure it looked good and ran well on the tablets that were going to be used by BOBST personnel in trade shows and conventions.
Tablet vs. Desktop Adaptations
-
On tablets, configuration categories have an "accordion" interaction to reduce clutter and make navigation easier on smaller screens, unlike the fully expanded view on desktop.
-
Touch-friendly sizing was applied: buttons, toggles, and interactive elements were enlarged to meet accessibility standards and ensure smooth use in sales environments.
Iterate
Before publishing, the tool was given to five sales representatives at BOBST to test and give feedback
Better feedback for drag and drop
Phase 1
Phase 2
In the first phase it seemed there were situations where the user expected the drop to be in a different place then where the component was really placed. After changing the feedback, users didn't have that issue any more
Dimensions always displayed
Phase 1
Phase 2
A pivotal change that was made was adding the "Live" dimensions of the configurated machine according to what the user was selecting. This information initially was deemed not essential by Bobst but after feedback from Bobst sales team, it was put in high priority.
More details in info panel
Phase 1
Phase 2
Users wanted a lot more details! So more details were added allowing user to deep dive in to each component if they wanted too.
REFLECT
Impact
.png)
Very positive feedback from sales teams that worked with the tool in the largest printing equipment exhibition in the world (Drupa)
In the first weeks after publishing it attracted 2.5K users with a 23% conversion rate. Not including sessions done by BOBST sales teams, where conversion rate was a lot higher.
BOBST approached us to expand the configurator to another series of machines that they sell.
Personal takeaways
Using Sketchfab’s platform and API allowed quick 3D integration but came with key limitations. Especially around drag-and-drop and component highlighting, which were critical for the client. These constraints caused delays and impacted expectations. This taught me the importance of identifying technical limitations early and aligning them with both stakeholder expectations and the intended user experience.
Check out the live BOBST configurator https://configurator.bobst.com/
