Pearl Harbor: A Kiosk Experience (2019)

The Basics

Challenge

Create an informative kiosk, like one found in a museum or exhibit. The topic I chose was the event of Pearl Harbor. We had to focus on three main ideas for the project. An interactive loop, an informational article, and a timeline of events.

Role

Graphic Designer Animator Researcher UI Designer

Tools

Illustrator Audacity Hype 4

Duration

4 months (during a college semester)

The Process

1. Research

Using multiple internet sources, I compiled a list of the events at Pearl Harbor. The items researched were the ships and their purposes before, during, and after the events at Pearl Harbor, and the sequence of events on the day in question.

2. Design

Started with the attraction loop that featured kinetic typography. Next was the interactive infographic. The final section was a timeline. The last design aspect was the menu. Each used typography and handmade graphics.

3. Animation

Within Hype 4, I used multiple animation prompts. Kinetic typography was pure animation. For the interactive infographic, the prompts opened pop-up windows. The timeline was a large mix of side-to-side animation, pop-ups, and continuous motion.

4. Testing

The whole project was tested using Hype 4’s interface with the Apple iPad tablet. The testing used made sure all of the interactions worked within the animation phase.

Concept

During the spring semester of 2019, I created an informative kiosk like one in a museum or exhibit. The topic I chose was the event of Pearl Harbor. I focused on three main ideas for the project. An interactive loop, an informational article, and a timeline of events.

Attraction Loop

Research

The requirements were clear at the beginning of the project: we were to start with kinetic typography. I decided to use Franklin D. Roosevelt’s speech “A Date Which Will Live in Infamy” as my inspiration. Having the audio helped me focus on designing the looping attraction, but I faced a problem: what exactly was kinetic typography? I turned to YouTube videos for research and found impressive examples of text animation, giving me ideas for animating the text later.

Design

Storyboard

I began by crafting my animation plan and assets through a storyboard consisting of 24 frames, utilizing an Adobe Illustrator template. This template facilitated space for images and text detailing motion implementation. Concurrently, I edited my sound file in Audacity, eliminating excess static and adjusting its length to approximately 30 seconds. With the storyboard as a guide, I finalized asset creation within Illustrator, ensuring each element was in the appropriate font and position for seamless transfer to Hype4 for animation.

Animation

In Hype 4, I imported all the necessary assets and added the audio file for background looping. Then, I meticulously animated each part of my planned text interactions using various properties such as Origin, Rotation Angle, Display, Scale, Opacity, and Size. I learned that specifying animation points made it easier to sync motion with the audio and avoid unintended interactions.

One standout interaction I enjoyed creating was a typing effect, achieved using an asset resembling a blinking cursor. The cursor blinked in and out using the Display property, and I used the Origin property to move it as each new letter appeared. The movement of the letters had to be precisely timed with the audio to make it engaging.

Other animations, like the word ‘attacked’ bouncing in to ‘attack’ the American flag, or the fan motion accompanying ‘as commander’ and ‘and chief’ ‘of the army,’ added a playful touch. There was also a scene where a balance scale and the word ‘measures’ seemed to be knocked off a table. Each interaction brought joy and creativity to the project.

“Your project turned out to be a very nice piece. Great use of typography and subject matter.”
- Eric Oliver

Mastering the program was a learning curve, but every project step demanded better understanding, making the effort worthwhile. The positive feedback from classmates and my teacher validated my hard work on the project.

Interactive Infographic

Research

For this part, I determined the content I wanted to include in the infographic. I opted for a comprehensive approach, aiming to cover a wide range of information. However, this made the infographic more text-heavy and less visually engaging. The information included details about the position and significance of each US ship before the attack, their experiences during the attack, and whether they continued in service afterward. I gathered information from approximately twenty different sources.

Design

The design was straightforward. I took inspiration from a map featuring light blue with gray, yellow, and tan accents. Using this color scheme, I added circular interaction points on the map corresponding to each ship. These points would expand when clicked, displaying an information icon and the ship’s name.

If somebody clicked on the info icon, a pop-up window showed details about the ship. The window had a dark blue background with rounded corners, with the ship’s name at the top left. On the right was a light blue box containing an image of the ship, with textual information below it. On the left, there were button tabs for before, during, and after the events of Pearl Harbor. Clicking each tab highlighted it in light blue and revealed the corresponding information. I repeated this step for eight other ships.

Additionally, I started incorporating the menu system for the entire kiosk. It featured a tan stripe at the bottom with two icon buttons: one to return to the attraction loop and the other to access the works cited page. On the left side, there were two-word buttons to navigate between the infographic and the timeline.

Animation

To animate this page using Hype4, each circular touch-point was programmed with the action “Continue Timeline” to link to the corresponding timeline for the chosen ship. Simultaneously, it would close any other open touch-points. When somebody presses the info icon, it opens another scene, correctly scaling and positioning the images. Switching between different information buttons was facilitated by connecting each button to its timeline within the scene, indicating which button was active. The information was scrollable, and switching to a new timeline hid the information. I repeated these steps for eight ships across three instances.

