Two iPads rest against a background of character illustrations. One displays a layout with graphs, and the other displays a screen capture of a map in a game.

timeline

September–December 2020

details

Information Design, Illustration, Prototyping

tools

Adobe Illustrator, InDesign, XD

The Devil Wears Zara

A digital information toolkit aimed to educate youth about the effects of fast fashion. It contains an interactive ePublication and an iPad game. Colourful isometric characters and environments represent a microcosm of the global supply chain, allowing users to see the disproportionate distribution of benefits and impacts around the world.

ePub: The Devil Wears Zara

Below is a static preview of the pages.

iPad Game: Fashionopolis

An interactive prototype is also available here.

Building the ePublication

Research

I started by gathering information about fast fashion. What I was really interested in was the disproportionate benefits towards consumers and negative effects towards producers. This culminated in a research report. I also visually outlined the organization of information in preparation for the narrative-building stage.

View Report
A visual outline showing how information may be presented to a viewer. It starts with an introduction and defining the topic of fast fashion, before diverging into the negative effects and converging again in a conclusion and next steps.

Framing the Narrative

Approaching this stage, I made the assumption that a lot of young people likely already know about fast fashion and sweatshops in passing. To ensure that the publication would be more empowering than reprimanding, I wanted to avoid using shock factor or appealing to sympathy for fast fashion's victims. I maintained the same organization of information as I used in the report, separating the effects into three categories. I knew I wanted the conclusion to end on a high point.

A visualization of the possible narrative structure of the information in the ePublication which starts with defining the topic, moves into the negative effects, and features rising action to the conclusion, where alternatives to fast fashion are presented.

Visualizing Information

As a lot of my information was explanatory in nature, I liked the idea of zooming out and viewing an entire process. I carried this over into illustration by representing tiny environments with tiny people. The visual zooming out on the world helps to visualize how fast fashion is a global system with geographically concentrated effects.

Statistical data was also important to me. I had a lot of variables to choose from, but I chose ones whose correlation told a story.

Defining a Visual Style

I chose a modern-style typeface in reference to fashion magazines. I wanted to use bold colours to make the piece more friendly to young audiences. Below are three distinct phases before I arrived at the final.

Translating to an iPad Game

Repurposing Illustrations

Here I reused my environments and characters in a more interactive way. I was inspired by online roleplaying games where users follow a storyline. Players can learn about fast fashion by exploring the built world, a microcosm of real global supply chains. Information is revealed in pieces as users collect items, complete quests, and gain new privileges with each level.

Adjusting the Narrative

As the user has more control over the outcomes and conclusions with a game, I wanted to build something flexible with possibly multiple endings.

A visual outline showing how a user progresses through the game Fashionopolis. It illustrates the new abilities and roles the user gains with each level.

Illustrating for UI

Though there were many elements I could carry over from the ePublication, namely the characters, I still had a lot of fun building extra items and maps for the game.

Two rows of isometric illustrations of various game items. From left to right, top to bottom: a map, backpack, trash bag, a pineapple, shopping bags, plastic bottles, a book, a trash can, pants, a mushroom, a bowl of fruit, and a carton of milk.

Wanna chat? Send me an email at benya@sutyanyong.com.

© Benya Sutyanyong 2021