Lilianka JUlian | シニアプロダクトデザイナー・ストラテジスト

L.JULIAN

About

Portfolio

Contact

Select Language

Japanese

L.JULIAN

About

Portfolio

Contact

Select Language

Japanese

L.JULIAN

U-NEXTのオートサジェストUX

U-NEXTは、日本を代表するストリーミングサービスであり、シリーズ、ドラマ、映画、書籍など、3万点以上のコンテンツを誇る豊富なカタログを備えています。

タイムライン:

2022年3月〜2022年7月

チーム：

U-Next CX（ユーザーエクスペリエンス）

プラットフォーム:

ウェブ、iOS、Android

My Role

シニアプロダクトデザイナー

コアチーム

UXUIデザイナー 2名
リードエンジニア 3名

デザイン手法

コンポーネントパターン分析
コンポーネントパターンの整理
Atomic 2.0の分解
コンポーネントの移行
コンポーネントのドキュメンテーション
ストレステスト

プロジェクト概要

The Challenge

AIシステムを活用したサポートコールセンターマネージャーのコーチング、オンボーディング、およびトレーニングを支援します。

サポートコールセンターマネージャーのコーチング、
AIシステムを活用したオンボーディングとトレーニングを支援します。

U-NEXTのエコシステムは、Web、iOS、Android、TVアプリにわたっています。各プラットフォームには一貫性のないコンポーネントが存在しました：

パディングが一致しない
重複したパターン
カラーとタイポグラフィの不一致
デザインとエンジニアリングの移行時の摩擦

統一されたシステムの欠如により、デザインとエンジニアリングの間でやり取りが発生し、各チーム間での再作業や、デザイナーとエンジニア間の摩擦が生じ、納期が遅れました。

私たちのクライアントは、特にコーチングおよびパフォーマンスレビューにおける管理上の課題に苦しんでいました。

My Mission

プロダクトデザインのビジョンを実現するための実験的アプローチをサポートする

Atomic 2.0デザインシステムへの移行を開始し、主導しました。

重要なコンポーネントを直接構築しました（クロスプラットフォームボタン、ナビゲーション、入力フィールド）。
コンポーネントの仕様と期待される動作を文書化することで、デザインとエンジニアリングの整合性を促進しました。
クロスプラットフォームの一貫性レビューを実施し、均質性を確保しました。
Web → TV環境にわたるレスポンシブ/アダプティブレイアウトのルールを定義しました。

シニアプロダクトデザイナーとして、私はユーザーニードレベルでのデザインと体験の原則を担当しました。高級なビジュアルデザインに注力するのではなく、プロトタイプを使った実験を通じてこの課題に取り組みました。

Product Design

スタッフとビジネスニーズのギャップを埋める。

3つの重要なレイヤーを持つ構造化されたDesignOpsフレームワークを適用しました:

監査＆インベントリー
- Web、iOS、Android、TV用のFigmaファイルを横断してすべてのコンポーネントを収集し、カタログ化しました。
- 重複、矛盾、使用パターンを特定しました。
Atomic 2.0でのシステム定義
- コアスタイル資産を移行：色、タイポグラフィ、グリッド、スペース。
- 一貫性のある再利用可能な階層で原子、分子、有機体を構築しました。
- 標準を強制するための使用ドキュメントを作成しました。
Ops & ガバナンス
- Figmaのライブラリ、バージョン管理、ブランチ作業フローを設定しました。
- 寄稿ガイドラインを確立しました。
- デザイナーとエンジニアとのフィードバックと検証ループを構築しました。

3つの主要なレイヤーを持つDesignOpsフレームワークを適用しました。

監査とインベントリー
- Web、iOS、Android、TV向けのFigmaファイル全体のコンポーネントを収集し、カタログ化しました。
- 重複、不整合、使用パターンを特定しました。
Atomic 2.0におけるシステム定義
- コアスタイルアセット（色、タイポグラフィ、グリッド、間隔）を移行しました。
- 一貫性があり再利用可能な階層で原子、分子、有機体を構築しました。
- 標準を強化するための使用ドキュメントを作成しました。
Opsとガバナンス
- Figmaのライブラリ、バージョン管理、ブランチングワークフローを設定しました。
- 貢献ガイドラインを確立しました。
- デザイナーとエンジニアとのフィードバックと検証ループを構築しました。

