Affordance

Things to Keep in Mind:

Affordance refers to how the design of an object suggests its function, how users intuitively know what actions are possible just by looking at it.

For example, I incorporated a trigger that causes the dispenser handle to wiggle when the mouse hovers over it. This subtle movement signals to the user that the object is interactive and invites them to click. Once clicked, the animation plays.

Research

Before starting my project, I researched different design and animation approaches that could effectively engage users. I discovered that interactivity is a powerful tool, not only does it add visually appealing animations, but it also encourages users to explore and play. This interactive element makes the experience more enjoyable and helps time pass more quickly.

Concepts

Interactivity

Interactivity stood out as an important tool because it can take many forms, such as projection, interface design, search engines, audio, and more. In the case of my project, it helps reduce user frustration during loading times. By allowing users to engage with the mechanics and customization features, the experience becomes more playful and engaging, making the wait feel shorter.

Each concept was designed to resemble loading animations but included opportunities for interaction and play. Since I relied heavily on interactivity for this project, the final decision was based on which concept would best showcase the technical aspects, which led me to choose Concept One: The Loading Bar.

A looping animation showcases different themed bars smoothie, ice cream, cocktail, and more. Users can select from a side menu to choose which bar appears, triggering a fun animation of drinks or treats being made. It's a playful, interactive way to pass the time and explore different styles.

The Loading Bar

Chosen Concept Storyboard

Technical process; Data Binding

In Rive, the Data tab is where you create triggers, known as data binding, these are signals that control when animations start or change. You can then apply these triggers in the State Machine to control transitions between animations. A couple of examples are ‘boolean’ for when the mouse hovers and ‘trigger’ for when you want to click.

Constraints:

For my constraints, I focused on turning the wait time into a fun, engaging spectacle. To bring this idea to life, I took the initiative to learn a new tool, Rive, and used it to create an interactive experience. I aimed the project at teens and young adults, or really anyone who finds waiting boring. Each round of gameplay lasts about 15–20 seconds, giving users the option to keep playing or move on once the loading is complete.

Technical process; Hit Box

In Rive, a hitbox is a transparent shape placed over an object to make it interactive. After adding a hitbox, you click it and choose "Add Listener" to set the type of user action, like a click or tap. Then, you connect that listener to a trigger from the Data tab to control which animation plays when the user interacts.

RIVE Technical Execution

This was my first time seriously experimenting with Rive, and it came with many challenges that required troubleshooting and seeking technical help to figure out how to approach certain interactions. In addition to learning data binding, there were no tutorials that directly addressed what I was trying to create. With the help and collaboration of Ana Kuster and her experience with Rive, along with outside research, I was able to piece everything together and build a fully functional interactive loading game.

Final Mockup

Final Mockup

Getting promoted means stepping up. Those who take charge, spot opportunities, and clearly explain their ideas are the ones who move forward. This project is a great chance to take initiative and prove your leadership by leading it confidently and efficiently.

Interactive

Loading Screen

Design Challenge:

My art director casually brought up how much they disliked the current loading animation and mentioned wanting something more fun or informative. Even though it was just an offhand comment and I wasn’t given much direction, I took the initiative to create my own brief and start exploring ideas on my own.

Credits:

Design and Animation
Hailey McMahon
Interactivity:
Hailey McMahon
Technical Help:
Ana Kuster
Check out her work! https://anakuster.com/

- As part of the interaction, the pod periodically opens by click on the pod, causing the peas to bounce out in a rhythmic, looped motion, just like animated loading dots, then close back up. Users can tap or hover over the peas as they appear, triggering playful animations before they bounce back into the pod, adding a fun, interactive twist to a familiar visual.

Peas in a Pod

Key Takeaways

Design Process

First Pass Design

After receiving feedback during my pitch, I adjusted the concept to focus solely on an ice cream bar with customizable toppings. I revised the design and color scheme to reflect this new direction, drawing inspiration from 1950s ice cream shop posters to create a vintage aesthetic. The final design includes three separate dispensers for different toppings, allowing for interactive user engagement.

Final Pass Design

For my second pass, I adjusted the color palette to a lighter scheme and used a rounded container to create a softer aesthetic. I simplified the design to focus solely on the ice cream drop, due to the complexity of the interactivity. To enhance the challenge, I redesigned and added another bowl and made flavor selection through the menu the main customizable interaction. My art director also advised me to include a sign around the dispenser handle to guide the user to interact with it.

Technical process; Handle Interactivity

For the dispenser handle, I learned that I needed to add two listeners to the same hitbox, one for when the mouse hovers over it, and another for when the mouse moves away. The hover listener is set to true to start the animation (like a wiggle), and the unhover listener is set to false to stop it. Then, using data binding, I created rules like: “If the mouse hovers, the object wiggles,” and “If the mouse leaves, the wiggle stops.”

Technical process; Todays Special Pull Down

The interactivity for the flavors tab followed the same process as the dispenser handle. The main difference was that I added a few extra triggers so I could control when the menu opens and closes, rather than having it reset automatically after one click. Instead of using a simple "click" input, I used "pointer down" to open the tab and "pointer up" to close it again when clicked a second time.

Technical process; Scoop Timelines

For the failed scoop, I had to simplify the animation. Instead of keeping it on the conveyor belt and letting it melt, I made it melt and disappear quickly. This is important because every time the handle is clicked to drop another scoop, the previous one disappears automatically, causing an unwanted loop. So I needed a clean, quick animation that resets seamlessly.

For the successful scoop, I made a separate timeline where the scoop is parented to the movement of the bowls. The scoop only becomes visible when it’s directly under the dropper, so it appears at the right time in the animation.

Technical process; Final Interactivity

I ran into a few problems, but the biggest one was realizing that each hitbox had to be a separate object. I also needed to control the ice cream that gets “stuck” to the bowl by changing its opacity in a different timeline.
At the end of the falling animation, I had to set the opacity to 0 and set its opacity to 100% on the scoop that’s attached to the bowl, so it looks like it lands and stays.
In the state machine, I used a blank starting state that connects to both the success and fail animations. For the success path, I used constraints and opacity keyframes to make the parented ice cream appear at the right time.

I used a couple of people to test my interactive game without giving them any context, so I could see how intuitive my design was. The feedback I received was to change the scale of the dispenser to it was a little more clear that it was the main interactive piece.

Playtest

Julie Girouard Testing Game

Corey Gregoire Testing Game