Overview
Problem
before & after - Spinner redesign
My role
Designed the visual and motion concept for the new spinner.
Drove the project from ideation to prototyping and cross-platform alignment.
Defined motion behavior (timing, easing, and scale) that could survive translation from prototype to native implementation.
Worked with engineers across platforms to ensure consistent behavior in production.
Design process
Finding the right form meant testing a trade-off between clarity and playfulness. A spinner too lively becomes distracting, one too restrained loses personality. The final concept settled on three ellipses arranged in a triangle, with synchronized color cycling and subtle scale animation.
Final Concept
After the final concept was selected, I expanded it into a full set of variations to cover different themes and use cases across the app.
Light Mode and Dark Mode adaptations ensured visual consistency and accessibility.
visual states of the new spinner
Use cases: The spinner was designed to work seamlessly across multiple scenarios, including:
Pull to Refresh
Infinite Scroll Loading
Text Field
Toast Notifications
Overlay Loading
Partial Page Loading
This stage was about ensuring that the spinner was not just a standalone animation, but a flexible system element that could adapt to different contexts and still feel cohesive within the Visual Refresh design language.
Designing for three platforms
After finalizing the design and motion specs, the next step was to bring the spinner to life across platforms. This turned out to be a separate design problem on its own. Each platform renders motion differently, and what feels smooth in a prototype doesn't always behave the same way on a real device.
Getting the spinner to read identically everywhere meant staying close to engineering well past the design hand-off. I tested implementations regularly, provided visual feedback, and compared builds with prototypes, adjusting where needed until the result matched the intent on every platform.
This project taught me that even small UI elements, like a spinner, can involve complex design, iteration, and cross-platform collaboration.
I learned the importance of:
Iterating and refining ideas with design peers.
Building strong collaboration with engineers early in the process.
Documenting thoroughly so motion can scale across platforms.
The implementation process was not fast, but seeing the final spinner live and fully functional on all platforms was extremely rewarding —
a clear example of thoughtful design and careful execution.
