We were instructed to create a mood board of microinteractions as the next step. I think this is actually a really smart approach. It's a way to collect reference examples and see what I naturally gravitate toward without overthinking it. Once I have a collection together, I can start to analyse what's actually working and why. Is it the timing? The easing? The way it communicates feedback? Having everything in one place makes it easier to spot patterns and understand what makes certain animations feel right while others fall flat. It also helps me see how different animations solve similar problems in different ways, which should inform my own design decisions moving forward.
I decided to focus on one microinteraction for each specific purpose and break it down from there.
As an example of a microinteraction within a navigation transition I chose this example of a dynamic navigation that updates as the user progresses through the interface. To me this feels incredibly intuitive as it allows the user to stay in the same place but navigate the entire interface from one spot. The navigation becomes a remote of sorts, guiding the user through the product without them having to jump around. What makes this work is how it provides constant feedback about where you are in the interface.
The animation communicates system status by visually updating as you move through different sections, which ties directly back to NN/g's point about microinteractions showing what's happening. It also reduces cognitive load - instead of having to remember where you are or hunt for navigation, it's always right there updating in real time. The smooth transitions between states make the whole experience feel cohesive rather than jarring, which keeps users oriented and confident about what they're doing.
https://assets.awwwards.com/awards/element/2025/01/678a776c35956770072985.mp4
For an example of data visualisation I actually hunted this one down as I knew it was what I wanted to look at. I recently watched a talk at Hatch Conference by Cam Worboys, Head of Product Design at Cash App. The talk didn't focus on microinteractions specifically but it really inspired me seeing the work being done at Cash App, a lot of which was really interactive and thoughtful. The example I've listed below isn't from Cash App but from a brokerage called Robinhood. It shows a chart appearing and changing based on the time frame selected by the user. The graph expands and withdraws along its path when switching from daily to longer periods. Daily won't show the full chart if there's more time left in the day, so the animation adjusts accordingly. When changing between longer periods the chart flips and bends to accommodate the new data range. I find this consideration to be superb. It keeps users informed on how their investments are performing but does it in such a subtle way that maintains accuracy. The chart doesn't just swap out, it transforms to show you exactly what's changing and why. This ties back to NN/g's point about system status and preventing confusion. You're never left wondering what happened or where your data went. I mention the Cash App talk because it really resonated with me. I'm not entirely sure why but I really enjoy designing for financial products. I feel with money there are absolutes. Numbers don't lie and interfaces need to reflect that precision. This chart animation does exactly that, it's accurate, clear, and honest about what it's showing you.
This might be the direction in which I take this project.
Cam Worboys: How AI is Redefining the Role of UX and Product Designers
https://player.vimeo.com/video/1018314492?background=1&autopause=0
As an example of a loading indicator I opted for a branded one. I feel these are much more effective than generic spinners because they're a unique opportunity to present the brand's identity. Beyond just showing a logo, using a brand's wordmark or icon within a loading indicator can actually bring the product to life. It becomes a layered experience where questions like how the loading indicator is animated contribute to the brand's personality and the product's overall feel. The example below does this really well. It even includes a brief description of the type of work the brand does and how that should be reflected in the animation. The loading indicator isn't just functional, it's saying something about who they are. This ties back to Val Head's point about animation telling your brand's story. Every interaction is a chance to reinforce personality, and loading states are no exception. It's this kind of thoughtful design that elevates products from functional to memorable.
https://cdn.dribbble.com/userupload/13310186/file/original-18b5c5ff2967fe192dcfcfb6cf0774d3.mp4
For a call to action button I chose this example that takes it a step further from what's typically expected. This example expands on what the call to action suggests, giving users an additional insight into what the next step in the user flow might be. This could be useful to entice users to continue their journey or even to provide more information if the product itself is obscure or unclear in what it offers.