Building a Virtual Trade Show Booth
A behind-the-scenes look at our work in an exciting and new product category, virtual trade show experiences on the web.
The following excerpts come from a discussion with Chris Herrera, lead developer at JAM.
Transitioning from Physical to Virtual
When creating an online virtual exhibition, we work closely with our partners to implement their designs.
Derse is a company that, among other global marketing & advertising functions, designs physical trade show booths and exhibitions for large corporations.
When the pandemic hit, they decided to repurpose their CAD designs for their clients for online use. What previously could only be used for screenshot demonstrations can now become a full blown three dimensional interactive environment in the browser; all with interactive touchpoints, videos, animations, and forms. That’s where we come in...
Building Process
The process begins when Derse signs on a client that’s requesting a custom booth design. Note that these designs are all constructable in real life. They will go back and forth with the client until a final design is approved.
Two Dimensional Virtual Trade Show Booths
When the design is approved, Derse will supply us with, depending on whether the booth is 2D or 3D, either Photoshop files or the 3D objects along with their images and textures.
Once we have the files, we begin working on implementing them into a presentable format. If it’s a 2D booth, then the work mostly consists of the kind of website building work we have been doing at JAM since the beginning.
The difference is that a big portion of the build is spent in Photoshop cutting out different layers of the booth so we can recreate the layers in the browser. When the file is cut into its major sections, we export all the sections to individual images and upload them to the server. After that, we begin coding the foundation of the booth, making sure to re-use effective code from previous projects where it makes sense, for example implementing analytics.
When the client approves the final interactive booth we activate the domain name and push it live!
Three Dimensional Virtual Trade Show Booths
3D booths are where things get interesting. We use software called Verge3D and Blender to recreate the 3D environment in an interactive real-time engine. We will first import all the files into Blender and make sure all the images load and apply correctly to the walls, tables, signs, floors, and anything else found in the design. We make sure to match up the interactive environment as closely as we can to the reference images, something that is not always an easy task given the differences between a real-time engine and an offline renderer.
Because the realtime engine must be interactive and preferably run at a minimum of 30 frames per second, it cannot have all the beautiful graphical fidelity of a slow high quality single imaged render. But due to technological advancements in the graphics landscape we can get very close!
We make sure to animate anything such as blinking lights, TVs that turn on and off, and preset camera animations that activate as you look through the booth. We can even implement an almost entirely hands off booth experience if desired!
As the booth gets closer to the reference design, we begin implementing the code that allows users to interact with the 3D environment such as touchpoints and pins. Verge3D’s coding system allows us to implement what would normally be complicated and specialized graphics APIs and libraries with a simple drag and drop interface and Javascript.
Once it's running great on our local computers, we upload the files to the server and make sure it all operates as expected, adding in any loading screens, startup forms, and any additional navigation buttons that overlay the entire booth experience.
Content Management System (The “Back End”)
Whether it's 2D or 3D, we make sure to integrate our customized Content Management System or CMS. This allows Derse to change certain aspects of the booth without needing to call us up and pay for more custom coding time.
Modals can be updated easily, information changed, images replaced, links updated, and more.
If we do need to touch down on the booth with new code, the CMS system assures that we can push those updates out fast.
This is a crucial feature in a space where sometimes clients need to change things very rapidly due to regulatory requirements or artistic vision. We have been able to push out updates that change entire scenes out in less than 30 minutes right when the client needed it the most.
Milestones Along the Way
During this entire process there will be milestones we need to hit wherein Derse’s client reviews the interactive environment to make sure it achieves their goals, as well as meets regulatory requirements and other specifications.
The great part of all this is that it's completely transparent to Derse’s client.
We provide Derse with an interactive format of their designs so that their clients can hold exhibitions at a time when countries are still in lockdown over the pandemic.
Analytics tracks all user interactions on the site:
- whether they loaded the booth correctly, to
- what they clicked on,
- when they clicked on it, and
- how long they watched or read the information before moving on.
So far, clients have been incredibly happy with the results!
Challenges/Ongoing Improvements
Trade Exhibitions are meant to be an opportunity to make contacts and connections, but the online environment is not always conducive to using gated content hidden behind a sign-up form. And in fact, we do see a significant drop off in user retention when a form is forced on users before gaining entry to the booth.
We have been able to mitigate this somewhat via a CMS enhanced capability to disable and enable the sign up form via a checkbox and utilizing A-B testing of sorts. The way people interact with booths online presents different challenges than in-person viewing, but one thing is for sure, it is much more affordable and more forgiving!
One other point; an online booth can run indefinitely, rather than only a week or so.
Have a look at our live demo!
Want to learn more about virtual trade show booths, or custom web experiences? Tell us about your idea today.
Use our chat window to chat with one of our staff or visit our contact page!
Virtual Tradeshow Booth Examples
Have a look at a few recent projects involving overhauling a large manufacturing catalog website, building a custom analytics dashboard, and
"An unbelievable mix of talent and knowledge! JAM came through for us every time!"
