Interactive Kiosk Design Process
How I designed an experience regarding a legendary game designer
Introduction
When starting this project, I knew I wanted to do something I was passionate about so I could keep up steam throughout the semester. With this said, I picked Shigeru Miyamoto, the creator of Super Mario and The Legend of Zelda. Not only do I love his games, but I love his design philosophies; I see him as an inspiration.
Attraction Loop
I wanted my attraction loop to not only capture the attention of the user but pay homage to Miyamoto’s work. I knew I wanted to incorporate elements from his games. Luckily, Hype 4 Beta has a functionality for sprite sheets. With this, I was able to create animations that stayed true to Miyamoto’s original games.
However, I had a lot of trouble editing a video in Hype. I have a lot of experiencing in video editing, and Hype, unfortunately, does not stand well in that regard. You cannot edit things in realtime, meaning, whenever you add an asset to a timeline it always starts at the beginning of the timeline. Luckily, I was able to work through this.
Info-graphic Project
In order to keep up with the themes in my loop; I wanted to continue to use original assets/graphics from Miyamoto's games. With this being an interactive project, I really wanted this part of the project to be more like a video game. With that said, I continued to use sprite sheets so I could emulate the animations from the original games.
This is when Hype really started to click for me. I was able to create a scrolling Mario game level, in which I had clickable blocks that would display info about Miyamoto. This took me a long time to get done, but it came together so well. I was able to incorporate not only graphics from Miyamoto’s work but music and sounds to really make the experience even more authentic.
Interactive Project
This part of the project was a struggle for me. I did not know how to make an experience about a person more interactive than I had already done with the info-graphic. I thought about doing a character select screen in which you could see info about the character, and then have an interactive part of the screen in which you could color in the character like a coloring book. In the end, though, this convoluted what I wanted to focus on; which was the characters Miyamoto created and the design behind them throughout time.
In the end, it didn’t end up being as interactive as I was hoping, but I was able to maintain the theme of staying true to Miyamoto with sounds, graphics, and music. It may seem too similar to my info-graphic, but to me it was more important to uphold the spirit of the whole project. Luckily, after I figured out exactly what I wanted to do, putting together this part of the project was not too difficult. It was a lot of copy and pasting from one character to the other; I just had to update some information and pictures on each page.
Struggles
Overall, the whole project went well. Piecing together each project was not too difficult. However, something odd happened over the course of the semester with my info-graphic. The blocks that you would click on would take you to another scene; and then, you would be able to return to the original timeline right from where you left off. The scene was retained.
However, for some reason, after I updated Hype 4 Beta this function no longer worked. I embarrassingly discovered this error when showing off the project to the class in an interactive lab. I tried working through it, but in the end, I was not able to figure it out. I am not well versed in Javascript, and on top of that, I did not find this error until it was crunch time for the project. Also, as I said about Javascript, I struggled to figure out how to take the kiosk back to the attraction loop after idle time. This may be due to my lack of knowledge about Javascript; also, we did not go over this function in class. I think that could have been helpful while wrapping up the project.
Conclusion
This project was a great exercise in interaction design. I did not realize how much thought went into different kinds of experiences, rather than just web sites. The design process takes place in kiosks, DVD menus, video games, and more. A design for any product requires meticulous planning. Although there were some struggles along the way and in the end, I feel more prepared to work on interactive experiences in and outside of Hype. Overall, I feel like my project is not only a great homage to Shigeru Miyamoto but also an interesting and interactive experience for those who may not know who he is.
Here is a link to my kiosk assets. You can take a look at them for yourself!
