Works     Graphics    Info



Keywords: Stress, relief, interface, mood, wearable device


To design cohesive interfaces for a product consisting of two different components: a stress management app and wearable device.

In Spring 2018, I took a class to learn about how to design aesthetically engaging interfaces, and the final project involves designing two interfaces for a stress management app. The goal is to turn the user’s stress into something positive by providing positive visual feedbacks.

The user is stressed.

The wearable sensor picks up the user’s status and displays the sensor reading as well as the status of the user being stressed. The user presses the button on the screen in reaction. The screen then takes the user to the next screen where it suggests the user to relax.

Colors & Moodboarding

To set the tone of the user's statuses of being stressed/de-stressing, I partnered with a fellow classmate Sophia, and we built two distinct color palettes for each screen, pulling inspirations from images on the internet.


I decided on a clean, san serif font for a minimal style, so the user can clearly see the focus on the screen. I used two different weights and sizes to establish visual hierarchy, directing the user’s attention to the most important element on the screen.


I kept everything on the screen centered, with generous space between each group to reinforce the hierarchy of different groupings.

Medium to High Fidelity

Based on peer feedback, I iterated through medium to high fidelity for the interfaces,  tweaking different elements like the font, iconography, spacing, copy, gradient, etc.

You can see the evolution below:

Final Design

The design is built upon a metaphor that compares the user's stress status to a battery, e.g. a low battery status when stressed.

There are two screens in total, each indicating a separate stress status.


  1. When the wearable device detects that the user's stress level has hit a certain critical point (e.g. when the “battery” is below 20%), the app connected to the device would enter the stressed screen.
  2. The symbol will change from exclamation to lightning sign to indicate changing status from being stressed to actively de-stressing, and enters the de-stressing screen.
  3. The “battery” will then charge as stress level decreases. When the stress level hits a certain point, the user will have the option to swipe left to quit the de-stressing mode.


It’s important to keep consistency between different components of the whole product - in this case, the interface and the physical wearable device. 

This is to insure that the user, while using both the wearable and the app, would have a seamless experience transitioning between the two, which will help create a sense that this is a cohesive product.

This is done through: keeping the symbols consistent across devices (e.g. exclamation and lightning), and translating the minimal style from the interfaces to the wearable device.

While the heart is a major element in the app interface, I decided make the wearable device square, which is more neutral and can be easily disguised as an accessory instead of a stress management device.


© 2020 Copyright.