L.JULIAN

About

Portfolio

Contact

Japanese

L.JULIAN

About

Portfolio

Contact

Japanese

L.JULIAN

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

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

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

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

タイムライン:

2022年3月〜2022年7月

チーム：

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

プラットフォーム:

ウェブ、iOS、Android

My Role

プロダクトデザイナー

コアチーム

  1. プロダクトオーナー

  2. プリンシパルプロダクトオーナー

  3. ウェブエンジニア

  4. iOSエンジニア

  5. Androidエンジニア

デザイン手法

  1. デザイン戦略

  2. アイデア発想

  3. プロダクトデザイン

  4. プロトタイピング

プロジェクト概要

22

22

デザインページ数

デザインページ数

3

3

デザインの反復

デザインの反復

テックシステム

テックシステム

オートサジェスト

オートサジェスト

オートサジェスト

MLによるパーソナライズ

MLによるパーソナライズ

MLによるパーソナライズ

デザイン成果物

The Challenge

検索体験の刷新。

U-NEXTチームが検索機能の改善に乗り出したとき、その課題は一見簡単に思えました：コンテンツの検索をより速くすること。


しかし、その舞台裏では、ビジネスの期待、エンジニアリング上の制約、政治的な対立、そして異なる方向を指すユーザーの不満など、現実は複雑でした。

クライアントは管理の障害、特にコーチングやパフォーマンスレビューにおいて苦労していました。

My Mission

オートサジェスト体験を追加するための戦略を見つけましょう。

高額な再構築を推進するのではなく、機会を再考しました：既存の技術スタックとUIパターンを活用して、どのように高影響の改善を行うか？


  • デスクトップリサーチを実施し、オートサジェストとオートコンプリートを比較しました。

  • クロスプラットフォームの体験を探求しました（モバイル、ウェブ、レスポンシブ、初期のテレビコンセプト）。

  • 紙スケッチやFigmaプロトタイプを作成しました。

  • プラットフォーム間でのオートサジェスト体験を文書化し、デザインしました。

  • コアチームと拡張チームでアイデアワークショップを開催しました。

  • 初期のテレビオートサジェストの取り組みを委任し、監督しました。


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

高価なリビルドを推進するのではなく、私は機会を再構築しました。既存の技術スタックとUIパターンを活用して、インパクトの大きい改善を行ったらどうなるでしょうか？


  • オートサジェストとオートコンプリートを比較するデスクトップリサーチを実施しました。

  • モバイル、ウェブ、レスポンシブ、および初期のテレビコンセプトなどのクロスプラットフォームのエクスペリエンスを探求しました。

  • ペーパースケッチ、Figmaプロトタイプを作成しました。

  • プラットフォーム全体でオートサジェストのエクスペリエンスを文書化し、設計しました。

  • 主要チームと拡張チームを対象にアイデアワークショップを行いました。

  • 初期のテレビオートサジェストの取り組みを委任し、監督しました。


高額な再構築を押し進めるのではなく、私は機会の見直しを提案しました：既存の技術スタックとUIパターンを活用して、高いインパクトのある改善を図ったらどうか？


  • デスクトップリサーチを行い、オートサジェストとオートコンプリートを比較しました。

  • クロスプラットフォーム体験を探求しました（モバイル、ウェブ、レスポンシブ、初期のテレビコンセプト）。

  • 紙のスケッチやFigmaプロトタイプを作成しました。

  • プラットフォーム全体でのオートサジェスト体験を文書化しデザインしました。

  • 主要チームおよび拡張チームとアイデアワークショップを促進しました。

  • 初期のテレビオートサジェストイニシアチブを委任および監督しました。


プロダクトデザイン

オートサジェストの体験をデザインするパターン。

より広範なチームや役員との会議の後、Web、iOS、およびAndroid向けのオートサジェスト検索のデザインと開発を進めるためのゴーサインが出されました。


