Inspiration
Marvel being filmed in Atlanta was new and interesting to us. We researched more about the city to find that Atlanta was the 13th ranked top city with the most credit card debt. Financial literacy is not common during adulthood (because it isn’t often taught in school, especially for the underrepresented community) so we wanted to make learning more fun for young adults, such as “which credit card is best for me?”. Our team was inspired by villain origin stories, such as Cruella, Harley Quinn, and Joker, where they weren’t all bad in the beginning. It’s because “life happens.” We related unexpected scenarios of sudden medical bills and car vandalism as financial obstacles with the solution of having money saved for a “rainy day.” Not all students have money saved, so we have the next best option, “credit cards.”
What it does
Spidey Cents is an online game that teaches the user about financial literacy through simulations, such as helping Spiderman pay back the city for damages or affording Mr. Stark’s new Spidey suit for him. The user will be prompted to analyze the different credit card terms and benefits in order to have the most profitable situation.
How we built it
Figjam, Figma, Visual Studio Code, Unity, HTML, CSS, JavaScript, SCSS, C#
Challenges we ran into
Designers: It was difficult to find Spiderman images that suited our perspective so we decided to go for an 8-bit version in order to add small adjustments, such as a phone, sweatdrop, blush, to convey emotion. Another challenge was readjusting the design with the coding aspect to make our idea achievable. Towards the end, while we were putting together our prototype, we came across many issues where Figma was malfunctioning and not following the orders that we were giving. It was a constant looping between scenario 1 and 2 without ever completing scenario 2.
Coders: We initially created a modular system for outputting interactive and expressive dialogues that worked but was dependent on dialogue being mainly text-based. Unfortunately, it did not offer the flexibility our designers were looking for to vary dialogue structure (two columns in certain scenes; image additions in others). As such, halfway through the hackathon, we restarted designing the game in two ways that would offer the flexibility our designers were looking for in order to ensure that we achieve our vision and Minimum Viable Product:
In HTML/JS, which we were more familiar with.
In Unity, which we had limited practice and knowledge of Unity and C#.
Accomplishments that we're proud of
We are proud to create a game that combines Marvel with finance. Being able to create a prototype that was designed and coded was a strong accomplishment!
What we learned
“This was my first time working with coders in a hackathon so it was interesting to see the limitations that occurred. I learned that constant communication is required during the process of building in order to find equal ground and make things achievable.” – Jenny Tran, UX Designer
“Constant communication is a must when cross collaborating with coders and designers. Fortunately, my designer partner had a coding background and was able to explain the coders’ language to me visually for me to better understand. This experience made me realize that I should have some basic knowledge of coding to understand what limitations coding can bring into design. Through working with coders, I was also more attentive in creating a clean, organized Figma file so the developers can understand the screen flow and components. I also learned that I can be close-minded at times in regards to the coding not matching the designer’s visual idea. I understand that the coding can put limitations on the design, which is what design should be working around with because ultimately, coding the platform is what brings it to life and allow the public to access it.” – Crystal Chan, UX Designer
"I learned the importance of collaboration, and the connectedness of coding and design, as I was able to experience it first hand. Being able to create multiple prototypes in order to get a clear vision of our purpose for users, as well as formatting for the webpage part of the application was only possible with constant communication. In addition, I learned more about integrating UI elements with HTML and CSS, which allowed me to create a responsive webpage for the game" - Arya Peruma, Front End Developer
"We also learned to better define user requirements so that we know what could be a showstopper and reevaluate how to overcome challenges. That way, we did not have to basically restart the coding side of the project halfway through the hackathon." - Anita Yip, Budding Game Developer
What's next for Spidey Cents
- More various scenarios on how and when to pay SpiderMan’s credit card bill as well as other scenarios to teach financial literacy.
- Different modes, such as helping Spiderman raise his credit score to buy larger milestones (house, car).
- Scaffolding up and down with scenario difficulty to test the user’s financial literacy.
🎮Want to play our game? Click the itch.io links to start playing!
🖌️Interested in seeing the initial design? Click the Figma link below!
Log in or sign up for Devpost to join the conversation.