Besty

― Birthday Management App Design

Overview

株式会社サイバーエージェントが主催するUI Design Academyの事前課題(新しい要素を追加した3人以上のコミュニケーションツール)として、友達や家族の誕生日を管理し、サプライズなどのコミュニケーションをスムーズに行えるツールを制作しました。現代人は非常に忙しく、僕自身も親しい人の誕生日を忘れてしまう事がたまにあります。また相手の誕生日にどんなプレゼントをあげるのがいいのかを迷うこともよくあります。そういった僕自身の問題から着想を得たアプリです。

Date : ~2019/1(3 weeks) Team : Users 14+ / Designer
Type : Personal Project Role : UIUX design / Research / Case study

Challenge

僕自身の体験として、友達の誕生日を忘れてしまって罪悪感を感じていたことと、サプライズ企画におけるコミュニケーションをもっと円滑にしたいと思っており、この問題をデザインで解決したいと考えたのが今回のプロジェクトを始めるきっかけでした。

またリサーチを勧めていく過程で、人は誕生日というものを「特別なもの」や「幸せなもの」と感じている傾向が強いという統計が見つかりました。現代社会で自己肯定をできない人が増えている中、感情面でいい影響を与えることができる誕生日というものに可能性を感じました。この素晴らしい機会により良い文化を創造したいと考えたのがこのアプリケーションをデザインしたいと考えたもう一つの理由です。僕がデザインを続ける理由は、人を笑顔にしたいから。世の中の問題を解決し、人の感情と世の中のあり方の両面を変えていくことができる力がデザインにはあると感じているし、このプロジェクトはこのビジョンと一致していると感じています。

Objectives

誕生日に関する問題点(友達の誕生日を忘れてしまう、友達の欲しいものが知りたい、サプライズを円滑にしたい等)を解決するUX/UIをデザインすること。

Process

今回のプロジェクトを進めるに当たって、以下のようなプロセスを用いて行いました。

Process

リサーチ → ユーザー理解(ユーザーインタビュー / ペルソナ )→ ソリューションの整理 / 機能選定 → プロトタイプ / デザイン→検証


Process 1 : Research

初期の段階では、リサーチを進めていきます。僕自身が感じていた誕生日に関する問題や不満、解決しようとしているものの方向性が正しいかどうかを確認していきます。

リサーチの段階は主に以下の2つです。

・誕生日に関する人間の意識
・誕生日やサプライズに関する調査(ユーザーインタビュー)

誕生日に関する人間の意識の調査では、この論文を主に参照させて頂きました。この論文や他の文献からわかったことは、人は誕生日というものを「特別なもの」や「幸せなもの」と感じていることが多く、誕生日には多くのコミュニケーションや新たな機会が生まれているということです。

現在自己肯定をできない人が増えている中、誕生日という特別な日に多く人が自分を肯定する機会を得ており、誕生日の接触から生まれるコミュニケーションによって新しいものが生まれたり、価値のある出会いができたりすることもあるというのはすごいことだと感じました。この誕生日という素晴らしい機会における、より良い文化を創造したいと考えました。

Process 2: User Interview(Emphasize)

次に、僕の感じている誕生日に対する問題意識や不満を他の人はどう思っているのかを調査するためにユーザーインタビューを行いました。

ユーザーインタビューでは以下のような質問をユーザーにヒアリングしました。友人を含む14人に誕生日に関するアンケートを実施しています。(方法: Google Formを使用して集計)

《質問例》
・友達の誕生日を忘れてしまい罪悪感を感じたことがありますか?
・友達の誕生日のプレゼントで困ったことはありますか?
・親しい友達の誕生日を普段あなたはどのように祝いますか?
・誕生日を祝いたい友達は何人いますか?
・友達のサプライズを企画している時、どのコミュニケーションツールを使用しますか?
・親しい友達に誕生日を祝われることは嬉しいですか?
・あなたは友達の誕生日を祝いました。しかし相手は、自分の誕生日を忘れてしまいました。あなたは素直にどう感じますか?
・自分の誕生日や友達の誕生日で不満に感じたことがあれば教えてください。

