Independent Contractor

> It’s the year 2032 and you’re working a grueling gig-based job for a tech company...

‍

Your task: remotely dispatch drones to deliver packages to people’s homes from your computer. As you work, ulterior motives at play deep within the company become increasingly apparent. You soon come face to face with moral dilemmas as the story unfolds, with your actions revealing an impact on the world.

Independent Contractor​ is a web-based simulation game in active development.

Play Independent Contractor
A critique on
Surveillance Capitalism
& Gig Economy
As a critical game, Independent Contractor simulates the desktop of a gig economy worker, with multiple applications. Exploring surveillance capitalism's complex structures in our digital existence, and the problematic labour issues in the gig economy industry, Independent Contractor invites the player to reflect on these issues.
About us

June Tang

June is an interaction designer interested in creating meaningful experiences through service and UX design. As an international student from Vietnam, intercultural differences inspire her to explore designs to create platforms to amplify people’s voices. June is trying to figure out how her interdisciplinary skills can be best used to support people’s wellbeing. When she is not designing, she is making coffee, writing sad things, and drawing her imaginary D&D character.

Declan Reilly-Gordon

Declan is an interaction designer and web developer who loves to explore creative and impactful ways of utilizing emerging technology.

Process Documentation

We began brainstorming for the game by looking at our common interests in design and other fields (books, movies, TV shows…) and noting down broad themes and topics from these works. By doing this, we come to realize that we are very interested in storytelling mediums, and the social issues that come with emerging technologies.

‍

With this game, we started by looking at the story which would drive other design aspects. Aside from tangible design elements such as UI, the story helps us analyze a problem space and solutions that would address these issues. This story also helps us create an overall guide for the interactions within the game, and how we would develop these aspects.

‍

Current Storyline

The player begins the story faced with a desktop log-in screen where they enter a name to begin. Immediately afterwards, they dive into a personal computer complete with email, social media, and news applications where they come to realize it’s the year 2032. Checking their email, the player first sees an email from Aireo congratulating them on being hired as a drone dispatcher. Aiero is a technology and logistics company that is later revealed to be surveilling citizens in cities using the drone. The player is given the opportunity to explore the computer applications content full of emails, news articles, and social media posts. This content updates each working day as a drone dispatcher and the player is encouraged to check in on the applications throughout the story.

Doing the work of dispatching drones, the player may notice what they see reflect back to the updated application content. For example, when dispatching drones you are later asked to send it to a person instead of an address as Aireo has launched a new ‘ASAP Mode’ feature that sends a drone directly to the person if more ‘convenient’. Social media posts show up the next day expressing concern from the person you, as the dispatcher, delivered to. These world-building techniques helped us set the tone for the story balancing the work life for a corporation to the personal life of the player receiving emails from family members.

The player begins the story faced with a desktop log-in screen where they enter a name to begin. Immediately afterwards, they dive into a personal computer complete with email, social media, and news applications where they come to realize it’s the year 2032. Checking their email, the player first sees an email from Aireo congratulating them on being hired as a drone dispatcher. Aiero is a technology and logistics company that is later revealed to be surveilling citizens in cities using the drone. The player is given the opportunity to explore the computer applications content full of emails, news articles, and social media posts. This content updates each working day as a drone dispatcher and the player is encouraged to check in on the applications throughout the story.

Doing the work of dispatching drones, the player may notice what they see reflect back to the updated application content. For example, when dispatching drones you are later asked to send it to a person instead of an address as Aireo has launched a new ‘ASAP Mode’ feature that sends a drone directly to the person if more ‘convenient’. Social media posts show up the next day expressing concern from the person you, as the dispatcher, delivered to. These world-building techniques helped us set the tone for the story balancing the work life for a corporation to the personal life of the player receiving emails from family members.

“This is my least favourite part.

“Video call request from Aireo Company Agent”

