UX Designer & Leader
Templates.png

Zattoo TV – Design System

To meet user expectations and ensure a consistent user experience, Zattoo product features are built from common sets of UI patterns.  

The structure is based on Brad Frost's Atomic Design methodology, which describes a systematic approach to developing and implementing UI components in a consistent, re-usable manner following a logical hierarchy.

Roles & responsibilities: I initiated and led the effort to evolve our cross-platform UI into a documented design system, from initial UI pattern analysis, to component naming, system structure, wire framing, and subsequent documentation. I collaborated with our lead Visual designer to create final component designs and corresponding pattern library documentation.

 Exploring component structures via sketching.

Exploring component structures via sketching.

 Refining sketches into wireframes.

Refining sketches into wireframes.

 Design system component grouping.

Design system component grouping.

 Defining cross platform grid measures.

Defining cross platform grid measures.

 Iconography elements

Iconography elements

 Button elements.

Button elements.

 Functional component grouping.

Functional component grouping.

 Responsive component behaviour.

Responsive component behaviour.

 Design System grouping and layouts.

Design System grouping and layouts.