Nate Smith

Design System Work Samples

Dates

2019–2020

Role

Cross-platform design system team member

Contribution & Results

  • I was 1 of 3 designers that built and launched Hulu’s first design system website

  • I authored documentation for components including Content Tiles

  • I managed the intake process for new components and updates to existing components

  • I organized and ran design reviews with feature teams and platform teams

  • I planned and facilitated team-wide workshops on creativity and spatial interfaces

  • I was awarded a patent (17/383,211) for my design work related on spatial interfaces

Dates

2019–2020

Role

Cross-platform design system team member

Contribution & Results

  • I was 1 of 3 designers that built and launched Hulu’s first design system website

  • I authored documentation for components including Content Tiles

  • I managed the intake process for new components and updates to existing components

  • I organized and ran design reviews with feature teams and platform teams

  • I planned and facilitated team-wide workshops on creativity and spatial interfaces

  • I was awarded a patent (17/383,211) for my design work related on spatial interfaces

Dates

2019–2020

Role

Cross-platform design system team member

Contribution & Results

  • I was 1 of 3 designers that built and launched Hulu’s first design system website

  • I authored documentation for components including Content Tiles

  • I managed the intake process for new components and updates to existing components

  • I organized and ran design reviews with feature teams and platform teams

  • I planned and facilitated team-wide workshops on creativity and spatial interfaces

  • I was awarded a patent (17/383,211) for my design work related on spatial interfaces

Hulu Design System Website - Tiles documentation, which I designed and authored

Audit of custom action sheet structure, type styles

Audit of metadata blocks within video playback across platforms

Unified metadata block component - variants

Unified metadata block component - property dropdowns

Photos from various workshops I organized

Paper prototypes created in a workshop I organized

Patent application drawings based on my designs, created by legal team (17/383,211)

Hulu Design System Website - Tiles documentation, which I designed and authored

Audit of custom action sheet structure, type styles

Audit of metadata blocks within video playback across platforms

Unified metadata block component - variants

Unified metadata block component - property dropdowns

Photos from various workshops I organized

Paper prototypes created in a workshop I organized

Patent application drawings based on my designs, created by legal team (17/383,211)

Hulu Design System Website - Tiles documentation, which I designed and authored

Audit of custom action sheet structure, type styles

Audit of metadata blocks within video playback across platforms

Unified metadata block component - variants

Unified metadata block component - property dropdowns

Photos from various workshops I organized

Paper prototypes created in a workshop I organized

Patent application drawings based on my designs, created by legal team (17/383,211)

Dates

2020–2021

Role

Design Lead

Contribution & Results

  • I was the first full-time design lead for Hulu Ad Manager after its initial MVP launch

  • I was responsible for designing features and design system improvements that would support ad agencies, which required more complex UI structures and hierarchies

  • I designed and launched key updates to the design system:

    • An innovative color system based on CSS variables and calculations (read more here)

    • A responsive type scale

    • A multi-panel navigation model

    • New and updated components, including table rows, menus, combo boxes, and more

Multi-column navigation model, flexible layout for hierarchical navigation and supplemental panels

Responsive typography scale based on ratios from musical scales

Account management features—which I was responsible for designing from 0–1—using navigation model

Interrelationships I designed between components such as table row, menu, text field, combo box

Toolbar to perform actions on selected items in a table, animated with CSS

Dynamic color system based on CSS variables and calculations, read more here

Dates

2021–2023

Role

Founding Designer

Contribution & Results

  • I designed the Remento mobile app from 0–1, which our team built in React Native

  • I created and maintained a robust design system with a mix of custom and native components, which allowed us to iterate quickly

  • I designed novel components and behaviors, including a flexible toolbar, a dedicated feedback area, and a modeless Tip dialog

  • See an overview key interactions

Remento App UI Template component, showing many screens with various states and components

Remento design system components