Mindful UX Design, Micro Interaction Concept for SaaS with Figma

Designing a mindful UX micro-interaction using Figma’s prototyping tool.

The Monobloom app imagines a free trial concept, common in SaaS, where a person might come across an error message in a critical part of their journey.

Instead of a generic error message and UI which “jumps” and reloads, we greet the person with a hyper local error message.

Alertness is high, but the tone and the language aim to be friendly and understandable. The message is rich and informative rather than short and dry. The UX highlights the error and the unambiguous text at exactly the time and place needed.

If the person proceeds to their journey, the credit card field reveals itself again. We must regain the user’s attention and try to calm them down after the shock. An animation quirk aims to achieve that.

The cursor in the credit card field animates in two modes: attention mode and mindful UX mode.

The attention mode aims to trigger central vision and recapture focus. The cursor blinks and does so intensely, but only for a moment.

The mindful mode aims to reduce stress and reassure. The cursor pulsates instead of blinking, matching the average resting heart rate of a person at about 60 beats per minute.

Sidenote: this is version 0.1, further tweaks and improvements are needed. This video was first posted on Twitter and YouTube.