AOPS ONLINE CLASSROOM
Role: Lead Motion Designer
Company: Art of Problem Solving
Published: 2023
When re-designing our AoPS Online self-paced suite, cleaner design and motion were two of the core pillars we were going for. The challenge here wasn't to create something that moved and looked 'pretty,' but rather to create a series of interactive states that promoted engagement and learning without being too distracting.
Just like sound design in a film, great motion is felt subconsciously - you know it's presence is there, but if it's too obvious then it fails at its goal of seamless integration and overshadows the design it's trying to highlight. This was one of the first projects that involved me creating animations for UI screens, and my years with AoPS had helped me up to this point to learn the brand to create something engaging albeit with less tools.
DESIGN WITH LIMITS
As someone who had mainly been a motion designer for advertising up until now, I had to unlearn a few things: primarily how to create something engaging without being flashy. First of all, there were the technical limitations: I would be animating in After Effects & exporting via Lottie Files to web. Lottie is very rigid in terms of what it can render for web, so I would be working with a fraction of my toolkit - and mainly on vectors. These limitations were the main focus behind my storyboards and how I came up with ideas.
UI SKETCHES & STORYBOARD
For our main storyboards, I worked with our stakeholders and lead product designer, Stella Seki, to outline what their needs were to be integrated onto the platform. We did not want to add motion to every element, and our primary focus centered on interactives that would fill up idle moments between lessons, and create further student engagement. Out of these, load states and celebration modals were the main priority to bring to life given how pivotal each would be to giving subtle hints of movement while not distracting the user's attention and keeping them focused on the lesson.
I the proceeded to sketch these interactives out, with clear indications as to how each would move upon hovering and clicking for my product designer to give the green light before proceeding on to the next steps.
ANIMATICS
I followed the next parts of the process as if animating for ads and socials - I took the sketches I made and laid them over each other to create a series of animatics that would mimic the movement of our interactive states. As opposed to traditional animation, interactives are led by the user, not by a set timeline when the play button is clicked. Therefore, they mainly play as a loop that resolves once the user hovers or clicks out of the state.
Since our online brand is also meant to be less decorative, my main subject of animation was the AoPS logo, with most of my loading states, hovers, and click-throughs centered around more and less complex versions of the cube coming together and deconstructing itself.
RIGHT & WRONG STATES
For one of our main micro-interactions, I had to design a glyph that could start in the same state and transform into an either 'right' or 'wrong' state. This glyph would then be used to indicate when students got a problem right or wrong on their given homework assignment. I did several motion tests with a simple cube - alluding to the central shape behind our logo, and played around with its strokes to create a loop that could either form an 'x' or a checkmark to indicate right or wrong. Our stakeholders ended up liking it to where they wanted to translate the same loading concept onto other buttons that would load into success states.
LOADING SCREENS
The most fun part of our process was to animate our logo in various forms loading up and then disappearing. I wanted to emphasize the concept of geometry while also alluding to one of my favorite logo animations: the nintendo gamecube logo. This process then became a game of finding how many ways could I build or rebuild a light bulb - or a cube in this case. The idea was that this animation could be played endlessly if a page took longer to load, and could end the loop at any moment if the page loaded quicker.
Funnily enough this logo animation ended up being used all over our online class once the final version was approved, and especially in our computer science suite to fill up the empty spaces between problems.
CELEBRATION MODALS
Jumping off the loading cube animation I made, I carried the same geometric concepts onto our celebration modals, deconstructing our logo and turning it into various fun and engaging animated shapes that would bring further affirmation to a student once they got a problem right. I also ended up using the confetti seen here on other celebratory animations as well.
FINAL MOCKS
To wrap up our project for dev delivery, I fitted all the animations I had made onto various mocks of our Online Classroom, provided by my Product Designer. This allowed all of us to see how these animations would perform in context, and if they were having the intended effect to be subtle in the context of the whole while still engaging. Along with the mock implementation, I also added on skeleton loading states, and waterfall animation to our various lines of text to give an idea to our developers as to how everything should move in order to communicate subtle motion across the whole of our product.
CREDITS
Lead Motion Designer: Nestor Tomaselli
Lead Product Designer: Stella Seki
VP of Engineering: Corinne Madsen
Project Manager: Shannon Rogers