L.JULIAN

About

Portfolio

Contact

English

L.JULIAN

About

Portfolio

Contact

English

L.JULIAN

U-NEXT
Atomic 2.0 Design System

U-NEXT
Atomic 2.0 Design System

U-NEXT is the number one Japanese streaming service.

U-NEXT is the number one Japanese streaming service.

Timeline:

JUN 2022 ~ Jul 2022

Team:

U-Next CX

Platform:

Web, iOS, Android

My Role

Senior Product Designer

Core Team

  1. UXUI Designers 2

  2. Lead Engineers 3

Methods

  1. Component Pattern Analysis

  2. Component Pattern Cleanup

  3. Atomic 2.0 Breakdown

  4. Component Migration

  5. Component Documentation

  6. Test Stress

Project Overview

The Challenge

Sort, Migrate, and Brush Duplicated Components.

Support Call Center Manager's Coaching,
Onboarding and training with AI systems.

U-NEXT’s ecosystem spans Web, iOS, Android, and TV apps. Each platform had inconsistent components:

  • Mismatched paddings

  • Duplicate patterns

  • Color and typography inconsistencies

  • Friction in design–engineering handoff.


The lack of a unified system slowed delivery due to design–engineering back-and-forward, rework across teams, friction between designers and engineers.

Our client struggled with management obstacles; particularly in coaching and performance reviews.

prev-system
prev-system
prev-system

My Mission

Raise the Product Design Standards to Enable Consistency.

Initiated and led the migration to Atomic 2.0 design system.

  • Built critical components directly (cross-platform buttons, navigation, input fields).

  • Facilitated design–engineering alignment by documenting component specs and expected behaviors.

  • Conducted cross-platform consistency reviews to ensure parity.

  • Defined rules for responsive/adaptive layouts spanning Web → TV environments.

As a Senior Product Designer, I was the owner of the Design and Experience Principals in a User Need level. Rather than focusing on high-end visual design, I approached the challenge with experimenting with prototypes.

old-call-system
old-call-system
old-call-system

DesignOps

Operative Design.

I applied a structured DesignOps framework with three key layers:

  1. Audit & Inventory

    • Collected and catalogued all components across Figma files for Web, iOS, Android, and TV.

    • Identified duplicates, inconsistencies, and usage patterns.

  2. System Definition in Atomic 2.0

    • Migrated core style assets: colors, typography, grids, spacing.

    • Built atoms, molecules, organisms in a consistent, reusable hierarchy.

    • Created usage documentation to enforce standards.

  3. Ops & Governance

    • Set up Figma libraries, version control, and branching workflows.

    • Established contribution guidelines.

    • Built feedback and validation loops with designers and engineers.

Delegation

Delegation to UXUI Designers

To scale the work efficiently, I delegated structured tasks while maintaining oversight:

  • Component Collection & Audit

    • Assigned designers to extract all existing components from legacy Figma files.

    • I provided templates/checklists for documenting variations.

  • Redlining & Annotation

    • Juniors annotated screens with mismatched or duplicated elements.

    • I reviewed and prioritized fixes.

  • First-pass Cleanup

    • UXUI Designers normalized simple components.

    • I reserved complex multi-state, cross-platform components for Atomic 2.0 handling.

old-call-system
old-call-system

Take aways and Learnings

  • Not every designer embraces systems at first. Early on, I faced resistance from peers who felt design systems limited creativity.

  • Knowledge sharing builds trust and credibility. By creating showcases and walking through the chaos of duplicated components, I was able to shift perspectives, and clear case studies and applications are key.

  • Timing matters. Looking back, I wish I had been braver in proposing the migration earlier. My contributions came later in the product’s evolution, and in the stage I was looking for other opportunities of growth.

Tools and Services

Figma Logo

Figma

Notion Logo

Confluence

Take aways and Learnings

  • Not every designer embraces systems at first. Early on, I faced resistance from peers who felt design systems limited creativity.

  • Knowledge sharing builds trust and credibility. By creating showcases and walking through the chaos of duplicated components, I was able to shift perspectives, and clear case studies and applications are key.

  • Timing matters. Looking back, I wish I had been braver in proposing the migration earlier. My contributions came later in the product’s evolution, and in the stage I was looking for other opportunities of growth.

Tools and Services

Figma Logo

Figma

Notion Logo

Confluence

Take aways and Learnings

  • Not every designer embraces systems at first. Early on, I faced resistance from peers who felt design systems limited creativity.

  • Knowledge sharing builds trust and credibility. By creating showcases and walking through the chaos of duplicated components, I was able to shift perspectives, and clear case studies and applications are key.

  • Timing matters. Looking back, I wish I had been braver in proposing the migration earlier. My contributions came later in the product’s evolution, and in the stage I was looking for other opportunities of growth.

Tools and Services

Figma Logo

Figma

Notion Logo

Confluence

Tools and Services

Figma Logo
Figma Logo

Figma

Notion Logo
Notion Logo

Confluence

Calliope Call Center

PRODUCT DESIGN - AI STRATEGY

Calliope Call Center

PRODUCT DESIGN - AI STRATEGY

Calliope Call Center

PRODUCT DESIGN - AI STRATEGY

Calliope Call Center

PRODUCT DESIGN - AI STRATEGY

Memo'd Signup

PRODUCT DESIGN - RESEARCH

Memo'd Signup

PRODUCT DESIGN - RESEARCH

Memo'd Signup

PRODUCT DESIGN - RESEARCH

Memo'd Signup

PRODUCT DESIGN - RESEARCH