Wearable Widgets for Galaxy Watch

Wearable Widgets for Galaxy Watch

Visual Systems

I created a consistent visual system for Galaxy Watch widgets, refining hierarchy, color, typography, charts, and circular progress patterns so information could be understood at a glance.

Duration

2020

Company

Samsung

Role

UI Designer

Scope of work

Widget UI, visual hierarchy, typography, color, World Clock

Visual Systems

I created a consistent visual system for Galaxy Watch widgets, refining hierarchy, color, typography, charts, and circular progress patterns so information could be understood at a glance.

Duration

2020

Company

Samsung

Role

UI Designer

Scope of work

Widget UI, visual hierarchy, typography, color, World Clock

Context

Context

Widget for Watches

Galaxy Watch widgets had grown inconsistent as more information was added to a small circular display. I refined progress indicators, color, typography, charts, and rounded UI elements to create a more coherent system that made important information easier to recognize at a glance. The work contributed to Samsung’s One UI principles for wearables: clear information, concise presentation, and a unified interface.

Galaxy Watch widgets arranged on a black background, showing several information and shortcut patterns.

Context

Context

Widget for Watches

Galaxy Watch widgets had grown inconsistent as more information was added to a small circular display. I refined progress indicators, color, typography, charts, and rounded UI elements to create a more coherent system that made important information easier to recognize at a glance. The work contributed to Samsung’s One UI principles for wearables: clear information, concise presentation, and a unified interface.

Widget System

Widget System

Designing for Quick Scanning

Widgets let people view information or take simple actions without opening an app. Because users move between widgets by swiping or turning the bezel, I kept each screen concise and within a single eyespan so information could be scanned without scrolling.

01 INFORMATIVE

Status at a glance

Activity

Weather

World clock

Sleep

Women’s health

02 INTERACTIVE

Control in place

Music

Hydration

Nutrition

Alarm

03 SHORTCUT

A direct next step

Contacts

World clock

Widget System

Widget System

Designing for Quick Scanning

Widgets let people view information or take simple actions without opening an app. Because users move between widgets by swiping or turning the bezel, I kept each screen concise and within a single eyespan so information could be scanned without scrolling.

Typography

Typography

Typography

A watch is read at a glance, so each widget gives one number full size and lets everything else step back. Live values use SNum at 86 pt, a numeral face with fixed-width figures, so the layout stays still while the value counts up. Text is set in Samsung One UI: 48 pt for the app name, 28 pt for the Add button and the line beneath it, and 16 pt for labels that curve along the progress ring.

Women’s health is the exception. Cycle days are predictions rather than measurements, and phrases like “Next period in 5 days” change length and word order across languages. There, the number stays inside a 40 pt sentence instead of standing alone as a live value.

Progress bar, typography hierarchy, and steps widget examples for a circular watch display.

Typography

Typography

Typography

A watch is read at a glance, so each widget gives one number full size and lets everything else step back. Live values use SNum at 86 pt, a numeral face with fixed-width figures, so the layout stays still while the value counts up. Text is set in Samsung One UI: 48 pt for the app name, 28 pt for the Add button and the line beneath it, and 16 pt for labels that curve along the progress ring.

Women’s health is the exception. Cycle days are predictions rather than measurements, and phrases like “Next period in 5 days” change length and word order across languages. There, the number stays inside a 40 pt sentence instead of standing alone as a live value.

Color

Color

Color System

I organized color by app so people could recognize related functions quickly. Clock experiences shared primary and secondary colors across Alarm, World Clock, Stopwatch, and Timer, while health widgets used a consistent health palette. Heart rate and stress used a distinct orange to separate medical monitoring from general health activity.

Color groups for time and health-related Galaxy Watch applications.

Color

Color

Color System

I organized color by app so people could recognize related functions quickly. Clock experiences shared primary and secondary colors across Alarm, World Clock, Stopwatch, and Timer, while health widgets used a consistent health palette. Heart rate and stress used a distinct orange to separate medical monitoring from general health activity.