An interactive visual-novel game for climate change education.
I illustrated and designed the interface of an educational climate change game. Players make decisions in the urbanization of a fictional town, SynCity, and their choices are reflected in the visual landscape.
Illustrator
UI/UX Designer
Team of 5
Spring 2023
5 weeks
Visual Design
UI Design
Adobe Illustrator
Figma
At UCSD, each college has its own set of core writing classes that revolve around a central theme. My college focuses on the concept of a changing planet—that we must adapt and tend to an evolving world with climate, cultural, and technological complexities. Our writing series, Synthesis, is a three-course sequence that encompasses curricular themes of climate change, anti-racist pedagogies, and collaborative problem-solving.
This project was made as our Synthesis capstone project to address global climate issues from an educational perspective. Gamification was our weapon of choice.
My wonderful team of 5 (which consisted of 3 programmers, 1 researcher, and 1 designer (myself)) got to thinking about how we could incentivize climate consciousness through a digital experience.
We moved forward with a decision-making game: the player is given full control over a (fictional) small town situated next to a lake, a microcosm that is being urbanized. The game contains a non-linear decision path, and the impacts of their choices on the environment compound over time. The effects are elucidated through both illustrations and textual illustration, emphasizing the importance of environmentally-conscious policy-making. The visual aspect is central to the game’s function: the brain processes images faster than text, it's a powerful method of transmitting information, and increases engagement. This experience will allow players to explore the relationship between climate change, water, and sustainable city development.
A study conducted on 15-year-olds in developed countries on their scientific literacy about climate change found that adolescents in the U.S. were significantly less likely to feel well informed about the concern of climate change compared to other developed countries (Oliver & Adkins, 2020). Since we also know that teenagers are less likely to spend time out in nature, we developed an online experience to meet their interests.
Figure 1. Delineation of decision path, where effects are compounded.
In our final decision tree, there are 2*2*3*2*3 = 72 possible paths for players to take, each with its unique set of outcomes.
Incorrect Choice
Correct Choice
Neutral Choice
To account for all possible choices and paths that the player can take, I made 24 illustrations of various aspects of the landscape. Some illustrations were background landscape elements to reflect the general state of SynCity, while others were “widgets” placed over different parts of the landscape when certain city development choices were made (i.e. coal plant, wind turbine, etc.)
Figure 2. Sky variations to reflect air quality.
Figure 3. States of a populated woodland area.
Figure 4. Changes upon water-related decisions.
For easier handoff to developers, I made a simple design system and prototyped the first 2 of 5 decisions on Figma, including the opening screens and changes to the landscape according to player input.
I designed the textual elements as small modals over the landscape to avoid detracting from the graphical changes, which remain as the focal point of the game.
Figures 5 & 6. Game UI, design system, and prototyping on Figma.
My most significant insight from this project was the critical role of a functional, balanced, and cohesive team. Initially, the prospect of completing a capstone project in just 5 weeks seemed daunting and overwhelming. However, this perspective shifted dramatically upon collaborating with my team. We executed the end-to-end process with unwavering commitment, and our natural role distribution allowed us to capitalize on our individual strengths and fostered a deep sense of trust in each other with our respective divisions in work. I'm grateful to have worked with them—in such a fast-paced and tight-knit environment, the people make or break the experience.
Reflecting personally, having a crucial stake in the final product compelled me to feel ownership over the process and expand my skills as a designer. Though digital illustration isn't my forté, it was gratifying to stretch my boundaries and hone my artistic eye in a novel context. Looking back, this project stands out as a milestone in my journey, marking a turning point in my attitude towards embracing challenges as avenues for personal and professional growth.