見出し画像

Spotifyちょこっとリデザイン: Double Play と More Like This Episode 機能

イオリ

どうも、MusicもPodcastsもSpotifyで聴きまくっている者です。隙あらば聴いています。

Spotifyを日常的に使っていると、こんな機能欲しい〜というようなアイデアがぽこぽこっと浮かぶことがあります。今回はそれらアイデアの内、2つをデザインとして形にしてみました。

具体的には、「Double Play」と「More Like This Episode」という新しい機能をデザインしました。これらの機能は、ユーザーにもっと自由なコントロールと、パーソナライズされたコンテンツを提供することを目指しています。

前提として、以下の条件下でリデザインしました。

  • iPhone版

  • アプリの言語は英語

  • SpotifyはPremiumプラン




Double Play: 音楽とポッドキャストの同時再生


「Stargazing」を再生中のポッドキャストにドラッグ


「Double Play」機能では、音楽とポッドキャストを同時に再生できるようにしました。このアイデアは、私自身が音楽とポッドキャストを同時に楽しみたいと思ったことから生まれました。これにより、ユーザーはよりパーソナライズされたリスニング体験を楽しめます。

「Double Play」機能は、リストから追加したいオーディオを選んで、再生中のオーディオが表示されている下のバーにドラッグすることで有効になります。すると、「Wanna mix?」と聞かれるBottom sheetが表示されます。これを有効にすると、両方のオーディオが同時に再生され、右下にスピーカーアイコンが表示されて、ボリューム調整が可能になります。

こちらプロトタイプ作ってみましたのでどんなものか見ていただけると幸いです！

YouTube: Spotify Redesign: Double Play and More Like This Episode Features



背景:

1. のソース元: Spotifyのプロダクト戦略をUIの変化から読み解く


  1. 波紋が広がっているようなCircle： オーディオカバーの背後にあるグラデーションサークルは、2018年のSpotifyアーティスト背景デザインからインスピレーションを得ています。（すいませんめっちゃ小さいのですが、左上の画像の2018の右側の画像の上部を指しています。）これにより、2つのオーディオソースがリズミカルに結びつけられるデザインになっています。

  2. SoundAssistantのUIを参照： 2つのオーディオソースを同時に再生するコンセプトは、AndroidアプリのSoundAssistantからアイデアを得ています。このアプリでは、縦型のボリュームバーを使って各オーディオソースを調整するUIが特徴です。

  3. 既存のSpeed調整の機能を縦にしたようなVolume調整： ボリューム調整のUIは、Spotifyの既存の速度調整機能を参考にしています。ユーザーが縦型スライダーで直感的にボリュームを調整できるようにし、パーセンテージ表示もされています。

  4. フローティングボタンから同時にVolume調整： 右下のスピーカーアイコンは、既存のSpotifyデザインからインスピレーションを得たもので、両方のオーディオストリームのボリュームを同時に調整することができます。



More Like This Episode: パーソナライズされたポッドキャストのおすすめ

こちらは本当にマイナーチェンジです…。

似たようなポッドキャストエピソードを素早く見るための「More like this episode」ボタン


「More like this episode」ボタンをクリックして、類似したポッドキャストエピソードをすぐに確認
「More Like This Episode」機能は、今聴いているポッドキャストに似た新しいポッドキャストを探したいユーザー向けに設計されました。この機能では、オプションメニューに「More like this episode」という新しいクリック可能な要素を追加しています。

選択すると、関連コンテンツにフォーカスした再設計された画面に移動します。現在のポッドキャストエピソードのタイトルが上部に表示され、「strategy」、「brain」、「decision-making」などの関連タグが表示されます。その下には、ユーザーの興味に基づいた類似のポッドキャストエピソードがリスト表示されます。



おわりに

「Double Play」と「More Like This Episode」機能をデザインする際にAndroidアプリのSoundAssistantを初めて知りました。

そこでちょこちょこYouTubeで画面を紹介されている方々がいらっしゃって見てみました。iPhoneしか使ったことない私にとって自由度が高すぎてアプリの概念が広がりました。

iPhoneの柔軟性は今後Apple Intelligenceが搭載されればAndroidに近づくように自由な操作ができるようになるのでしょうかね…？

とりあえずSiri、もっと賢くなってくれ。



以下はSpotifyについて調べてみた時に拝読したリソースです。

1. I Redesigned the ENTIRE Spotify UI from Scratch


2. Spotifyのプロダクト戦略をUIの変化から読み解く


3. Reimagining Design Systems at Spotify


お読みいただきありがとうございました〜！🙇‍♀️

この記事が気に入ったらサポートをしてみませんか？