ユーザーインタビューから得られた結果

上記の質問をもとにユーザーインタビューを実施し、友人同士の誕生日に関する意識や状況調査によってユーザーの動向を整理していきます。

《アンケート結果の抜粋》
・約71%の人が友達の誕生日を忘れてしまい罪悪感を感じている。
・約86%の人が友達の誕生日プレゼントに困ったことがある。

User Interview

このような結果がわかりました。

またサプライズ等を企画することも多く、その際は主にLINE(約79%)でコミュニケーションを取ることもわかりました。

User Interview

ユーザーインタビューの結果から、僕の感じていたペインとそれを解決していきたい方向性が正しいと感じたため、当初の方向性でプロセスを進めていきます。

問題点の把握

・プレゼントなど選択肢が多くて、時間がかかる
・誕生日が近い友人が被ると用意が非常に厳しい
・サプライズを用意している店の店員がサプライズをする時の態度が悪い
・友達同士の情報共有
・複数人で集まろうとして、予定が合わない時
・意見の違い、モチベーションの違いなど、円滑に進めるのが難しい
・グループでお祝いするときに、だれがなにを用意するか決めなきゃいけないこと。場所を決めること。
・スケジュール、店選び。サプライズやります!と書いてあってもどんなものなのかわからないお店が多い

結果から、友人の誕生日を祝う際はそれなりの時間がかかり、用意するのに大きな労力がいることがわかる。さらにサプライズ企画になると、チームで物事を進めていかなければならず役割分担などが大変だと感じているようです。

また、誕生日の企画の際に最も多く使われているLINEやSNSでのサプライズ企画では以下のような難点があると推測されます。

・誕生日の企画に特化されていないので、情報共有の仕方やサプライズの方法などがテンプレ化されていない
・役割分担や、お店などを別の膨大なリソースからに決めないといけない

これはの情報をもとに、よりユーザーを理解するためにペルソナを設定していきます。

Process 3 : Personas

これまでのリサーチから、以下のような男女のペルソナを設定しました。

persona

問題点の把握やペルソナをもとに解決策を検証していきます。<ました

課題の解決方法例

ユーザーリサーチやペルソナの決定から以下のような解決策を考えました。

・友達の欲しいものリストがわかる機能
・誕生日のメッセージを送信予約できること(LINEやインスタストーリーズ等にも送れる)
・お店や誕生日プレゼントのアイデアを得られるフィード
・サプライズ企画中のチャットではボットがやるべきことをサポート
・サプライズ企画のグループの一人ひとりが何をやればいいかの役割をチュートリアルで教えてくれる・すぐ見れるところに情報を管理

上記の解決方法を実現性と重要度から優先順位をつけて検証した結果、以下の機能をデザイン案として設計していくことにしました。

重要な基幹機能は、

①友達の誕生日(計画→準備→お祝い)を管理・容易にし、このフローにおけるコミュニケーションをこのアプリで完結できること。
②自分の欲しいものリストを掲載できる機能

UXにおける課題

アプリのUXを考えていた際に、いくつか考えなければいけないと感じることがありました。

・誕生日にプレゼントをあげたり、サプライズを企画して祝わないといけないという義務感を感じさせたくはない。
・相手に送るお祝いのメッセージのオリジナル感をどう出していくか?
・どのような友達とのつながりをアプリ上で表現するか?(フォローされてるされてないっていうのが精神的負荷を与える可能性がある。)
・このアプリは毎日は使わないかもしれないけど、無くてはならないもの。という位置づけにしていきたい。
・自分が祝いたい人は平均で10人前後。(ユーザーインタビューより)バイラルでの広がりを想定する。
・誕生日の通知はどうするか?(サプライズやメッセージを送るだけなどにより方法は異なる)

これらの事項を考えつつ、実際にUIデザイン案に移ります。

