Companion smartwatch

Wearable technology provides easier ways to track frequent changes in physical and biochemical levels. With 20% of American adults using wearable technology atleast once a month, I wanted to incorporate Companion’s mood tracking as a smartwatch app concept. I used the rapid prototyping method, and extensively show my iterative process in designig interfaces.

YEAR

2020

TYPE

Individual,
Rapid Prototyping

ROLE

UX, UI

CHALLENGE

Users need a convenient way to log frequent mood changes throughout the day and identify their main moods.

PROJECT GOALS

  1. A simple and enjoyable experience
  2. Easy to use while on the go
  3. Show brief summary of top moods

APPROACH

The design idea was developed using the Rapid Prototyping method

RAPID PROTOTYPING?

  • 8 minutes to sketch out the solution
  • 4 minutes to get feedback
  • 6 minutes to re-sketch
  • 2 minutes for another round of feedback

ITERATION 1

First iteration of the design using rapid prototyping

USER FEEDBACK round 1

After the first iteration, the users had the following feedback on my design:

Based on the feedback, I went back to the sketch board.

ITERATION 2

Second iteration with rapid prototyping

USER FEEDBACK round 2

I decided on the scope of the design based on the two iterations.

SCOPE

  1. At-a-glance infographic

  2. Focus on visual hierarchy

  3. I wanted to use graphics and visual hierarchy to help the users to quickly navigate through the app.

    USER FLOW

    The user flow for the smartchwatch app

    WIREFRAMING

    The third and final wireframe sketch

    Hi-Fi version 1

    The first completed Hi-Fi

    ITERATE, ITERATE, ITERATE

    After I made my first set of Hi-Fis and interactions, I still was not satisfied with certain parts of the app: The infographic in the home, the cohesiveness of the mood intensity scale, and the lack of structure in the confirmation page.

    I worked to further improve these points. I also decided to change the background to a slight off-white #F6F6F6 in order to reduce the strain on the eyes that may be associated with using the watch in different lighting conditions (even with the auto brightness adjustment).

    The iterative evolution of the Home frame, from left to right. Exploring ways to clearly and efficiently organize the summary
    Adding another layer of connotation through colors to represent moods rather than one specific emoji. Then adding a sense of depth from left to right
    Making the Intensity frame more cohesive and friendly, from left to right
    Giving the Confirmation page a better sense of heirarchy, from left to right

    Hi-Fi version 2

    The final Hi-Fi after the changes

    WORKING PROTOTYPE

    The prototype based on the final Hi-Fi, from Figma (please note the watch frame doesn't show on mobile)

    LEARNINGS IN SMARTWATCH DESIGN

    This was my first time designing for a wearable. Smartwatches had a greater size restriction than other digital devices. Thus small adjustments in the text and visuals had a more profound impact on the hierarchy. I had to be more creative to put emphasis on the essential parts that the user needed to interact with before moving to the next page.

    Even through so many iterations, there is still so much to be improved and learned. What do you think can be improved? Please feel free to leave me a comment through my contact form or social media.