WAV

Intro

Practicing unconventional visual design

JMARS data is too complicated

As an assignment for a graduate course called Interface Aesthetics, I designed WAV—a connected wearable device and mobile application. The main focus of this project is a high fidelity mobile UI mock-up, but I also created a brand guide and device mock-ups to establish brand identity.

The goal of the device is to detect a person’s stress. The mobile UI visualizes stress level and provides an intervention to help the person relax.

My goal for this project was to avoid using standard UI design practices and instead provide user’s with information in a more intuitive and abstract way. Rather than using typical UI text and buttons, I wanted to visualize stress in a way that could immediately resonate with a person—quicker than reading an output graph or number.

Mood Boarding

Visualizing Stress and Relaxation

First, I created two mood board to visualize what feelings of stress and relaxation look like. I also created color pallets for each emotion, prioritizing high contrast colors for accessibility .

Stress

Stress is a great ocean storm, overwhelmed by dark navys and blue.

Relaxation

Relaxation is a calm day on the beach shore with a calm cotton candy sunset.

Sketches

Clarifying interaction design direction

I sketched out a potential interface to visualize how a person might interact with the app if the highest level of stress or the highest level of relaxation are detected.

The main idea is that when high stress is detected users will see a storm brewing on their mobile app. Music will also start playing to relax the user. As the user begins to relax, the storm will calm down until a sunset is reached, representing the ultimate state of relaxation.

Iterations

Abstracting visualization of stress level and audio player

I designed several iterations of the screen in Adobe Illustrator. Iterations were driven by feedback from my professor and classmates.

In all of these, stress level is detected on a scale from 1 to 10, 10 being the highest level of stress. The audio player is represented by the suns location, which rises on the left at the beginning of a song and sets at the right as the song ends.

Iteration 1

Tornadoes/clouds represent the level of stress (7 represents a stress level of 7)

Iteration 2

Lightning represents stress level, which is clarified by a number at the bottom left

Iteration 3

Number of waves represent stress level, which is clarified by stress meter on the left

Final Design

High fidelity mock-ups and brand guide

In the final iteration, I adjusted the color palette to represent stress with ominous oranges and purples, and relaxation with bright, happy blues.

Stress Level 10

Stressed

Stress Level 7

Mostly Stressed

Stress Level 3

Mostly Relaxed

Stress Level 0

Relaxed

WAV

Problem