Process 4: Sketch

ここからは実際のUIの案をスケッチして検証していきます。僕はよく、実際にAdobe Xd(一番使うデザインツール)でWFを制作する前に紙やホワイトボードで軽くプロトタイピングをしています。

sketch

Process 5: Wireframe

これまでのスケッチやアイデアをもとにWFを作成していきます。今回オンボーディングのフローは省略しています。

wireframe

Process 7:Final Design

上記のワイヤーフレームをもとに最終デザイン案を作成します。

besty

今回のデザインで実現すること

①友達の誕生日を管理することができ、すぐメッセージを様々なプラットフォームに共有可能。
②友達のほしいものリストを確認することができ、そのまま購入してプレゼントできる。
③友達のページからサプライズを簡単に企画し、ボットのサポートで決めるべきことをスムーズ決めていくことができる。

Facebookの誕生日管理との比較

Besty
Facebook
友人の誕生日を管理
友達にオリジナルなメッセージを送れる
SNSやLINE等に送れる
サプライズの企画ができる
×
友達の欲しいものがわかる
×
besty

ホーム画面では、自分の友人の誕生日のリストを確認することができる。Day ⇔ Monthの切り替えが可能で、自分の見やすい方法で確認することが可能。

また右下の友達追加ボタンから新しい誕生日(友人)を追加することができる。

besty

Add Friends - ホーム画面の右下にある友達追加ボタンをタップすると、ハーフモーダルで新しい誕生日の追加方法が選択できる。

Filter & search - 画面上部の検索アイコンから現在登録している友人を検索可能。また家族だけ友人だけを表示したい場合等のソートも可能。

besty

追加した友達のプロフィールから、主に2つのことを確認できる。 ①その友達が欲しいもののリスト(実際にリンク先に飛んでそのまま購入が可能)
②その友達の誕生日に向けて、自分を含む数人で企画しているサプライズの状況

また、右下のボタンをタップすると、ハーフモーダルでお祝いする方法を選択できる。メッセージを送るの方法を選択すると、メッセージを作成できる画面に移動し、GIPHYや画像、ボイスメッセージなどを使ってオリジナルなメッセージを作成できる。それをBesty内で送ることもLINEやTwitter、インスタストーリーズ等で送ることも可能。

besty

チャット画面では、現在進行中のものと過去の企画を参照することができる。現在進行中のタイムラインでは、時系列にそってルームが表示される。

個別のグループ内では、Besty botがサプライズの企画をサポートしてくれる。サプライズにおいて決めなければいけない内容(場所、日程、役割)等を提案してくれたり、情報をまとめてくれる。また現在の状況に応じてリマインドしてくれる。

グループ内で決まった事項は、チャット内を左スワイプすると情報一覧として表示され視覚的に見やすい形でまとめられる。

また全体的にUIはシンプルな設計にし、基本的に親指でスムーズに操作できるようにしています。

Process 6 : Validation

今回の最終デザインをもとに、もう一度ユーザーインタビューを行いプロダクトの検証を行います。

Feedback

・どのタイミングで通知を出すか?(サプライズの時、誕生日を祝うだけの時等)
・SNS機能である友人とのつながり方がわかりにくい。(誕生日追加からつながるの?それともチャットから?)

ユーザーインタビューの結果、上記のようなフィードバックを得ることができました。これをもとに、再度デザインを調整して検証を繰り返していきます。

Process 7: What Next?

最後にプロダクトの実現に向けて、今後考えて行きたい項目をあげていきます。

①誕生日の人は視覚的にも、UX的にも満足感や祝われている感を感じられるようにしたい。→プロフィールのビジュアルデザイン案やアニメーション
②マイクロインタラクションの追加
③技術的課題やビジネスモデル(マネタイズ)に関してのリサーチ
④サプライズのお店やプレゼントなどを簡単に探せたり、提案してくれたりする機能の追加を考える。

besty
Project by Ryohei Ano.