I’m starting my new job today as a delivery person. Okay, ‘domestic drone delivery’, D3 for short. It’s a decent job I guess. I don’t have to interact with people too much, while still being able to “go” places technically.

“Company Person has joined the call” “MC has joined the call”

“Hello. Is this MC?”

“Yes. It’s me…”

“Great! I’m ____, and I will be in charge of walking you through the drone delivery orientation for today!”

“I am aware…”

“Okay! Let’s get to it!”

The video call application switches to what seems to be the caller’s desktop screen that they’re sharing with me. As part of protocol, they’re supposed to show me their company orientation video at the start of every call. I’m not too excited about this.”

By writing the same scenarios through different perspectives (first person vs third), we are able to explore the world and the characters we want to depict. After many refinements, we were able to finalize on the final story, which helped us build an overall roadmap.

Based on this roadmap, we proceeded to create more detailed content, design and develop the game.

Day 1
Day 2
Day 3
Research, or how we played games the entire time

In order to develop further content for the game, we consulted a variety of sources.
Check out the bibliography for more sources and details!

Allow Pop-ups
Allow Pop-ups
Allow Pop-ups

Starting out with this project, we envisioned a first-person POV, showcasing the drone view of the city of Vancouver. This vision could be realized through technologies like Google Maps API or Mapbox API, as there are lots of resources that provide 3D renderings of cities to be used in Unity. Another technology that we considered using was Google Earth Studio, which allowed us to use and export satellite footage to be used in After Effects.

‍

However, as we progressed, learning to use all of these tools would be too complicated for a one-year project. We decided to shift to tools that we’re already familiar with: front-end web development. This part will be further explained in Development (link).

First Video Prototype
Conceptualizing and Designing the UI
Prototyping the Puzzles

As we are both designing and developing the game, the conceptualization phase was a very cyclical process, as we went back and forth between sketching and researching tools to test whether we could accomplish our vision.

As explained above, we started with a 3D interface, using a first-person POV of a drone that is flying over a city. After realizing that this idea is unrealistic to accomplish in a year, we switched over to a 2D dispatching interface.

This meant that our game would have a major change in terms of storyline. The player would be working as a drone dispatcher; they would not be looking over a city constantly, but receive delivery reports containing the footage. This was a nice way to strike a balance between having unique drone footage of the city, and feasibility in building the game.

We quickly sketched out a basic interface, inspired by various taxi dispatching applications.

Desktop UI

We had a lot of fun creating the desktop UI. We researched a few games with operating systems such as Another Lost Phone, Tech Support: Error Unknown.

Our desktop UI has to follow design conventions of other OS design, but it can also have certain unique parts that give it uniqueness and identity. We opted for a more retro appearance, with purple tones that are soft yet futuristic.

‍

Application UI:
Conceptualizing & Designing

Each application is designed with a specific identity that is reflected through UI elements (colours, fonts choices, sizes…). For the Aireo Drone Dispatching and Email application, as they are both work-related apps, they have very basic user interface and use colours that signify a corporate identity (blue and grayscale tones). The social application has a more playful interface, with colours and shapes inspired by Michael DeForge’s works.

Aireo Drone
Dispatching Application

To create this app, we had to keep in mind its main function as a canvas for puzzles that will trigger the events in the story. The UI is designed to be basic, acting as a canvas to present the puzzles rather than attracting the player’s attention.

Email Application

In order to keep things neatly organized and easily accessible, the emails are arranged into vertical tabs, and categorized with specific tags. The simplicity helps simulate a working environment for the player. Both the email and the Aireo applications maintain a similar identity that is professional and corporate, while the logo maintains a fun that gives the game its own edge.

‍

Social Media
Application

This application’s interface and content are inspired by Twitter’s, with a very straightforward interface and short form of content. We saw that this application is where creativity could help build an identity different from that of the other corporation applications. This inspired the more saturated colours, thick and bulky strokes, and cartoonish artwork that portrays a more “hip” identity.

News Site

