Adaptive Framework

One new feature I helped establish gives our layout designs the flexibility to change between a simplified view (for viewing at a distance) and a more detailed view (for interacting with at arms length). This allows us to greatly reduce the content on screen to be readable from across the room. When you step closer to the device, it transitions seamlessly to near field view, ideal for seeing smaller, detailed information.

We are utilizing this technique for the Idle Screen (far field) and Home Screen (near field). The Idle Screen displays a large clock, a customizable background, and a few large widgets. When you step close to the device, the screen transitions into the Home Screen, encompassing widgets, view groups, and the home status bar.

Motion Decisions

I built this transition using modular motion patterns. This ensures the design system is flexible and will work with any type of background element (customers can choose personal photos, art, and video backgrounds) and UI layout (there are multiple clock faces to choose from).

The transition moves all main content in a similar direction in order to cohesively connect the two screens together. When the Home Screen  animates in, it moves horizontally in order to clue customers in how they navigate the UI (horizontal scrolling).

Navigation

I was also in charge of building transition patterns for navigating the UI. This included:

  • Idle Screen > Home Screen
  • Swiping Widget Groups
  • Switching Views
  • Page Transition patterns
  • Partial Panel patterns
  • Latency patterns

Micro-animations

These bite size moments allow us to inject a lot of personality and delight into the UI, all while providing a clear sense of visual feedback. We built these as Scaleable Vector Graphic animations (Amazon’s Lottie-equivalent) in order to have full control over the motion. Once complete, I tested SVGs on device to ensure everything plays as intended.