001のコピー
グループ 481

ニーズの分析とアイディエーションによる
“本当に欲しい”サービスの考案

ニーズの分析とアイディエーションによる
“本当に欲しい”サービスの考案

Overview

UXDプロセスの練習として、「スライドでID・パスワードをコピーして、即ログインできる」架空のiOSアプリを考案しました。
自分の課題感と競合アプリを考慮して、お題を選定し、ソリューションを考案しました。

UXDプロセスの練習として、「スライドでID・パスワードをコピーして、即ログインできる」架空のiOSアプリを考案しました。
自分の課題感と競合アプリを考慮して、お題を選定し、ソリューションを考案しました。

Period - Duration

Period - Duration

2018.10 / 2週間

2018.10 - 2週間(UXデザイン・UIデザイン)
2019.11 - 6.5時間(UIデザイン改善)

My Role

UXデザイン
UIデザイン

UXデザイン
UIデザイン

Tools

Adobe XD
Adobe Illustrator

Adobe XD
Adobe Illustrator

Premise

前提

株式会社almaが提供する、UIデザインのオンライン学習サービス
Cocoda!」を利用した自主制作です。

お題が与えられ、それを分析して、ペルソナの課題を解決するアプリを制作します。
今回は、下記のお題に取り組みました。

株式会社almaが提供する、UIデザインのオンライン学習サービス
Cocoda!」を利用した自主制作です。

お題が与えられ、それを分析して、ペルソナの課題を解決するアプリを制作します。
今回は、下記のお題に取り組みました。

ああ

Step 1

課題の分析と
解決策の決定

課題発見のプロセス

課題発見のプロセス

お題を分析して、課題を抽出しました。

お題を分析して、課題を抽出しました。

🤔...「Googleのウェブだと勝手に記録してくれて、その後勝手に打ち込んでくれるから楽なのに。」
🤔...「コピペしてすぐログイン出来るようになったらすごい助かるんだけど。」
🤔...「そういうアプリって緊急で確認したり使いたいときに開くアプリだからなおさらイライラするんだよね。」

🤔...「Googleのウェブだと勝手に記録してくれて、その後勝手に打ち込んでくれるから楽なのに。」
🤔...「コピペしてすぐログイン出来るようになったらすごい助かるんだけど。」
🤔...「そういうアプリって緊急で確認したり使いたいときに開くアプリだからなおさらイライラするんだよね。」

課題感の仮説

課題の仮説

ログインするまでに時間がかかることをストレスに感じている

ログインするまでに時間がかかることをストレスに感じている

ラクチンで使いやすいアカウント管理アプリを求めている?

ラクチンで使いやすいアカウント管理アプリを求めている?

アプリの機能

アプリの機能

目当てのアカウント情報がすぐ見つかる
ID/パスワードを即コピーできる

目当てのアカウント情報がすぐ見つかる
ID/パスワードを即コピーできる

この方向性に絞り、MVPとしての機能を確定しました。

この方向性に絞り、MVPとしての機能を確定しました。

Step 2

課題感と解決策の
整合性の確認

上記の仮説について、フレームワークを用いて価値の整合性を確認しました。

上記の仮説について、フレームワークを用いて価値の整合性を確認しました。

1, ステートメントシートを用いた要件の整理

1, ステートメントシートを用いた要件の整理

Group 10

2, 価値仮説フレームワークを用いた「サービスとしての価値」の確認

2, 価値仮説フレームワークを用いた「サービスとしての価値」の確認

Group 2

3, ユーザーストーリーを用いたユースケースの具体化・可視化

3, ユーザーストーリーを用いたユースケースの具体化・可視化

e2814437c0656bb8 1

Step 3

コア機能を実現するUIの考案

スライド操作で
ユーザー名・パスワードをコピー

スライド操作で
ユーザー名・パスワードをコピー

ワイヤーの時点で挙がった2パターンを実際にiPhone上で確認してみた結果、①に関しては

