Project Goal
For our final project of the summer semester, we were allowed to create any interactive website or app we wanted as long as it demonstrated interactive design principles. Instead of the recommended streaming website idea, I wanted to create a mobile game concept to play around with interactivity and animations in XD.
Project Experience
From the start, I felt the game concept that would best show off interactive design is navigating a world map. From there, I came up with several names and logos related to maps and mapmaking. I tested three very different map styles with the stylescape, but the one that was the most cohesive was the lithograph-based stylescape.
As I began working, I found it challenging to imagine mobile feedback while testing the app on a computer. I couldn’t rely on signifiers or feedback that activated with a mouse hover like I used in previous assignments, and I had a relatively limited color scheme. I had to think of other common signifiers used on phones, mainly symbols and the placement of those options.
I also overextended a little, though I realized it too late. After finishing all the animations and flows for one character, I realized that the character customization I included at the beginning of the game would force me to duplicate every screen for each variation of the characters I had. These variations led to an absurd number of screens that were mainly tedious rather than difficult to create.
I created three stylescapes to determine the graphical direction of the game.
These are low-fidelity wireframes for screen-flow.
These are the finalized, high-fidelity screens with the lithograph and naval map aesthetic.
Project Outcome
Although I ran into many hurdles while creating this project, I felt incredibly proud of what I created upon completion. The interactive design was successful — especially on the world map area with the pulsing level selection — and the style shone through with all the handmade graphics. I also got to learn a lot about XD animations and got to work with a large amount of flow screens.