For the past few months, I learned how to use Tumult Hype by creating an interactive kiosk.
The goal was to create a kiosk that would entertain while also inform the audience about Vikings. My target audience would be young teenagers.
It would be separated into three phases. Each phase had the same process. First, I would storyboard my ideas, then I would gather and create my assets, and lastly, I would put it all together. Once it was put together, the class would review each other’s assignments in class then go back and make revisions.
I created an attraction loop to Immigrant Song by Led Zeppelin. I wanted a song that was exciting and would draw attention. The song is about Vikings and was used in the Thor Ragnarok film, so it has gained popularity with the younger generation as well.
At this point, I put my ideas on paper. I spent a lot of time making sure the theme and style of my work stayed consistent throughout the phase. Here’s my style guide:
I wanted bright colors against a black background to grab attention to it. I also wanted to make it bold and playful. Bold because of the type of people this kiosk represents and playful because I wanted people to get excitement out of the kiosk.
I took the extra time to create multiple assets for the intro as well. You can see them in the storyboard:
As I mentioned earlier, this was the first time I used Hype, but it was fairly simple to figure out most of the actions I made. The biggest issue I had within this phase was figuring out how to get the audio to play. It worked just fine in Hype but not once it was pushed to the site. I found out that most browsers will automatically mute videos if they play automatically. After some different ideas and failed attempts, I figured that I could just create a separate slide with a “Play” button, so it no longer automatically played making it so the browser wouldn't mute my audio. Here’s the end result:
I wanted to focus on a few Viking legends and their stories. I thought I’d have the intro end by fading to a landing page where you can choose a few different Vikings to learn more. Here’s my storyboard:
Phase 2 was tricky for me. The struggle started with the landing page…
The crossed axes are buttons that will take you to different stories that happened in those locations. You could tap on a button and the ship would sail to the spot before it transferred to another scene. In theory, it was great but creating it was a challenge. I figured out how to do it by building multiple slides along with multiple functions, but then there were issues with the user experience. The time it took to get to Greenland without it going too fast was annoying. I didn’t like the way it looked either. In the end, I decided to bag it. I started playing with different ideas when I came across an image of a Viking settlement and thought that it would be a great background since it shows a bit of Viking culture. The image didn’t quite fit in with the theme, so I took it into Illustrator and vectorized the image. It seemed to work a lot better. Here’s the new landing page:
I decided to find other Viking themed images to use as backgrounds and vectorized them as well. They turned out much better than the bright, solid colors that I was using before. Here are each of the Vikings’ pages:
Each page has the main story of each Viking legend with an image that is clickable. The images will flip once clicked and share another side story about the legend. The images are not recognized as buttons right off the bat, so I decided to make them shake every few seconds.
When I had my peers test phase 2, the signifiers for the side stories proved to be effective while not being too distracting. They did point out that it was very text-heavy though and I agree. I put in some thought of how to change it up a bit, but the ideas that I had were going to take up a considerable amount of time that I did not have, so for now, it would have to stay the way it is.
For the last phase, I created a timeline. Just like I did with the other two phases, I sketched a storyboard. Here’s it is:
The line is made with a sword and the events are buttons in the shape of shields. I ended up with five events instead of four. Here are the final screens:
At this point, I felt like I had a handle on Hype and it came together quite easily. Phase 3 was fairly simple and probably my favorite with how it turned out.
The navigation took the back seat throughout this assignment until the end. This is because at the beginning of the semester we didn’t take a look at the big picture. I wasn’t sure what phase 2 or phase 3 was going to require until I got there. As you can see, throughout the project the navbar evolved. I had the “Vikings” tab to the left because that’s where the Intro ended making it feel like the landing page.
What I Would Change
As I said earlier, breaking up the whole project into three phases was good for me so that I could learn Tumult Hype. I was able to learn the different functions of Hype at a rate that wasn’t overwhelming. With that being said, if I were to do a similar project today in Hype, I would make sure I have an idea of what the entire project was going to look like early on because I had no idea what each phase was about until we got there as a class. One issue from doing the project one phase at a time was the style guide. Part of each phase was to make a style guide for that phase, so I ended up with three of them. I feel like there should have just been one style guide for the whole project. As you can see, each phase doesn’t quite line up with the colors in the style guide that I shared from phase 1, plus there are fonts missing so I would like to go back and create just one for the whole project.
In phase 2, if I weren’t going to toss the whole idea and start anew, I would change the backgrounds to a solid color as I did in phase 3, and the image buttons would have the same style as the images in phase 3 as well. This would make it feel more like one project instead of three projects stitched together.
In phase 3, I would have made a signifier for the user to know what timeline event they are on such as turning the active shield a different color.
Throughout this project, I have gained a decent understanding of Tumult Hype. I feel comfortable using the software, but I’ve only experienced a small amount of what Hype can do. I look forward to learning a lot more in the future.
Nikolas Sprunt is a student at Utah Valley University, studying Interaction & Design. The following article relates to DGM2280 taught by Professor Oliver and representative of the skills learned.