We consulted a variety of layouts from sites such as Wired Magazine, The NY Times and so on. All of these sites keep a very clean and simple layout: large-sized and crips images, a cool title font, and a more traditional body text font. We wanted this news site to maintain a contemporary and neutral vibe, taking advantage of the player’s already existing connection to similar news sites. Between the corporate-ness of the Aireo Drone and email applications versus the eccentricity of the social site, the news site is balanced, suggesting neutrality and professionalism. This rather simple UI also allows the content to be the main focus when visiting this site.

‍

Application Logos

Each application is designed with a specific identity that is reflected through UI elements (colours, fonts choices, sizes…). For the Aireo Drone Dispatching and Email application, as they are both work-related apps, they have very basic user interface and use colours that signify a corporate identity (blue and grayscale tones). The social application has a more playful interface, with colours and shapes inspired by Michael DeForge’s works.

Content Development

The content was developed based on the core identity that each application represented. Understanding that this is a game and not a critical theory class, keeping writing pieces short and sweet while still maintaining their function as plot devices was very crucial. 

‍

Each application is a piece of the fictional society being deeply intertwined in the surveillance scheme, with a distinctive design that sets them apart from each other. The applications are populated with content written, curated, and arranged to lead the player towards having to make a moral decision at the end of the game. Each day, each application is designed to reveal specific events that lead the player towards the conclusion.

‍

As the game revolves around the player’s work, email is a crucial part in communicating their tasks and duties for each day. Each day the player receives a newsletter by the company’s HR team; this element mimics tech companies in Silicon Valley that pour a lot of money into “welfare activities” and a "friendly work culture” as a way to gamify work and distract employees from realizing they’re being exploited. Communication from Aireo is kept very brief, professional, and even cold.

We then brainstormed the main articles that would act as main plot devices for the player, and help construct their understanding of surveillance capitalism and the gig economy in the fictional world. Other articles were created to populate the news site and build up the world with many interconnected aspects and perspectives. 

‍

We had a lot of fun writing articles as it allowed us to play different roles. From tech reviews for products that are humorously absurd, to serious articles that covered matters about digital rights, politics, and so on, the articles consist of useful knowledge that we hope can help the player understand more about the topics we want to critique. Each article is kept short, as we also imagine that the futuristic news site runs on shorter news pieces as our attention span is expected to decrease over time with so much information saturation.

‍

The social media site ties everything together, as it references the events that happen in this world through funny and short statuses. This is also where we inserted subtle social commentary, mundane and funny things.

Development:
Front-end vs Back-end

‍

With the story coming together and a plan set in motion, we began to research potential development options. We considered using Unity for a long time due to its engine and libraries but we realized that it would take quite a bit of time to make it how we’d want to give the scope. We also wanted it to be easily accessible as getting people to download a game would be a hassle especially with testing on different operating systems. Thus, we came to the decision to develop it as a web-based game using local browser storage to save states of the game for returning players as well.


To prototype game elements and applications we used Webflow which has a great design editor allowing us to customize the CSS and page layouts more easily to later be exported. After creating Webflow prototypes we began developing the core functionality and interactions of the game itself. Of course, this doesn’t come with much ease as programming can get complex quite fast especially given all the design components, puzzles, and variables with figuring out what players should be enabled to do so the game doesn’t catch fire.


This is where our tasks started splitting off. June took on Webflow and front-end things while Declan researched more JS libraries and worked on creating the puzzle pieces and interactivity for the game. After finishing developing the UI on Webflow, we exported all the components and tied them together using JS.

Front-end Development & Inputting Content

As Webflow provides a visual interface to design with HTML and CSS, we were able to rapidly prototype much of the front-end design. Using Webflow meant that we wouldn’t have to redevelop and start from the drawing board each time if we needed to quickly update or change something. This greatly helped with developing interactive prototypes using HTML and CSS that we could export instead of using basic prototyping software like Adobe XD that only go as far as linking together artboards that can be shared with an proprietary Adobe URL.

