HumanBuiltAI
Sauza Sparkling Margarita/Creative technology/In-store activation

One throw, two screens.

A guest texts a keyword, gets a link, and their phone joins the kiosk iPad over a WebSocket. They flick a lasso off the phone and the iPad plays one of six pre-shot clips, so the throw reads as one continuous motion across both screens.

Recognized with an industry award for its use of WebSockets.

Role
Creative tech lead
Team
Front-end developers, graphic designers
Platform
Mobile web, iPad kiosk, SMS, WebSockets
Year
2013–14
Kiosk attract screen: a hand holds a phone showing the lasso in front of a Sauza Sparkling Margarita bottle, next to the Lasso Up With A Cowboy title and a Play the Game button
iPad kiosk · attract screenFig. 01
Promo videoWatch on Vimeo ↗
02 — Context

Your phone is the lasso. The iPad is the ranch.

Sauza wanted an in-store moment for Sparkling Margarita that people would stop for. The kiosk iPad ran the show, and the guest’s own phone became the controller: no app to install, just a text and a link. Each guest got five throws at a bottle on a fence post.

As creative tech lead, I designed the interaction and the system behind it, and led a team of front-end developers and graphic designers through the build.

Age gate on the kiosk iPad: a cowboy in a plaid shirt beside a blue birth date picker with Set and Cancel buttons
Every session opens with an age gate on the iPadFig. 02
03 — The flow

Eight steps, two devices.

I wireframed the phone and the iPad together, one step per page, with the socket messages between them. It kept design and development looking at the same thing.

{{ s.alt }}
{{ s.label }}
Flow wireframes · phone above, iPad belowFig. 03
04 — Pairing

A text, a link, a four-digit code.

The guest texts LASSO, taps the link that comes back, and enters the code shown on the iPad. The phone opens a socket and joins that iPad’s room.

No appSMS and a mobile web link got guests playing in seconds, with nothing to download on store Wi-Fi.
Right kioskThe code maps the phone to the right iPad when several run at one event.
One sessionThe socket stays open for all five throws, so there’s no reconnecting between turns.
Wireframe: phone screen to enter the code 4821 and connect; iPad shows You're connected with instructions to flick the lasso
Step 05 · Pair phone to iPad
05 — The throw

Swipe direction and speed become the throw.

Touchstart to touchend gives an angle and a speed. The lasso keeps travelling off the top of the phone at the swipe’s speed while that vector goes to the server. The server picks a clip, and the iPad, with all six preloaded, starts playing as the lasso clears the phone.

Wireframe: phone with lasso ready and chevrons hinting an upward swipe; iPad idle loop reading Flick your lasso toward the bottle
06Aim and flick
Wireframe: phone shows Look at the iPad as the lasso leaves the top edge; iPad plays the ringer clip
07Lasso crosses screens
Wireframe: result screens, You lassoed it on the phone and You lassoed a cowboy on the iPad
08Result
06 — System

Four messages carry the whole game.

The phone and the iPad never talk directly. A small WebSocket server pairs them, turns each throw into a clip, and tells the iPad what to play.

Guest phoneMobile webEnters the code, reads the swipe, sends the vector.
ServerWebSocket roomsPairs by code, maps each throw to one of six clips.
Kiosk iPadVideo playerIdle loop plus six preloaded throw clips.
{{ m.route }} {{ m.msg }}
Message payloads as specified in the wireframesFig. 06
07 — Clip selection

Six pre-shot throws, one seamless cut.

The throws are pre-shot video. Every clip starts on the idle loop’s frame from a locked-off camera, and the lasso always enters from the bottom edge, where the phone sits. That shared frame is what makes the handoff invisible.

{{ c.n }} {{ c.name }} {{ c.rule }} {{ c.file }}
Angle and speed thresholds shown are illustrative.
08 — Outcome

Award-winning use of WebSockets.

The project won a prestigious award for using WebSockets, then bleeding-edge technology, to make a lasso leave one screen and land on another. The effect was the point, and it worked.

09 — Reflection

The technology disappears into the gesture.

Guests never saw a socket, a room code lookup or a clip table. They saw a lasso leave their hand and land on a bottle. Designing the phone and iPad as one screen, and the system as part of the interaction, is what made that possible.