This stage focuses on refining and expanding the initial set of micro-interactions, with an emphasis on improving clarity, consistency, and overall usability within the interface. While the earlier development phase established the core interactions, this stage considers where additional micro-interactions may be necessary rather than simply decorative.
Given the financial context of the product, refinement prioritises reassurance, readability, and user confidence. This involves both improving existing interactions and identifying new opportunities where motion can better support user understanding.
During this stage, it became clear that micro-interactions were not only useful in the initially selected areas, but also necessary in other parts of the interface.
An existing pie chart within the interface presented an opportunity for further development. In its static form, it communicated information, but lacked clarity in how users might interpret changes or relationships between data points.
By introducing motion, the pie chart becomes more dynamic and informative. Animated transitions between values can help users understand proportions more intuitively, particularly when data updates or filters are applied.
This builds on the earlier graph-based visualisation, extending the role of motion in supporting financial awareness and decision-making across multiple formats.
Segment transitions are animated over 250–350ms using ease-in-out, allowing users to track proportional changes without abrupt shifts.
Static versions made it difficult to interpret how values changed; introducing motion improved clarity by visually connecting previous and updated states.
Colour and labels remain consistent throughout, ensuring that data meaning is preserved even if motion is reduced or removed.
Screen Recording 2026-05-05 at 17.37.24.mov
The initial concept for this interaction explored a more illustrative, collage-like style. However, as development progressed, this approach felt inconsistent with the rest of the interface and weakened the overall visual cohesion.
As a result, this was replaced with a more on-brand solution: a moving gradient wave. This animation aligns more closely with the visual identity of the product, while also introducing a calmer and more controlled motion language.