scenic design_recharge.png

Recharge

RECHARGE

UI + Product Design

 
recharge

THE CHALLENGE

To design cohesive interfaces for a product consisting of two different components:
app + 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.

MY role

UI + Product Design

Time frame

3 weeks

 
 

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.

 

design decisions

Colors

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.

recharge_color

Typography

I decided to stick with one font to be consistent, and I chose a clean san serif font for a minimal style. I also used two different weights and sizes to establish visual hierarchy and direct the user’s attention.

Layout

I kept everything on the screen centered, with generous space between each group to reinforce the hierarchy of different groupings. Here's a grid analysis of the layout of the screen during an iteration close to the end:

 
 
 

iterations

Medium/High Fidelity

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. Here are some of the features of the product that I’ve designed:

 
 
 stressed

stressed

 de-stressing

de-stressing

 
 
  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.

 

the Wearable

Sketches

As I designed the interface of the screens, I also made some sketches of the wearable device that would be used with the app in conjunction.

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.

recharge_sketches

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. 

 

Reflection

+

The unique challenge in designing for an app that has a wearable component pushed me to consider the product more holistically. I understood that I’m not just designing an app interface, but building a consistent user experience for the product. 

I wish that this stress management app is an actual product that I can design for - so that the interfaces can be tailored to the wearable and the app. As of now, this is a hypothetical app with a sketch of the wearable, and there are a lot of assumptions embedded in my designs that should be tested.