News Site

The news site was cloned from a free blog template with a content management server This allowed us to put content in very easily with a ready-made template for cohesion. However, when exporting the article website, we found out that the CMS function was not export-able, so we created the grid layout from scratch and input content back in.

‍

Inputting content for the article was a simple task. I laid texts out onto the page and made sure all the links connect properly to the main news display page.

Email Application

This UI was developed from scratch, as nobody really creates “email templates” as an asset on Webflow. I used tabs to construct these emails, customizing their transition time and display states to refine the interactions.

Overall, working on Webflow was a lot of troubleshooting and figuring out what type of assets can be used to create the desired element and interaction. As there are infinite ways to create things on front-end web development, this process taught us to be flexible and constantly search for new and effective ways to do things.
Several thousand lines
of code later
We ended up programming in VueJS which is an open-source JavaScript framework geared towards front-end web development to build user-interfaces. This was a learning experience as we hadn’t before touched it and coding a game with it would be a daunting undertaking.

We found that it would be best to think of each interaction like its own game and adding up the parts of the game sequentially resulting into our underlying narrative. Each app is almost like its own program. We separated the written content from the design and front-end design view through importing JSON files into each ‘day’. A JSON file stores data to fetch and paste into the side the player sees. For example, the social feed and email update after each drone delivery session which is possible by adding new JSON files in for each day.

Most of the behaviour for the game was written and compiled in VueJS through constant testing and online troubleshooting. Each fundamental component is its own vue file which are all linked together in a web of hierarchical folders. Vue files make it much easier to reduce the amount of files needed for web projects as they are structured and designed to constitute the html structure, javascript with many additional features, and styling all within the same document. The server was created using node.JS which is an open source server environment made specifically for JavaScript and deployed using netlify.
‍
This side of the project really made us much more comfortable in full-stack development through version-control, projection management, and communicating with each other in designing components with webflow and developing interactions.
‍
Independent Contractor v1

Our first prototype can now be played at inco.work. Working on Independent Contractor has been such a great learning experience. Overall, the development process was a lot of learning, troubleshooting, and devising innovative ways of working on both an individual and collaborative scale. There are endless possibilities for designing on the web today which was at first overwhelming but we were able to constrain ourselves to the desktop medium we constructed. Our process and journey throughout creating this game taught us to be flexible and constantly search for new and effective ways to do things.

Moving forward, we would like to refine the puzzles, adding more delivery challenges and puzzles for people to play. We plan to continue developing the narrative, building a more complex world with many more events that will take place. The game also offers a space for writing and social critiques that can be further explored.

We hope to bring a new way of learning about surveillance capitalism and the gig economy that inspires hope and change in our interactions with technology. We also hope you laugh at the jokes we make inside the game. Thanks for reading!

Play Independent Contractor
References
Books
Games
Videos
Articles
Other
  • Ruined by Design by Mike Monterio
  • Super Pumped: The Battle for Uber by Mike Issac
  • New Dark Age by James Bridle
  • The Age of Surveillance Capitalism by Shoshana Zuboff
  • The People vs Tech by Jamie Bartlett
  • Radical Technologies by Adam Greenfield
  • The Upstarts by Brad Stone
  • Hatching Twitter by Nick Bilton
  • he Everything Store by Brad Stone
  • The Art of Game Design by Jessie Schell
  • American Kingpin by Nick Bilton
  • The Game of Work: How to Enjoy Work as Much as Play
  • User Friendly: How the Hidden Rules of Design are Changing the Way We Live, Work & Play
  • The Real World of Technology by Franklin Ursula
  • The Design of Everyday Things by Don Norman
  • Her Story
  • Vall Halla
  • Firewatch
  • Papers, Please
  • 911 Operator
  • Baba is You
  • Life is Strange
  • Tech Support: Error Unknown

Independent Contractor created by June Tang and Declan Reilly-Gordon