Background
In the summer of 2017, I participated in Northwestern Mutual’s STEM Outreach program, a 4-week initiative aimed at providing high school students with a crash course in web development. As part of the program, 12 students, including myself, were tasked with modernizing "The Longevity Game," a flash game on Northwestern Mutual's website.
The original flash game prompted users to input personal information such as age and gender, then guided them through a series of lifestyle and health-related questions to determine their probable life expectancy. While the premise was somewhat sobering, the intention was to spark discussions about life insurance and encourage healthy habits.
What I Did
Through this experience, I honed my skills in HTML, CSS, and JavaScript, gaining a deeper understanding of web development fundamentals. I also explored the versatility of SVG graphics and experimented with advanced CSS properties like background blur, expanding my toolkit for future projects.
What I Learned
Aside from basic web development skills within HTML, CSS, and JavaScript, I learned how customizable SVG graphics were, as well as new CSS properties I did not play around with before, such as background blur.
Start Screen
Welcoming users to the game, this screen served as the entry point to the experience.
1 of 7
Create Your Character Screen
Upon selecting a character, animated clouds would gracefully part, unveiling the chosen character.
2 of 7
Create Your Character Screen
Leveraging SVG files for all images enabled easy customization of item colors by targeting specific CSS classes.
3 of 7
Backpack Explanation
Just before starting the game, users were informed that they could click on the backpack to track progress and view earned badges.
4 of 7
Survey Answer Choice
Each selected answer dynamically influenced the user's predicted lifespan, recalculating in real time based on all responses.
5 of 7
Thank You For Playing Screen
Presenting the final calculated lifespan alongside the user's character and badges, this screen thanked users for participating.
6 of 7
Additional Information
Encouraging dialogue about financial products, the game included a feature to connect users with representatives upon completion.