Tug of Draw streaming minigame

Tug of Draw is a streaming minigame where chat draws a picture collaboratively with text commands, illustrating a secret prompt that the streamer must guess. A free drawing mode and a preset script mode are also available.

Drawings are made in a “turtle graphics” fashion by a cursor on a grid. The cursor’s next move and color are chosen by ongoing, rotating polls. The streamer and their moderators can also intervene as needed.

Tug of Draw window with a Free Drawing round active and a theme applied
The game can be themed to fit into any Twitch layout.
1 of 5

Process

I created this app as a contract project for a Twitch streamer in early 2021. It is an Electron cross-platform desktop application using the Vue.js and Quasar frameworks and featuring Twitch API integration.

The client approached me with a concept for reversing the usual Twitch drawing game concept—where the streamer draws and chat guesses—using a voting system. We fleshed out an interface design collaboratively, drawing on the client’s art skills and my UX experience. I then prepared a specification that addressed the interface design, Twitch integration criteria, channel moderation and safety needs, and the geometric details of the drawing process.

The project scope included deployment of the app to the client’s channel and refinements based on testing with channel moderators and the general audience. I enjoy these opportunities to observe end user interactions with the product. In this case, observation led to rebalancing UI element sizes and retiming a scripted event, both to guide the attention of chat in the crowded, fast-moving Twitch interface.