design variations:
breathing monitoring
2019 Nanit Feature
Introduction
The Nanit camera monitors babies' breathing by tracking micro-movements.
The camera monitors this movement by tracking the pattern on the baby's Breathing Wear. This is achieved with computer vision, no chips or electronics are used in the Breathing wear on the baby.
In this project, I took part in designing the breathing monitoring interaction.
Here you can see designs I tested for visualizing the breathing movement, so parents could track their baby's breaths and 'see' what the camera sees.
Since this was a new type of interaction that exists only in Nanit, I was looking for a new type of visualization inspired by breathing motion.
Selected designs were then shown in user testing.
Collaborating with -
The product team 👩💻👨💻 ... 7 ppl
UX researcher 👩🔬
Development team: backend, iOS and Android 👩💻👨💻 ... 4 ppl
Role
Visual research
Interaction design
Tools
Sketch
Invision prototyping
Principle prototyping
Variation 1: the breaths as particles in motion
In this design, I was looking for ways to visualize this movement of the breaths so the parents can track it and 'see' what the camera sees. In this concept, the circle particles represent the motion of the air as the baby breaths.
Variation 2: Rising and falling motion
In this design variation, the rising and falling circle represents the motion in our body, specifically in the diaphragm, as we breathe. The circle can be dragged up to show more information about the baby's breath and additional actions.
Variation 3: Enhancing the pattern motion
Using computer vision, the Nanit camera can to 'see' micro breath-movements on the pattern in the Breathing wear on the baby. In this design variation, the pattern on the actual baby is colored to indicate it is being tracked (seen) by the camera. A fragment of the pattern is enhanced at the bottom of the screen to allow parents to see more easily the baby's breathing motion in real-time, essentially allowing parents to 'see' what the camera can see. In this design, there is also an example of the breathing indication being minimized as to not block viewing the baby.
Variation 4: Wave motion
This was the selected design. In this version, tapping on the monitoring button expands it into a capsule, which contains the breath indication. The breath is represented by a wavy motion inside the monitoring section at the bottom of the screen.