Recharge

UI DESIGN


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




GOAL

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.

CONTEXT
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.




PROCESS
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.




Typography


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.




Layout


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



ITERATIONS
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.



stressed  
destress


  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.





WEARABLE
Sketches


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.



Mark