Work / Grupo NGN

A technical limitation turned into a design award

The platform provided by the event organizers was built for images and text. We wouldn't be able to bring the interaction we most wanted to the booth — EngageNow — until I discovered that its rich text field would render raw HTML. That small opening changed what the booth could become.

Role
Product Designer
Scope
Booth design and front-end, start to finish
Period
October 2020
Platforms
Cloud Conventions
Tap to enlarge ↗ The finished booth, with live interaction built into the experience.
THE BRIEF

Everyone got the same box

October 2020. The industry's telecom fair was going virtual in a hurry, using an event platform that gave every exhibitor the same container. What was asked of design was simple: a set of JPGs — product images to drop into the booth.

I came to it with only a few days left on the clock. The obvious path was to work within the platform's constraints and deliver the assets. But before accepting those limits, I wanted to understand what the platform could actually do.

THE OPENING

I started pulling the platform apart

The HTML was only the beginning. I started inspecting the platform itself, looking for places where its defaults could be overridden.

The profile image, page background, spacing and colors — details that seemed fixed — could actually be customized by targeting the platform's own selectors and applying my own styles. This gave me control over parts of the booth that the standard interface didn't expose.

Tap to enlarge ↗ The platform's own classes, mapped in the stylesheet to override the defaults.
THE WORKAROUND

JavaScript got in the way

Any <script> I placed in the rich text field came out as plain text on the page. The field escaped it, most likely for safety, and the EngageNow interaction needed JavaScript to run.

So I moved the logic out of the field. The script went into a small HTML file on an external server, and the booth loaded that file through an iframe. The block seems to have applied only to what the text field itself rendered, so a page loaded inside an iframe ran normally.

Tap to enlarge ↗ The external JavaScript loaded through an iframe inside the booth.
THE BUILD

I built the booth like a website

I took the experience from concept to code myself. Starting in Adobe XD, I designed the booth as a web experience rather than a collection of static assets, then built it with HTML, CSS and JavaScript.

The result was a fully customized booth experience — designed, built and adapted to work within the platform's constraints.

Tap to enlarge ↗ Three pages, one stylesheet, all running inside the platform's rich text field.
THE COST

Working around the platform

The booth relied on custom code entered into fields designed for text content. Preserving that code required a specific saving sequence, and even small copy changes meant repeating the process to make sure everything still worked as expected.

RESULT

Best in Show — and the only booth with live interaction

The booth took Best in Show, judged by an independent industry jury. It was also the only booth at the fair where visitors could click through and speak to a person live, inside an environment where voice interaction had never been part of the original platform experience.

PACE ACX Virtual 2020 Best in Show award badge
A LATE COINCIDENCE

A month later, the platform's CEO was looking at the same wall.

On 19 November 2020, weeks after the fair, Convey announced Cloud Exhibit — a portable booth an exhibitor could carry to any event. Its CEO described the problem from the vendor's side of the table: event platforms built around a one-size-fits-all model, exhibitors with little say in which platform a show chooses, and limited control over branding, messaging and interaction.

Weeks apart, we had arrived at the same problem from opposite sides of the table.

Source “Convey Services Launches Cloud Exhibit” — AiThority, 19 November 2020 aithority.com/it-and-devops/cloud/convey-services-launches-cloud-exhibit