BOBST sales and marketing tool
A web-based 3D configurator that enables BOBST's sales teams to interactively showcase and customize machine configurations directly to potential customers during client meetings.
The tool was built for BOBST, a Swiss company that supplies machinery and services to the packaging industry, to assist sales and marketing team showcase their "Digital Master" series of label production. In the first weeks after publishing it attracted 2.5K users with a 20% conversion rate.
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 to interactively demonstrate product capabilities and enhance customer engagement during sales presentations. send that configuration to the Bobst CRM for continuation of sales.
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. By building the tool's user experience around the end customer's perspective, we ensured that the configurator would not just serve sales objectives, but genuinely solve customer pain points in equipment selection and customization
.png)
Define
Guidelines
The client 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 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 a summary of the configurated machine during checkout
User flow
UX considerations
-
Clear messages were added to any actions that had dependencies
-
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
-
More information about every component was hidden until user requested it. When more info was requested it appeared in a side panel over the add/remove controls. This focused the user on the action they requested and lowered the cognitive overload by hiding "non-relevant" information for the task at hand.
Design
Wireframe
To begin the design stage I searched online for configurators (3D and not) to get inspiration. After that, I created a low fidelity wireframe. I wanted to make sure the overall structure of the website was logical and agreed upon by the customer before moving on and incorporating the design system and branding rules provided by Bobst.
Machine selection
More info panel
Configurator
Checkout
High fidelity
The client was happy with the overall structure of the configurator. We received the Bobst brand guidelines and continued on to implement it in our high fidelity design. The high fidelity design went through some iterations correcting branding decisions and added limitations that Bobst wanted regarding adding and placement of certain components.
At this stage it was important to show the design for the website on a tablet device too.
A main use case raised by the client, was using the configurator in conventions and shows. Sales and marketing personnel would be using both tablets and large touch screen TVs. So, besides making the design responsive, we made sure the design was "touch ready" also in the desktop layout.
The client was engaged and provided thorough feedback on the changes they wanted to see in our design. A key insight was the need to separate the selection of certification and gear type from the configuration of components, as these choices affect which components are available for customization. This approach allows us to show users only the specific components they can adjust. Additionally, we received the Rotax brand book to incorporate into high-fidelity design for client approval.
Iterate
Better feedback for drag and drop
Phase 1
Phase 2
An important experience change that was done was the feedback to dragging and dropping components. In the first phase it seemed there were situations where the user expected the drop to be in a different place then where it was really placed. After testing it seemed that the issue was solved in the second phase.
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
More feedback that we received, from Bobst personnel, was regarding the "more info" panel, that has details about each component. Users wanted a lot more details! So more details were added and it even specified what type of use each component has (i.e.- the specific use of the press)
Reflect
Impact
The website had traffic of 2.5K users in the first month of publishing, with a 20% conversion rate.
Personal takeaways
We used the Sketchfab platform and API to display the 3D model, which gave us a certain predefined set of tools to use but has it's limitations. Specifically Sketchfab's API was limited with the drag and drop functionality and the type of highlights we can do on the 3D model. These aspects were very important for the customer. This issue caused a delay in the development and inconvenience with the customers. I learned from this that it is very important to understand technical limitations very early on in the design process in order to convey that to different stakeholders and to make sure it is taken in to account in the experience of the user.