Shapetopia
A Web App for players to engage in virtual city policy decisions and explore the impact of sustainable choices.
Project Overview
In Collaboration with United Nations, our team 'Sustain Dev' of six people developed an educational game named ‘Shapetopia’ about the UN Sustainable Development Goals (SDGs) that serves as a powerful tool to promote and instill the principles of sustainability within the CMU community.
You can play the game through this link: app.etc.cmu.edu/susdev/
My Design Process
As the UI/UX designer on the team, my role is to design the core information architecture and create an engaging and immersive interface that not only fosters a strong connection between users and the global goals but also enables them to fully comprehend their significance.
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 (SDGs).
Objectives
Research & Analysis
Persona
I conducted 5 user interviews on our target users’ opinions and knowledge about sustainable development and concluded some pain points.
Pain Points
- Pain Point 1: Students often exhibit a lack of interest in SDGs due to its perceived complexity, as it encompasses numerous goals.
- Pain Point 2: The game should strive to deliver an enjoyable and captivating gameplay experience.
- Pain Point 3: 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 conducted thorough research on each goal and engaged in extensive knowledge sharing in the following jamboard: https://jamboard.google.com/d/1P_m76a5swummhgez4D4Um1O5uGhXAxrxPcyc947Q3Y8/viewer
We found pattern and categorized the 17 SDGs to four key indicators that is 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 to a sustainable developing path by executing policies.
Mechanisms: Draw cards randomly and then decide which policies to execute.
Challenge: Evaluate the policies and balance the negative aspect of consequences.
Information Architecture
I created an information architecture of this Policy Making Card Game that allows the player to enact policies that reflect the sustainability goals, such as building more public schools, investing in railway station construction, or enforcing an equal pay act.
Wireframe
Based on the game flow, I created an interactive wireframe for internal team members to clearly understand the user experience and the game's essential functions, as well as conducting initial playtests for the core game loop.
Initial Playtest
I used a combination of the wireframe and paper prototype to test if our idea worked for target audiences.
Insights:
- Players are looking forward to some visual feedback that happens when they implement a policy, and increasing or decreasing the level of indicators is not enough.
- The four index are clear and help them to understand better of the SDGs. However, the unlocking mechanism of the cards are not obvious when playing
Design Concept
I created a document for the UI, 2D and 3D art direction for each phases of the game.
User testing
Quantitative Research
- Conducted 32 in-person usability testing
- Pre and post game survey
Qualitative Research
- Behavioral Observation
- Semi-structured Interviews
Takeaways & Iteration
- Need to integrate the SDGs into the gameplay more completely than before.
- Users want to get more feedback after they place any policy cards.
- Most of the users are losing focus when there are too many words and information
Prototyping
During the prototyping stage, I created the in-game UI and 2D art assets using Illustrator and implementing interactive elements using Unity.
Starting page
A letter from the developer team shows up on screen introducing them to the SDGs and thanking them for playing and caring.
Tutorial
Secretary Blobby Head Jr. introducing you, the mayor, to the game. The player learns the basics of the game.
Playing the Cards
The main user interface phase of the game
- Playing mechanism - Players can decide which card they want to play based on the indexes and their personal preferences. After spending all the coins, the round will end.
- Card design - On each card there are card cost, card title, card effect, and a brief description. When the player hovers the cursor over a specific card, the SDGs panel will highlight which SDGs are related to this card.
- SDG integration - To address the relationship between the specific goals with the card, a hover function is added on the SDGs panel so that players could see the related goals and their descriptions
- Exploring the city - Players can zoom in and out and slide over the city to view the status.
- Visual Feedback - The view will change throughout the game when players plays more policy cards to construct a sustainable city.
Collection
Players can check the collection and know which goals they need yet to collect and view the detailed descriptions.
Interview
After spending all the coins, the player ends the round and interviews citizens. Seeing two pieces of interview, one of them is positive and the other is negative, the player gets appreciated for the good deeds and gains a clearer goal for the next round.
Random incidents
Happen when players focusing too much on one index, and guiding the player to notice the importance of balancing.
Ending
The player gets an overview of their whole game including a summary of the four indexes and which goals they collected during the game as well as the secretary Blobby Head Jr. congrats on them and becoming their successor.
Takeaways
Clear and Intuitive Navigation
Ensure that the game has a well-organized and intuitive navigation system. Users should be able to easily understand how to move within the game, access different features, and understand their progress towards achieving sustainable development goals.
Informative and Educational Content
Present information about sustainable development goals in a concise and engaging manner. Use interactive elements, such as infographics, pop-ups, or short videos, to deliver key messages effectively. Break down complex concepts into easily understandable chunks, fostering a better understanding of sustainable development among players.
Meaningful Gamification Elements
Integrate gamification elements like achievements, rewards, and progress tracking to motivate players and keep them engaged. Design meaningful challenges and missions that align with sustainable development goals, allowing players to apply their knowledge and skills in practical scenarios.
User Testing and Iteration
Conduct user testing at different stages of the game development process to gather feedback and identify areas for improvement. Regularly iterate and refine the UI/UX design based on user feedback, ensuring that the game remains engaging, intuitive, and aligned with the target audience's needs.
Achievements
Our team was interviewed by CMU news, and Shapetopia was published on the CMU news site for Earth Day.
Link : https://www.cmu.edu/news/stories/archives/2022/april/global-goals-game.html
