Project: "Electronic Age Metamorphosis" Web-Based Game for MIT Undergraduate Web Communication Course
ROLES:
Principal graphic artist and project collaborator in interactive web game
KEY SKILLS / DELIVERABLES:
• Visionary Concept Metaphor Development
• Digital Hand-Drawn illustration
• Graphic Arts
• UX / UI Visual Design
• Website Storyboarding
• Interactive Edutainment Web App Design
• MBTI Personality Test Gamification
DESIGN APPS USED:
• Photoshop (illustrations + detailed UI web designs)
PROJECT OVERVIEW / CONTEXT:
This edutainment website "Electronic Age Metamorphosis" is the brain-child of a three-member project group in the MIT Course 21W785: Communicating in Cyberspace, a web design and communications course. In this course, students would form a project team and develop independent group projects. I selected this pioneering web design and communications course for my independent major in Media Arts that combined Wellesley classes in fine arts (specialized in digital media) and courses at MIT Sloan, Media Lab, HASS in web communications and eCommerce classes. While at Wellesley, I studied personality psychology as part of my minor concentration and was fascinated by the Myers-Briggs Type Indicator (MBTI) personality test that I felt was the most comprehensive and insightful categorization of 16 personality inclinations.
I recruited my best friend from college Grace Song — a psychology major — to enroll in this MIT class when she expressed interest in my MBTI-themed website concept. She suggested we could create a game about androids and present the MBTI test as a web game. I then proposed that we call the game "Electronic Age Metamorphosis". In this web game, I proposed that website visitors would enter the game as androids born in the Electronic Age exploring cyberspace scenarios that would reveal their identity, an analogy for finding their MBTI personality type. We then chose our impressively brilliant classmate Ben Walter — a friendly British student majoring in course 6 (computer science and electrical engineering) at MIT as our project partner. He was mulling over the prospect of designing a precursor to an eBay service but was sufficiently intrigued by our project and perhaps, took a bit of pity on us two gals and decided to help us realize our website concept.
Project partner Grace Song and I worked on the conceptualization and storyboarding while our other project partner Ben Walter programmed the engine to calculate the personality tests and javascript rollovers in CGI and JavaScript. I was the designated graphics illustrator for all the website screens. I hand-illustrated these androids and cyberspaces in Photoshop. I envisioned a cozy, dimly-lit cafe contained in bubble-like spaces where introverts could sit upside down facing each other with chairs planted to the ceilings and extroverted androids would frequent vibrant dance floors at a Bit Bucket Club. I imagined androids with electronic hearts beating in translucent bodies with nervous systems lit in neon hot pink and lime-green lights. Rooms revealed along winding staircases in cyberspace would lead up to various scenarios presenting different equally enticing options depending on your personalty type.
Our project was met with wildly enthusiastic reception by our classmates and professor and earned an "A" grade. Later this project was exhibited at the Boston Tremont Gallery for the biennial Boston Cyberarts Festival 2001. My illustration below is a collage of several screens from our project Metamorphosis.

Detailed below are some screenshots of the screens I conceptualized and hand-illustrated for this webgame featuring cyberworlds of androids. My project partner Ben Walter (MIT course 6 major) who was our web developer helped create the text bubbles superimposed over my illustrations and who coded the interactions in the decision tree through these cyberworlds to calculate users' final MBTI (Myers-Briggs Type Indicator) personality test results. My other project partner and psychology major Grace Song served as our psychology expert and thus, she wrote the copy for the game to accurately represent each of the 16 personality types in the MBTI profiles.
This full-scale project website was once hosted LIVE at http://www.bwalter.org/metamorphosis. The Electronic Age Metamorphosis website's target platform then was Netscape since javascript rollovers were optimized for use only on that browser platform at that time.







In loving memory of Ben J. Walter:
Here's a photo that I took of my college besties and classmates Grace Song on the left and Ben Walter on the right. We were at Jillian's, playing pool for Grace's 21st b-day. Grace and Ben were my project partners on this Electronic Age Metamorphosis class project. Ben was my technology architect and engineer partner at siming cybercreative after we graduated from college.
