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 ePub

What's fast fashion?

Fast fashion is a complicated scheme with many moving parts. I organized my research into a report, of which the key findings are summarized in the following flow chart.

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

Guilt is not sustainable motivation to maintain changed habits. This publication is meant to be empowering and not reprimanding; I therefore wanted to avoid using shock factor to appeal for sympathy and guilt readers. Here, I structured the presentation of information to end on a positive note, what people can do to change, as that is one of the most important takeaways.

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.

Typeface

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.

Gamification

Repurposing Illustration for Interaction

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 multiple possible endings. Here, the information is presented in a more staggered fashion because the game is not designed to be consumed/played in one sitting. It can be spread out and go into more detail than the ePublication.

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.

© Benya Sutyanyong 2022