そのために私は以下をデザインしました:


  • 探索モックアップ。

  • Webの検索コンポーネントを再設計。

  • iOSおよびAndroid向けに新しいUXデザインを追加。

  • すべてのプラットフォーム用にFigmaでプロトタイプを作成。

  • エンジニア向けに設計の引き渡しを文書化し準備。

より広いチームと経営陣との会議の後、彼らはWeb、iOS、Android向けのオートサジェスト検索のデザインと開発を進めるためのゴーサインを出しました。


このために、私は以下のことをデザインしました：


  • モックアップの探索。

  • Webの検索コンポーネントの再設計。

  • iOSとAndroid向けの新しいUXデザインを追加。

  • Figmaで全プラットフォーム向けのプロトタイプを作成。

  • エンジニア向けにデザインを文書化して準備。

より広範なチームや経営陣との会議後、Web、iOS、Android向けのオートサジェスト検索のデザインと開発を進める許可を得ました。


これに対して私は以下を設計しました：


  • 探索用モックアップ。

  • Webの検索コンポーネントの再設計。

  • iOSとAndroid向けの新しいUXデザインを追加。

  • 全プラットフォームに向けたFigmaでのプロトタイプ作成。

  • エンジニア向けのデザイン移行のドキュメント作成と準備。

広範なチームおよび重役と会議を行った後、Web、iOS、およびAndroid向けのオートサジェスト検索のデザインと開発を継続するための承認を得ました。


このために以下のデザインを行いました：


  • モックアップの探索。

  • Webの検索コンポーネントを再設計。

  • iOSとAndroid向けに新しいUXデザインを追加。

  • すべてのプラットフォームに対してFigmaでプロトタイプを作成。

  • エンジニアへのデザイン引き渡しのためにドキュメント化と準備を行いました。

[1] モバイル探索

[2] ウェブ探索

これまでのデザイン経験

前回のデザインでは、ジャンルリストが小さなコンポーネントに表示されることで、ユーザー体験が損なわれていました。

検索バーのクリックとキーボード起動の交差点。

結果

  1. ビジネス関係者、POリーダー、および開発リーダーからの即時購入を得ました。

  2. 実装を促進した成功したA/Bテスト。

  3. 現在の技術とデザインシステムに焦点を当てる戦略のおかげで、プロジェクトの期間を想定していた5年からわずか4ヶ月に短縮しました。

  4. 提案された体験を実装するためにTV検索プロジェクトを開放しました。

ウェブデザイン

モバイルデザイン

ポイントと学び

  • ビジネスのステークホルダーや開発者への共感は、プロジェクトを向上させるための必要な戦略を生み出す多くの洞察を与えてくれました。

  • テレビや他のプロジェクトに関する複雑な問題により、すべてのデバイスでのローンチはできませんでしたが、それを通じてテレビのデザインプロセスを主導し、作業を委任する機会を得ました。

  • 時にはシンプルさが最良の選択であり、プロダクトチームは、現在の技術を活用することで素晴らしいものを創造できます。

  • ビジネスの利害関係者や開発者に対する共感は、多くの洞察をもたらし、プロジェクトを向上させるために必要な戦略を形成しました。

  • テレビやその他のプロジェクトに関する複雑さのため、すべてのデバイスでのローンチができませんでしたが、テレビのデザインプロセスをリードし、作業を委任する機会が得られました。

  • 時にはシンプルさが最善であり、プロダクトチームは、現在の技術を活用して素晴らしいものを生み出すことができます。

  • ビジネスの利害関係者や開発者に対する共感は、多くの洞察をもたらし、プロジェクトを向上させるために必要な戦略を形成しました。

  • テレビやその他のプロジェクトに関する複雑さのため、すべてのデバイスでのローンチができませんでしたが、テレビのデザインプロセスをリードし、作業を委任する機会が得られました。

  • 時にはシンプルさが最善であり、プロダクトチームは、現在の技術を活用して素晴らしいものを生み出すことができます。

ツールとサービス

Figma Logo
Figma Logo

フィグマ

Notion Logo
Notion Logo

ノーション

Figma Logo
Figma Logo

エラスティックサーチのドキュメント