Delegation

UXUIデザイナーへの委任

作業を効率的に拡大するために、監督を維持しつつ構造化されたタスクを委任しました：

コンポーネントの収集と監査
- デザイナーに古いFigmaファイルからすべての既存コンポーネントを抽出するように割り当てました。
- バリエーションを文書化するためのテンプレート/チェックリストを提供しました。
赤入れと注釈付け
- 初級者が不一致や重複している要素のある画面に注釈をつけました。
- 修正を確認し、優先順位をつけました。
初回の整理
- UXUIデザイナーが単純なコンポーネントを標準化しました。
- 複雑なマルチステートやクロスプラットフォームのコンポーネントはAtomic 2.0で扱うために温存しました。

ポイントと学び

最初からすべてのデザイナーがシステムを受け入れるわけではありません。初期段階では「デザインシステムは創造性を制限する」と感じる仲間から抵抗を受けました。
知識を共有することは、信頼と説得力につながります。ショーケースを作り、重複したコンポーネントの混乱を示しながら説明することで視点を変えることができました。明確なケーススタディや実例は欠かせないと学びました。
タイミングも重要です。振り返ると、もっと早い段階で移行を提案する勇気を持つべきだったと感じています。私の貢献はプロダクトの進化の後期に位置づけられ、その頃には自分自身のさらなる成長の機会を探していました。

ツールとサービス

フィグマ

プロトパイ

ポイントと学び

最初からすべてのデザイナーがシステムを受け入れるわけではありません。初期段階では「デザインシステムは創造性を制限する」と感じる仲間から抵抗を受けました。
知識を共有することは、信頼と説得力につながります。ショーケースを作り、重複したコンポーネントの混乱を示しながら説明することで視点を変えることができました。明確なケーススタディや実例は欠かせないと学びました。
タイミングも重要です。振り返ると、もっと早い段階で移行を提案する勇気を持つべきだったと感じています。私の貢献はプロダクトの進化の後期に位置づけられ、その頃には自分自身のさらなる成長の機会を探していました。

ツールとサービス

フィグマ

プロトパイ

ポイントと学び

最初からすべてのデザイナーがシステムを受け入れるわけではありません。初期段階では「デザインシステムは創造性を制限する」と感じる仲間から抵抗を受けました。
知識を共有することは、信頼と説得力につながります。ショーケースを作り、重複したコンポーネントの混乱を示しながら説明することで視点を変えることができました。明確なケーススタディや実例は欠かせないと学びました。
タイミングも重要です。振り返ると、もっと早い段階で移行を提案する勇気を持つべきだったと感じています。私の貢献はプロダクトの進化の後期に位置づけられ、その頃には自分自身のさらなる成長の機会を探していました。

ツールとサービス

フィグマ

プロトパイ

Tools and Services

Figma

Confluence

Calliope Call Center

プロダクトデザイン - AI UXデザイン

Calliope Call Center

プロダクトデザイン - AI UXデザイン

Calliope Call Center

プロダクトデザイン - AI UXデザイン

Calliope Call Center

プロダクトデザイン - AI UXデザイン

Memo'd Signup

プロダクトデザイン - マルチデバイス

Memo'd Signup

プロダクトデザイン - マルチデバイス

Memo'd Signup

プロダクトデザイン - マルチデバイス

Memo'd Signup

プロダクトデザイン - マルチデバイス

その他の事例研究

U-NEXT 検索

プロダクトデザイン - マルチデバイス

U-NEXT 検索

プロダクトデザイン - マルチデバイス

Memo'd Signup

プロダクトデザイン - マルチデバイス

Memo'd Signup

プロダクトデザイン - マルチデバイス