Adult Swim Interactions
Reshaping the capabilities and standard understandings of a button to maximize interaction and joy.
Overview
MY ROLE
UX/UI and Product Designer
TIMELINE
January 2020 — April 2020
TOOLS
Illustrator, Photoshop, After Effects, Premiere
We understand the basic principles of a button; it's used for navigation and to direct you somewhere else. But fundamentally, it is made to influence a point of interaction. Without a button, how do you get to the next step? It is a staple element within UI design and is a given for any interactive interface.
However, working with something that is expected, over time, we can become desensitized to its utility and take it for what it is. Innovation is an afterthought because sometimes, going more straightforward is the most intuitive experience and standard practice. And often, many interfaces require simplicity. But it doesn't mean we can't consider how we can reshape this simple item to something still engaging and perhaps even further encourages the interactive experience.
So I wanted to conceptualize ways to do more with buttons than is typically seen, from hover-state and selected-state to even the interaction of the click itself. So I thought, why not model it after a brand known for breaking boundaries, playing, and doing whatever they want? With those guidelines, I had all the freedom to think out of the box without the constraints of industry standards. That is why it was vital for me to choose Adult Swim as my brand influence. Overall, I wanted to create an experience that exudes the same feeling and expression of freedom and creativity that Adult Swim portrays throughout their media and culture.
Objective
Think big, more play.
Plan
Mood board
As an animation fan, creating a mood board inspired by cartoons was crucial. By incorporating elements that were highly illustrative but still cohesive I was able to gather visual inspiration and ensure design consistency. This board helped me create a design that felt true to the Adult Swim brand and was visually appealing and dynamic. Ultimately, the mood board was a valuable tool in helping me bring my design concept to life.
Sketch
Button Design & Interaction
When sketching the buttons, I first drew inspiration from Adult Swim's current UI, and then other interactive media they had. The cool thing with Adult Swim is that their consistent pattern is just coming up with something that was unique and far out there.
I mocked up the different presentations of the button from its disabled state, to the hover interaction, to even the interaction of the copy on the hover/selection state. I know that I wanted there to be as much movement as possible in this limited container. So it was important to breakdown each element and see what could have motion.
Sketch
Flow Animation
Fluid motion was a common theme for Adult Swim's branding and products. Overlapping, flourishing, and trippy imagery are some keywords that come to mind when I take in Adult Swim Media, especially at 3 am. So I wanted to follow through with that vision and create a frame-by-frame flow animation that would be visually bold and organic.
Animation
The Big Button
Default Button Interaction
Sketch
Toggle Explorations
Again for this concept, I had to look at what currently exists, consider its everyday use and components, and dissect it. What makes up a toggle? What makes up a slider? How can I incorporate elements of secondary animation into these UI elements to let it feel like it exists in the Adult Swim ecosystem? These were all questions I had when sketching the different toggle interactions. I valued my point of reference and how Adult Swim is primarily an animation company and wanted to stay true to that with the interface elements.
Animation
Toggles, Switches, and Sliders
Toggle Buttons Interacton
Sketch
Radio Selector
For the radio selector, I particularly wanted to play with the eye element I have throughout the interface. I found it essential to correlate the interactions that could occur with a radio selector to movements an eye could have. These inherent movements could indicate different states of the radio field. For example, when a user hovers or clicks a radio option, an eye can open; when the user deselects it, the eye can close and disappear. I really wanted to consider the micro animations each element could have, no matter how small.
Animation
Radio Selection
Radio Buttons Interacton
