WEBSITE AS A VIDEO GAME WHITEPAPER
When it comes to casual stranger-to-stranger interaction, communities are moving online. We react to news in the comment section of Reddit, we flirt with neighbors on dating apps, and we idly chatter on Discord. Yet asynchronous social apps have not seen user interface disruption beyond infinity scrolling feeds and reaction-emojis. What if you could reap the benefits of video game design—abstracting 2D content into 3D skeuomorphic objects, scrolling by manipulating the camera perspective, and juicing the mouse or touch interactions—without habit forming loops of a win / loss state? Could there be a way to stop feeling fatigued after a session of social media browsing?
36 min read • Published: July 05, 2022
NAVIGATION
Common scenarios emerged from interviewing people about the origin stories of their favorite friendships - chance encounter at some public event, introduction by mutual acquaintance, casual group sports, project collaboration through school / work / volunteering, and hitting it off at a private house / dinner party.
Dinner parties in particular stood out:
Could the dinner party user experience be recreated as an asynchronous private group chat?
First, I had to understand why two people click.
Since friends hit it off regardless of activity, I suspected that shared interests were a weak form of compatibility; confirmed by often-cited failures to hangout following a Meetup.com event.
Diving into best friend relationships revealed three interesting sources of compatibility:
I eventually stumbled onto a set of questions / prompts to ask throughout a 30-minute interview which could build out someone’s profile along these compatibility attributes.
But not everyone who attends public social events is lonely; many really do just want to do a shared activity then go home, which makes it more difficult to identify attendees seeking social support.
Although tough to spot, within public events I began identifying attendees who experienced a significant socially traumatic event:
I decided to focus on the age demographic of 25 - 35 assuming a) propensity towards trying a new app, b) resistance to becoming a curmudgeon, and c) actively spending time & money to address their isolation.
Where do these people hang out?
As someone who identifies with the above demographic, I participate in offline events, as well as online places like community apps (eg. Reddit, Discord, Slack) and dating apps (eg. Tinder, Bumble, Hinge) due to the ease of instantly joining a public community.
As a sporadic active user, I’ve experienced a few shortcomings preventing discussions beyond surface level:
What if a website whose primary purpose is to pass-the-time could have interactions optimized for entertainment rather than speed or usability?
A video game is basically an entertaining interface to navigate content (ie. world, story, creatures, items); game mechanics map nicely to a website’s primary methods of navigation - buttons, scrolling, and clicking.
*Buttons **🡒** 3D Game Assets*
As buttons tell website users, “if you click me, something will happen”, video game assets can convey to players similar intent.
Clicking a paper-airplane-button (before it disappears off screen) toggles popup
3D game assets can be further enhanced with playful attributes by tweaking texture (for visual emphasis), spatial position (to fit more content on screen), and asset shape (skeuomorphism to reduce text on screen).
Scrolling 🡒 Camera System
As an alternative to ‘scrolling down a page’, all content can be made visibly available in a zoomed out view, with controls given to the player to adjust the camera perspective such to interact with specific content.
A camera system is used to scroll the window along multiple dimensions (rotation, dolly, zoom)
With access to three-dimensions, interactive objects can be placed behind other objects, encouraging players to adjust the camera perspective (as an additional mechanism of slowing down the pace of content browsing).
Clicking 🡒 Gesture Combos
Finally, gesture-combo-interactions have been made ubiquitous among mainstream demographics thanks to the growing popularity of hypercasual games.
Getting to inbox zero through swatting away messages
Gestures like long-tap / drag-and-drop not only slow down the pace of a interacting with a website and its elements, but also feel more mentally stimulating.
Points, badges, and leaderboards by themselves make gameplay feel hollow, so deconstructing popular video game titles revealed three additional mechanisms—progression loops, choices with consequences, game feel—which might influence fun:
Implementing these gamification ingredients proved surprisingly difficult in practice, and may explain why many games iterate on previously popular games ie. games with proven gamification design.
Observing indie game designers during game jams (the game industry equivalent of a hackathon) revealed that most game design brainstorming begins by copying elements from previously successful titles.
Specifically, indie game designers often say, “I combined mechanic from game I enjoyed with mechanic from another game I enjoyed, and was inspired by the art style from yet another game I enjoyed”.
Applying this design methodology—through browsing too many hours on Steam—uncovered several titles used as the basis for Slowcial:
PlayCanvas was chosen as the low-code 3D web game engine because it exports 10x smaller than Unity (allowing smoother performance on mobile web browsers), conveniently handles all the deployment / hosting, and has a small yet passionate Discord community for support / brainstorming.
3D assets
Simple assets were acquired through cgtrader, selected on the basis of cost ($10), file type (FBX), and poly count (low).
Libraries
Gameplay & logic was improved through the assistance of some external libraries.
Gameplay controllers
After building several 3D website prototypes, certain scripts & logic became commonplace across all designs.
Window.postMessage()
To connect PlayCanvas and Bubble, a cross-window communicate method is implemented allowing a) PlayCanvas to listen for data payloads from Bubble, and b) PlayCanvas to send data payload to Bubble.
Bubble was chosen as the no-code full stack web application builder because it blows my mind to use; it provides a simple interface to a database, rules engine, drag-and-drop user interface builder, responsive layout settings, and HTML / JavaScript embedding, as well as handles the deployment / hosting.
Data Model
Four tables are used within the prototype:
Workflows
Workflows can be summarized as:
Conversation and update the page’s custom state C.selectedConversation.Conversation is selected, send Window.postMessage() to PlayCanvas to a) spawn unread Envelopes associated to Conversation , and b) tag each Envelope with its corresponding Bubble_GUID . Also every few seconds, trigger a similar workflow for unread Airplane.Window.postMessage() to Bubble, depending on the data payload a) toggle certain elements to show, and/or b) search database for Envelope matching the Bubble_GUID tag sent and update the page’s custom state E.activeEnvelope.