ワイヤーの時点で挙がった2パターンを実際にiPhone上で確認してみた結果、①に関しては

  • ボタンが小さく、押しにくいと感じた
  • この配置だと、ボタンを2つ置くのは難しい
  • ボタンが小さく、押しにくいと感じた
  • この配置だと、ボタンを2つ置くのは難しい

と感じたため、②に方向性を固めました。

と感じたため、②に方向性を固めました。

picture_pc_b30ae6c0187b63cb2d289754721954cf-1

アプリを開くとすぐアカウントを探せる仕組み

アプリを開くとすぐアカウントを探せる仕組み

実際にiPhone上でモックを確認しながら作成し、最適な形を模索した結果、

実際にiPhone上でモックを確認しながら作成し、最適な形を模索した結果、

  • アカウント情報の左端に画像を表示させる
  • 登録しているユーザー名ではなく、サービス名を最も目立たせる
  • アカウント情報の左端に画像を表示させる
  • 登録しているユーザー名ではなく、サービス名を最も目立たせる

というような形になりました。

というような形になりました。

また、タブバーに『お気に入り』項目を設置しました。
『タグ付け』『フォルダ分け』など採用している競合アプリを使用したところ、どちらも初見では操作が難しいと感じたため、タブバーを採用するのが最適だと判断しました。

また、タブバーに『お気に入り』項目を設置しました。
『タグ付け』『フォルダ分け』など採用している競合アプリを使用したところ、どちらも初見では操作が難しいと感じたため、タブバーを採用するのが最適だと判断しました。

picture_pc_0d953cedf4b2a376a74cfc0097ad020b

Step 4

UI Design

「目当てのアカウント情報がすぐ見つかる」「ID/パスワードを即コピーできる」というコア体験に沿った、ビジュアル・モーションデザインを行いました。

「目当てのアカウント情報がすぐ見つかる」「ID/パスワードを即コピーできる」というコア体験に沿った、ビジュアル・モーションデザインを行いました。

Mask Group
Group 8

Motion

動き

Adobe XDでモックアップを制作し、コア体験を忠実に再現することで、実際の使用感を確かめました。

従来はコピーの確認をモーダルポップアップで表示していましたが、スナックバーに変更することで、スライド動作の妨げになるのを排除しています。

スライドした際には、ひと目で何をコピーしているのか判別させるため、アイコンを追加しました。
それに伴い、配色も変更しています。

Adobe XDでモックアップを制作し、コア体験を忠実に再現することで、実際の使用感を確かめました。

従来はコピーの確認をモーダルポップアップで表示していましたが、スナックバーに変更することで、スライド動作の妨げになるのを排除しています。

スライドした際には、ひと目で何をコピーしているのか判別させるため、アイコンを追加しました。
それに伴い、配色も変更しています。

mock_fastpass2019

Tone & Manner

世界観

モチーフは「新幹線」です。
スプラッシュ画面のインタラクションは、スライドで素早くコピーできることと、新幹線の速さを掛けています。

また、新幹線に使われている濃青「青20号」をベースとして、明度の低いブルーを組み合わせて画面を引き締めることで、アカウント管理アプリとしての信頼感を演出しています。

モチーフは「新幹線」です。
スプラッシュ画面のインタラクションは、スライドで素早くコピーできることと、新幹線の速さを掛けています。

また、新幹線に使われている濃青「青20号」をベースとして、明度の低いブルーを組み合わせて画面を引き締めることで、アカウント管理アプリとしての信頼感を演出しています。

Primary

Primary

グループ 645

Tab Bar

Tab Bar

グループ 646

Slides

Slides

グループ 647

Characters

Characters

グループ 648

Lines

Lines

グループ 649

Other Works

digmeeReleased • Product Design

oboebaUX / UI Design

Other UILanding Page • App • Game

BrandingConcept • Logo

GraphicsDTP • Namecard

IllustrationOther Projects

©︎2020 Yudai Suzuki
Production Period / 2019.11.10 - 2019.12.15