Cover image for Mello


Your light companion.

Design and Development

Development, project Lead


Arduino, Circuit Playground Express

Mello is a tangible light companion that can be used allows users to wind down before sleep by providing a breathing guidance. As a developer, I led and worked with my team, ideating on interaction methods and implementing all the functionalities using Arduino, runningon Circuit Playground Express. A prototype was made and 3D-printed for an academic course at SFU.


The device uses its shell as an interface through touch, tap and orientation manipulation, abstracting away and obfuscating any complexity that could have distracted users from their relaxed state.

We focused on using gestures to instill kinesthetic memory of moving a tangible object as it may “increase the awareness of performed actions” 1. Through repetition in interaction, we wanted to assist users in creating a form of bedtime routine that allows them to unwind at the end of the day. This was possible by exploring embodied user interfaces, ideating on how the body of the device could become the interface itself, making device manipulation an integral part of the interaction.

Mello uses a combination of affordances and conventional mapping 2 to create a self-contained experience. The two breathing and colour selection modes are activated through object orientation manipulation, similar to an hourglass. Facing down (with the flat side up), Mello will go into colour selection mode, allowing users to cycle between colours and select one (Figure 1b). This is done by tapping on the side that is facing up.


left: Mello in its colour selection state. Right: The colour can be cycled by tappint on the bottom of Mello.

Rotating the device by 180 degrees will put Mello in breathing mode. On the top side that is round, there is a visibly circular touch surface which can be touched to activate a breathing session. A blinking white light will then indicate the start of a session, after which the session starts. At the end, Mello will turn off automatically to minimize any potential disturbance to users.

Mello's breathing guide user scenario.

Mello’s breathing guide function illustrated in a user scenario.

In a likely scenario, the user is about to wind down and go to sleep. Should they choose to do so, they can rotate the device upside down and tap on the top surface to change a suitable colour. After they are ready, rotating the device and touching the top surface would start a new breathing session. Mello would blink slowly to let them know a session is about to start, giving them time to settle in, and then the session would begin. After the session, Mello would turn and remain off until another session is started by the user. In addition, they could end a session by touching the top surface.


On the outer level, Mello consists of a 3D printed enclosure, including the housing with a detachable lid. On the top surface, a circular aluminum layer is placed, with a conductive thread attached underneath through a small hole. On the inside, the thread goes through an inner cylinder (around which an LED strip is wrapped), and connects to the Circuit Playground that is attached to the lid on the bottom (for detecting tap using circuit acceleration).

Implementing Mello’s behaviour was a minor challenge given our tight deadline, but I was able to develop all the functionalities while paying attention to the intricacies. For instance, I was adamant about developing a smooth flow between the two modes. As a result, turning the device would gradually change or dim the lights, preventing a sudden change in lighting and making it more pleasant to use during nighttime.

3D model of Mello with its internal components.

3D model of Mello with its internal components.

Future considerations

Designing a self-contained experience was a goal that we aimed to achieve with Mello. As a breathing companion, it was crucial to imply a sense of passivity while using constraints to guide users through the interaction process. The use of orientation for the mode switch proved to be successful.

Since Mello’s unified housing is where the light source is situated, the device provides minimal affordance to minimize surface obstruction. Aside from the aluminum ring, there is no indicator on the device to guide users through necessary sequences of action for switching a mode. This is a constraint that is overcome by providing instruction manuals with the product, as is the case with Dodow. Further investigation is needed for increasing clarity in interaction, which may involve adjusting the form of the device, or adding labels to indicate functionality on each end. Moving past the onboarding phase, however, we found users were able to interact with Mello without further guidance, without needing a re-introduction later on.


  1. Shaer, O., & Hornecker, E. (2010). Tangible User Interfaces. In Foundations and trends in human-computer interaction (Vol. 9, Issues 1-2, pp. 1–137). now.

  2. Macaranas, A., Antle, A. N., & Riecke, B. E. (2015). What is Intuitive Interaction? Balancing Users’ Performance and Satisfaction with Natural User Interfaces. Interacting with Computers, 27(3), 357–370.