The Vikings: An Interactive Kiosk

Nik Sprunt
May 20, 2020 · 7 min read

For the past few months, I learned how to use Tumult Hype by creating an interactive kiosk.

The Project

The goal was to create a kiosk that would entertain while also inform the audience about Vikings. My target audience would be young teenagers.

The Process

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.

Phase 1

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:

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:

First 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:

Attraction Loop

Phase 2

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 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:

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 Viking Legend page

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.

Phase 3

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:

Storyboard Phase 3

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.

Navigation

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.

Conclusion

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.

If you like my work and would like to reach out, you can find me on Twitter or LinkedIn!

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.

Nikolas Sprunt

Interaction Design student at UVU

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store