Meg Posey
  • Home
  • Work
    • GENOA
    • WPI Real Estate
    • Tails-a-waggin’ Dog & Cat Inn
    • El Chupacabra
    • KEXP App
  • Dogs & Cats
  • About / Contact
  • 日本語
    • GENOA
    • WPI Real Estate
    • Tails-a-waggin’ Dog & Cat Inn
    • El Chupacabra
    • KEXP App
    • 婦人画報
    • Otto Premiere
    • N.U.H. Collection
Case Study

KEXP アプリ

UX/UI デザイン
Picture
KEXPアプリについて
KEXP は非営利の芸術団体で、対面、放送、オンライン番組を通じて音楽愛好家にサービスを提供している。 KEXPは、世界で最も影響力のあるリスナー支援ラジオ局のひとつ。90.3 KEXP-FMシアトルを運営し、オンラインとオンエアで毎週20万人以上の世界中のリスナーに音楽を届けている。

プロジェクトの概要

+ ゴール:  既存のアプリの改善点に関するフィードバックを集めるために、ユーザーベースのサブセットと協力する。

​​+ プラン:  既存のKEXPアプリのユーザーリサーチ(インタビュー/調査)を行い、既存のペインポイント(もしあれば)を特定し、新しい機能を特定する。

+ デザイン:  ルック&フィールの決定、コンテンツインベントリーの選述、アプリと機能のビジュアルとデザインシステムの定義によって、新しいアプリをデザインします。

プロジェクトの目標

+ KEXPのiOSモバイルアプリの追加機能を定義し、開発する。​

業務担当

UX / UI デザイン

課題 / 改善点

+ ユーザーからのフィードバックをもとに、KEXPアプリを使いやすく変更する。

+ 追加機能を含め、KEXPアプリのまとまったデザインを作る。​

ユーザーインタビュー

ユーザーリサーチにおける16の基本的な質問の中で、ユーザーのペインポイントを見つけるための3つの質問とその答えは以下の通り:
Q1. モバイル・アプリケーションで最も気に入らない点は何ですか?
Picture
User#1: 聴いている曲が気に入らないときに、他の曲や番組を選べるかどうかわかるまで時間がかかった。
User#2: ナビゲーションバーがない。戻るには少し手間がかかる。常に上か下を表示してくれれば、とても助かる。

Q2. モバイル・アプリケーションに欠けていて、必要だと思われる機能はありますか?
Picture

User#3: 好きな番組のメニューとか?
User#4: このアプリを頻繁に使うなら、お気に入りの音楽を簡単に探せる音楽アーカイブ機能が理想。
Q3. モバイル・アプリケーションを使う目的は何ですか?
Picture

User#5: 後で購入するかもしれない良い音楽を見つける。
User#6: 好きなチャンネルを見つける。
User#7: 仕事中のBGMとして使い、好きな曲やアーティストを見つける可能性がある。

ペルソナ

インタビュー結果をもとに、ユーザーのペインポイントを反映したペルソナを作成した。
Picture

ユーザーの言葉を引用すると次のようになる、

Picture
音楽愛好家として、 好きな曲を選んで、自分好みに+αしたい。​
ペルソナのシナリオに基づいて、KEXPアプリケーションの追加機能としてプリファレンスを設定するオプションを提供した。

ユーザーフローとワイヤーフレーム

アプリケーションをどのようにナビゲートするかの中心となるユーザーフローを構築。これは、機能が常にユーザーに見えるようにするものです。そこで、グローバルナビゲーションを一番下に表示することにした。

ユーザーフロー

Picture
メイン環境設定では、DJの選択、アーカイブからの曲の保存、曲のタグ付け、曲の並べ替えができます。

ワイヤーフレーム

Picture
ワイヤーフレームは、ユーザーフローの各ステップを示している。

コアループ

ユーザーがKEXPアプリをより頻繁に利用する好循環として、以下のサイクルを想定する:
Picture
1. 音楽を聴く
2. 好きなDJの番組をタップして聴いたり(タグを付けて)曲を保存できる。
3. アプリはあなたの好みを維持。
4. もう一度タップ/ (タグ)し、曲をプレイリストに保存。
​

お気に入りの音楽を聴きたいときは... ステップ1に戻る。
この好循環によって、ユーザーはKEXPアプリで長く聴き続けることができるだろう。

デザイン

ムードボード

Picture

スタイルガイドとコンポーネント

Picture
太めのOswaldフォントと淡いNunito SansフォントのコントラストがKEXPのロゴにマッチした組み合わせ。
KEXPのロゴカラーをベースにしたティントカラーで配色を統一している。
Picture

プロトタイプ​

グローバルナビゲーションの各アイコンにはメニュータイトルがある。
アイコンのみの視覚化では、ユーザーにとって意味が分かりにくい場合がある。
​UXの観点から、メニューのタイトルを表示することは、ユーザーにメニューの内容を理解させるために不可欠です。

オン・ボーディング

Picture

プリファレンス - DJの選択

Picture

ライブストリーム / プリファレンス - DJ

Picture

アーカイブ / 保存 / タグ

Picture

曲のタグ付け / ソート

Picture
それぞれのインタラクションは、タップすることで上下に展開し、矢印やアイコン(再生/一時停止)でアクティビティを示す。ユーザーが直感的に理解できるよう、できるだけ統一感のあるシンプルな動きを心がけた。

NEXT

view ​Illustration ​
Picture
Proudly powered by Weebly
  • Home
  • Work
    • GENOA
    • WPI Real Estate
    • Tails-a-waggin’ Dog & Cat Inn
    • El Chupacabra
    • KEXP App
  • Dogs & Cats
  • About / Contact
  • 日本語
    • GENOA
    • WPI Real Estate
    • Tails-a-waggin’ Dog & Cat Inn
    • El Chupacabra
    • KEXP App
    • 婦人画報
    • Otto Premiere
    • N.U.H. Collection