In each corner was a close button, which redirected participants to a separate scene to close the extended touch-point. At the end of that timeline within the scene, the kiosk directed participants back to the original infographic map. The last page built for this section was the bibliography page, linked on the menu of every page within the infographic.

The most challenging interaction was figuring out how to close one touch point while keeping another open. This interaction required creating a new timeline within the scene for each ship and adding “On Mouse Click” interactions for each touch point on all nine timelines so that when one opened, the others would close. This process was time-consuming but ultimately rewarding, allowing me to assist others in implementing similar interactions for their projects.

Timeline

Research

Creating the timeline required extensive research to gather all the necessary information for the kiosk. I had to search for timelines of the events, which led me to two sources with slightly differing information. After compiling details about the events concerning the USS Arizona during the attack from these sources, I obtained the sequence of events I wanted to include in my kiosk.

To accurately depict how the attack occurred, I needed to understand the different parts of the ship. I conducted thorough research on the internet to find the ship’s blueprints, which proved to be rewarding. I discovered a website that provided a booklet of general plans for multiple ships from that era, which was one of the most exciting discoveries of the entire project. The website is here. I also researched the planes used in the attacks and studied how bombs would behave in the real world when dropped from a plane to the ground.

Design

I started by storyboarding the plan for my timeline, aiming to include seven specific points: labeling points on the ship, the first attacking plane, signaling the alarm, the bombing, the effects of the final bomb, the ship sinking, and the memorial erected over the sunken ship.

With a plan in place, I began creating all the assets I needed, the largest being the ship itself. I used two images and blocked out each important part of the ship in Adobe Illustrator using the pen tool. It took three days to complete this graphic. I separated each piece to animate the ship breaking apart as it progressed through the timeline of events. I also kept the ruined hull as a whole piece, so only the hull remained intact when the ship got destroyed.

Next, I used a similar process to create the water for the ship to rest in. I then crafted an image of the Japanese bomber plane and bombs to drop on the ship, all using the same method. While I completed the main pieces, I continued to create info-boxes, times, sound, swipe icons, the Pearl Harbor Memorial, fire, explosion, and machine-gun fire.

There were twelve info boxes; I filled each one with text, surrounded by a dark blue line and an inner light blue box.

The times for each minute that played out were large, white, and made from typography.

The sound icon was a standard sound icon surrounded by a light blue circle.

The swipe icon was a pointer finger with two arrows pointing left and right, also surrounded by light blue.

I used the same method to create the memorial, the ships, planes, fire, explosions, and bombs.

I based the machine-gun fire on a GIF from an adult cartoon machine gun. Then, I separated the frames into individual images and copied the firing sequence.

Animation

When animating the timeline, I designed the kiosk screen to be controlled by swiping left and right, realizing that only one scene was necessary as we moved through the timeline, not between scenes.

Following my storyboard, I imported the ship pieces into Hype4 and positioned them beneath the water asset. Using call-outs created in the infographic section, I highlighted parts of the ship, expanding and retracting them as needed. I also added prompts to inform users about the purpose of these call-outs.

The timeline began with the plane shooting from its machine guns, moving from right to left while simulating bullets firing. The animation involved displaying and hiding images in a sequence, repeated ten times for each turret gun.

Next, bomber planes entered from the right, spinning propellers and dropping bombs. The propellers spun using the rotation angle (z), and the bombs followed a motion path from right to left, with their rotation angle adjusted to point downwards. After the bombs hit the ship, they disappeared, triggering an explosion graphic followed by fire, gradually revealing the broken hull.

Other animations included objects increasing in size, moving up and down, and moving from right to left. The timeline concluded with the bibliography page.

Finally, I assembled all elements, including a menu system and seamless transitions between multiple pages, and added bibliographies to complete the project.

Testing

I tested the full kiosk using the preview option within Hype4, which allowed me to preview it in Safari or on an iPad. During the creation process, I tested it in Safari to ensure the interactions worked as intended, making minor adjustments to timing. Testing on the iPad ensured the touch points were large enough for easy activation. Once satisfied, I exported the kiosk as an HTML5 folder containing all assets and code in one file. After testing it once again in Safari, I transferred the HTML5 folder to a PC laptop to confirm it worked on multiple browsers and systems.

Outcome

Experience the Kiosk Yourself

https://pearlharbor.michaelabrownportfolio.com/

Next Steps

Though this was strictly a creative project, I wanted to consider the next steps if it were a continuing endeavor.

• Making a series of kiosks, starting with a second kiosk that has a list of the deaths aboard the USS Arizona and their images and stories to share their lives with the world.
• Creating a museum space to feature the kiosks.