Web Game, Storytelling, Front-end, Data Visualization
Individual Project

How can we use web games to tell an informative story?

The Journeys Belong to T-shirts combines a series of small web games that aims at storytelling the hidden logistics process of T-shirts (mass production product). By following the fun and engaging operations and commands, users are invited to participate themselves into the logistics process such as planatation, delivery, manufacturing, distribution, etc.

New York

Development Tools
Javascript, P5.js, HTML/CSS, Illustrator, Photoshop

2 Weeks | Nov 2018 (Ongoing)

Web Game


I believe that Web Games could be more than just gaming or a way of entertainment. Besides, it is immersive, it creates creates narratives, the information can be widely spread by the Internet, etc. So, I believe, sometimes, web game could be an awesome tool for storytelling

Identifying Problems

Under the rapid development of e-commerce, we get everything right after a few clickings of the mouses. The more convenient and faster we get products, the less obvious the processes appear to us. Sometimes, we don’t get enough information about the behind process, and not mention to know how huge amount of efforts have been put into just making a simple T-shirt. The hidden values and efforts behine the logistics of products worth wide spreading

Experience and Design Goal

This project aims at using game as a tool for telling people the hidden stories behind the humble logistics process of T-shirts. The project consists with a sereis of web games that aim at helping people to understand the hidden efforts behind by changing people to experience the process from a perspective of a consumer to an involved worker. This project specifically picks T-shirt as a representative mass production product.

Target Audience

#1. Parents & Children

  • Parents who want to give kids a lesson in this matter
  • Children and Teenagers who born in this mass production era. They need to know the behind process so they could understand that anything we get is not easy.

#2. Teachers & Students
  • High school teachers or under who need a educational material for e-commerce and logistics 
  • Students who loves web games
  • e-commerce consumers who want to learn and get the gist of the process easily.

#3. Product Website and App Game
  • Companies could put this type of games on their product website as an engaging advertisement to promote the powerful service of their products.
  • This could also be an branding or educational app game.

Content Map

Each game represents a necessary logistics procedure of a T-shirt.  Once the player completes all the games, they will be landed to an actual T-shirt ordering page, so they could take an order.

Wireframe and Logic Flow

Users will be completing the game step by step. If they fail they cannot proceed. Each time of failure gives a hint. Users get to eventually win the game by learnings and hints provided after the fails.

Style Elements

The main tone for each game is different. I chose color based on the theme of the game. For example, in the game of plant, I used green as the main tone; in the game of harvest, I used orange. I want to use vibrant color to stress playfulness and attention.

High Fidelity Prototype (Updating)


These games own the potentials to generate side products. For example, prints on T-shirts, or T-shirts as gifts for children who have finished the whole game.

More games on the way