Shapetopia, for the United Nations

Demo

The game, screen by screen

During the prototyping stage, I created the in-game UI and 2D art assets in Illustrator, and implemented the interactive elements in Unity.

Starting page

A letter from the developer team introduces players to the SDGs and thanks them for playing and caring.

Tutorial

Secretary Blobby Head Jr. introduces you, the mayor, to the game. The player learns the basics.

Playing the cards

The main user interface phase of the game:

• Playing mechanism — players decide which card to play based on the indices and their personal preferences. After spending all the coins, the round ends.

• Card design — each card carries its cost, title, effect, and a brief description. Hovering over a card highlights which SDGs relate to it on the SDGs panel.

• SDG integration — a hover function on the SDGs panel reveals the related goals and their descriptions.

• Exploring the city — players can zoom and pan across the city to view its status.

• Visual feedback — the view changes throughout the game as players play more policy cards and construct a sustainable city.

Collection

Players can check the collection to see which goals they have yet to collect, and view detailed descriptions.

Interview

After spending all the coins, the player ends the round and interviews citizens. One interview is positive and one is negative — the player gets appreciated for good deeds and gains a clearer goal for the next round.

Random incidents

Triggered when players focus too much on one index — guiding them to notice the importance of balance.

Ending

The player gets an overview of their whole game — a summary of the four indices and the goals they collected — as Secretary Blobby Head Jr. congratulates them on becoming their successor.

Overview

A web app for players to engage in virtual city policy decisions and explore the impact of sustainable choices. In collaboration with the United Nations, our six-person team "Sustain Dev" developed Shapetopia, an educational game about the UN Sustainable Development Goals (SDGs) that promotes and instills the principles of sustainability within the CMU community.

As the UI/UX designer on the team, I designed the core information architecture and created an engaging, immersive interface that fosters a strong connection between users and the global goals, and helps them fully comprehend their significance.

You can play the game at app.etc.cmu.edu/susdev/.

Background

Client need: develop an interactive game so that college students can both learn about CMU's contributions towards sustainable development and provide additional input, with an emphasis on the broader conception of sustainability defined by the 17 Global Goals.

Research & Analysis

Persona & pain points

I conducted 5 user interviews on our target users' opinions and knowledge about sustainable development and concluded some pain points.

• Students often exhibit a lack of interest in the SDGs due to their perceived complexity — they encompass numerous goals.
• The game should strive to deliver an enjoyable and captivating gameplay experience.
• Students often face challenges in establishing meaningful connections between the 17 SDGs and their daily lives.

Domain knowledge

To foster a deeper understanding of the SDGs, our team researched each goal and shared knowledge extensively. We found patterns and categorized the 17 SDGs into four key indicators that are crucial in our game:

User journey map

Through detailed analysis of pain points and user needs, I created a comprehensive user journey map to guide decision making and foster empathy by immersing the team in the user's experience.

• Using scenario — during recess, or when students are tired of doing homework.
• Player's role — new mayor of a virtual city.
• Mission — lead the city onto a sustainable path by executing policies.
• Mechanism — draw cards randomly, then decide which policies to execute.
• Challenge — evaluate the policies and balance the negative consequences.

Information architecture

I created the information architecture of this policy-making card game, which lets the player enact policies that reflect the sustainability goals — building more public schools, investing in railway construction, or enforcing an equal pay act.

Wireframe & initial playtest

Based on the game flow, I created an interactive wireframe so internal team members could clearly understand the user experience and the game's essential functions, and ran initial playtests of the core game loop.

I used a combination of the wireframe and a paper prototype to test whether our idea worked for target audiences.

Insights:

• Players want visual feedback when they implement a policy — moving indicator levels up and down is not enough.
• The four indices are clear and help players understand the SDGs better; however, the card-unlocking mechanism wasn't obvious during play.

Design Concept

Art direction

I created a document setting the UI, 2D, and 3D art direction for each phase of the game.

User testing

Quantitative research

• Conducted 32 in-person usability tests
• Pre- and post-game surveys

Qualitative research

• Behavioral observation
• Semi-structured interviews

Takeaways & iteration

• Integrate the SDGs into the gameplay more completely than before.
• Users want more feedback after they place any policy card.
• Most users lose focus when there are too many words and too much information.

Takeaways

What I'd carry forward

• Clear and intuitive navigation — users should easily understand how to move within the game, access features, and read their progress toward the goals.
• Informative and educational content — present the SDGs concisely and engagingly; break complex concepts into understandable chunks with interactive elements.
• Meaningful gamification — achievements, rewards, and progress tracking that align with the goals, so players apply their knowledge in practical scenarios.
• Test and iterate — user testing at every stage, refining the design so the game stays engaging, intuitive, and aligned with its audience.

Achievements

Our team was interviewed by CMU News, and Shapetopia was published on the CMU news site for Earth Day.