SmartWatch OS Home Screen
WEARABLE UX · INTERACTION DESIGN · UI SYSTEMS

SmartWatch OS — Wearable UX Redesign

Wearable UXCircular UIInteraction DesignCompanion App
My Role
Wearable UX/UI Designer · Interaction Designer
Tools
Figma · FigJam · Prototyping
Year
2024
Platform
Smartwatch · Companion Mobile App
"Designing for a smartwatch forced me to rethink interface design at its smallest scale: less space, fewer actions, faster decisions."

Overview

SmartWatch OS is a wearable UX redesign focused on compact interface design, circular screen constraints, glanceable information, and companion app continuity.

The project explores how core smartwatch experiences — watch face, fitness tracking, music, notifications, ambient display, and companion mobile controls — can work together as one connected ecosystem.

SmartWatch OS Hero Preview

The Problem

Problem

Smartwatch interfaces operate under extreme constraints: small circular screens, limited input methods, short attention spans, and glance-based usage. A successful wearable interface must communicate quickly, reduce unnecessary interaction, and make every screen useful within seconds.

Design Goal

Redesign a smartwatch experience that makes key information easier to scan, reduces interaction effort, supports quick task completion, and extends important watch features into a companion mobile app.

Study Device
Define Constraints
Map Screens
Design System
Prototype

Wearable UX Constraints

01
Small screen — The interface needed to prioritize only the most important information and remove anything that required long reading.
02
Circular layout — Content had to fit naturally inside a round screen without feeling cropped, crowded, or misaligned.
03
Glance-based behavior — Most smartwatch interactions happen quickly, so each screen needed to communicate its purpose immediately.
04
Limited input — Without a keyboard or large touch area, the design had to rely on simple taps, swipes, and clear navigation states.
05
Ambient display — The always-on state needed a simplified visual system that preserved battery, reduced clutter, and kept time visible.

Research Approach

I used the physical smartwatch as the research object. I studied how information appears on the wrist, how quickly screens need to be understood, how swipe-based movement feels, and where compact UI patterns become difficult to read.

Instead of designing from desktop assumptions, I treated the watch as a separate interaction environment with its own constraints, habits, and expectations.

Core Experience Map

The redesign focused on the screens users are most likely to check quickly: watch face, ambient mode, fitness progress, music controls, notifications, settings, and companion app controls.

Core Screen Map

Decision 01 — Glanceable Watch Face

The watch face was designed to make key information visible at a glance. Time remains the primary element, while secondary details such as activity progress, battery, and quick status indicators stay visually controlled.

Watch Face Design

Decision 02 — Ambient Display Simplification

Ambient mode reduces the interface to only essential information. The design removes heavy visual elements and keeps the screen readable without overwhelming the always-on state.

Ambient Display
Fitness Tracking Screen

Decision 03 — Fitness Progress Rings

For fitness tracking, I used a ring-based progress system because circular progress fits naturally inside the watch form factor. This made activity status easier to scan without relying on dense numbers.

Ring-based activity screen designed for quick progress scanning on a circular interface.

Music Control Screen

Decision 04 — Music Controls for Quick Actions

The music screen prioritizes large touch targets, visible playback status, and simple controls. The goal was to make common actions usable without forcing users to focus on the screen for too long.

Compact music interface optimized for quick playback control and readable touch targets.

Decision 05 — Companion App Continuity

After designing the watch interface, I extended the system into a companion mobile app. The mobile app gives users more space for settings, progress review, personalization, and feature management while keeping the watch experience lightweight.

Companion Mobile App

Key Design Decisions

01
Time-first hierarchy — The watch face keeps time as the dominant element because it is the most frequently checked information.
02
Circular progress patterns — Fitness data uses ring-based visuals to match the shape of the device and improve quick scanning.
03
Reduced ambient state — The always-on display removes nonessential visual noise while preserving readability.
04
Large touch targets — Interactive controls are kept simple and easy to tap within the limited screen area.
05
Companion app extension — Complex settings and deeper information move to mobile so the watch remains fast and lightweight.
06
System consistency — Watch and mobile screens share visual language, spacing logic, and interaction patterns.

Interaction Design

The interaction system focuses on fast movement between compact screens. Swipe navigation supports quick transitions, while tap targets are designed around the limited precision of a small wearable display.

Animations were kept simple and functional. Motion supports state changes, screen transitions, and feedback without slowing down the glance-based nature of smartwatch use.

Design System

The design system uses compact typography, high-contrast UI elements, circular alignment, simplified icons, and reusable components for watch faces, progress indicators, control cards, and mobile companion screens.

SmartWatch Design System

What I Learned

This project helped me understand that wearable design is not just smaller mobile design. It requires a different mindset: reduce choices, prioritize glanceability, respect physical constraints, and design for moments that last only a few seconds.

The biggest learning was that every pixel on a smartwatch has to earn its place. When space is limited, hierarchy, spacing, and interaction feedback become even more important.

What I Would Improve

The next step would be testing the prototype on an actual watch frame with users, refining tap target sizes, validating readability under different lighting conditions, and improving accessibility for color contrast, motion sensitivity, and text scaling.

Prototype

Outcome

SmartWatch OS demonstrates my ability to design for constrained interfaces, create glanceable wearable UI systems, structure compact navigation, prototype interaction flows, and extend a wearable product into a companion mobile experience.

Next Project · 01
We Play