2. Monster U!
Team Member: Shuna Zhu, Isabela Tan, Pengmin Xu
Link to the project: tinyurl.com/ecumonsterquiz
002a
While Shuna and Isabela were working on integrating the psychological concept of OCEAN with storytelling and character design, I developed the final testbed for Monster U and presented it in class as a website. The entire experience is built around a clear flow: Start → Enter Name → 10 Questions → Results. Here's how it was developed:
002b Early Framework: Basic quiz flow and structureI began by creating a simple wireframe (002c) to outline the user journey, with the primary goal of making everything intuitive and understandable. I used a grayscale model to test the flow and discuss potential areas of confusion with my team.
002c System Logic: Visualizing the quiz’s decision processWe went through several iterations of the model's logic. Initially, we considered using branching logic, allowing users to select different options to achieve different results (for example, choosing A in Q1 → jump to Q3, choosing C in Q3 → jump to Q5, choosing A in Q5 → jump directly to a specific result). However, we realized that this approach would shorten the gameplay and prevent users from observing all of our ideas. Ultimately, we settled on point-based scoring (P2.), where users can experience all 10 questions and then, through backend calculations, determine the top two traits, which then correspond to their final results.
002d System Logic: Visualizing the quiz’s decision processTechnically, I used Bubble to create the quiz (P3) and set up a scoring system based on five personality traits (O, C, E, A, and N). Each answer updated the user's score, and I ensured that only one answer could be selected per question. After all ten answers were received, a custom JavaScript function was triggered to calculate the top two traits. The final monster matching results were displayed using characters designed by Isabela and narrations written by Shuna, and users could also download a character card.