スクリーンショット_2019-05-17_16

おいしいビールが届くサービスを描く。気分は夏なのです【デザインケーススタディ】

もし毎月、自分にぴったりのおいしいビールセットが自宅やオフィスに届くサービスがあったら、みなさんは頼みますか?


そんなビールのサブスクリプションサービスが世の中に出されたとき、そのサービスにはどんな機能があり、どんなUIをしているでしょう。どうすれば申し込もう!と思うでしょうか。
そんなことを1週間考えた自分へのデザイン備忘録です。


現在、自分は
- UX+UIデザインが未経験の人が
- 最短3ヶ月で知識0/実践0の状態からでもサービスデザインを行えるようになるための(3-6ヶ月でUX+UIでサービスデザインにジョインするための)
- UX+UIの実践的なトレーニング方法
を行っています。知りたい方は以下の記事をお読みください!


お題:ビールのサブスクリプションサービス

タスク:ビールが毎月届くサービスのUX+UIデザインを行なう

使用ツール:Sketch

ターゲットデバイス: iOS devices

期限: < 1週間


0. 全体の流れ

1. UXの設計
1-1. LEAN CANVASを描く
1-2. ペルソナについて考える
1-3. ストーリーとコンテンツの整理
1-4. 参考となるサービスを探す

2. UIのデザイン
2-1. 類似サービスをとにかく探しペーパープロトを完成させる
2-2. 必要そうなUIキットをインターネット上でさがす(ui8、fontawesomeといったuiキットを探せるサービスを使用)
2-3. デザインツールで作成


1. UXの設計

1-1. LEAN CANVAS

LEAN CANVASで、
「誰のどんな課題をどのように解決するか。」
を定義していきます。

課題
- 数多くのビールがあるけど出会いにくい
- どんなビールを飲んだか体験がストック化されていない
- 買う/飲みに行く手段が少ない

顧客セグメント
- 20代後半、IT、男性

独自の価値提案
- 数千のビールと出会う機会を提供し、体験がストック化される

ソリューション
- 自分の嗜好に基づいたビールの提供
- 毎月届く
- 飲んだものがストックされ、その評価をもとにまた届く

1-2. ペルソナ

ペルソナ像
- 20代後半、IT、男性。部屋とかおしゃれな感じ

人柄・どんな人?
- IT系CEO
- 28才
- お酒が好き
- ものへのこだわりや、情報感度が高い
- 友人が多く、オフィスや自宅でお酒を飲むことが多い
- 東京都港区在住

振る舞い
- 週1で、自宅での1人飲みや、知人、恋人との飲み会を行なう
- お酒は近くの品揃え豊富なスーパーかコンビニで購入
- 地ビール・クラフトビールを飲むことが好きで何軒かは知っている

課題解決
- 近所のスーパーにおいしいお酒はあるが新しいお酒に挑戦したい
- ビールをいちいちAmazonでチェックするのは面倒だ
- できればビールについて詳しくなりたい


1-3. ストーリーとコンテンツの整理

ストーリーとコンテンツの整理
ストーリー:
来週末には自宅で友人を招き2人でしっぽり飲もうと思っている。
せっかくの飲み会なのでカンタン・ラクにビールでも用意しておきたい。
でも近所のスーパーに行くのはめんどうくさい&自分の見知ったビールがあふれてきている。
Amazonで調べるのも時間の手間だし、よいビールとどうすれば巡り会えるだろうか」

コンテンツ:
- 味
- 名前
- 度数
- ジャンル
- 値段
- ブランド
- ブランドストーリー
- おすすめポイント
から、ペルソナは「どうしてそのビールがおいしいか」右脳・左脳でわかるものを知りたいという点から、

- 相性
- ブランドストーリー
- ジャンル
を優先して表示することを決定


1-4. 参考となるサービス

EC・サブスク・D2C・マッチングアプリなどと相性が良さそうだと考え、今回参考にしたのは以下のサービス


1-5. サービスイメージ


2. UIのデザイン

- 類似サービスをとにかく探しペーパープロトを完成させる
- 必要そうなUIキットをインターネット上でさがす(ui8、fontawesomeといったuiキットを探せるサービスを)
- デザインツールで作成
という3ステップでデザイン

今回デザインしたのが
beerlikeというサービスです
「自分の好みをサービス側が測定し、オリジナルのビールセットを毎月送ってくれる」
というテーマで制作しました。

全体の設計

「ウォークスルー→好みの選択→商品ページ→購入ページ」
というミニマムの流れを今回デザインしました。


ウォークスルー

疑問提起求めるアクション得られる効用
というフレームで書きました。
具体的には
「おいしいビールと出会えてます?」
「好きなタイプを選ぼう」
「とっておきのビールが届きます」


・オンボーディング

D2CのシャンプーブランドMEDULLAさんやApple Musicのように楽しく選べるイメージ。ビールの泡をテーマに作成。


・商品ページ

ペルソナが最も大切だと考えた3要素
-  相性
- ブランドストーリー
を入れ込みました。


登録・購入

ユーザーにすこしでも負担してもらうのは、「おいしいビールと出会えた!」と思う瞬間でよいと考えました。

そのため最後に登録と購入画面を設置しました。


各詳細画面

トップ


ウォークスルー1


ウォークスルー2


ウォークスルー3


オンボーディング1


オンボーディング2


オンボーディング3

オンボーディング4


オンボーディング5


商品リスト


商品詳細


購入画面


アカウント作成


支払い情報の入力


3. フィードバックを受ける

UX設計
- ペルソナのニーズ部分は「〜したいができない」という課題を入れる。ソリューションのレイヤーを入れるとややこしくなる。

UI設計
- CTA(Call To Action)はボタンが小さい、きちんとスマートフォンに画面を出して確認したほうが良い
- ボタンにやオブジェクトにシャドウがかかりすぎている
- 色味にもうすこしコントラストがあったほうが文字を読みやすい
- 商品紹介のレイアウトの調整

これらを取り入れて次回もより良いデザインを心がけていきます!!

UX+UIに関するフィードバックもぜひお願いします。

-----------------------------------------------------------------------------


MESONはこのように本質的にサービス・ARの価値や未来について考え、ものづくりしていく集団です。一緒に本当に価値のあるARサービスを作っていきたいクライアント、メンバーを募集中なので是非ともお気軽に連絡くださいませ。


👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾          ⚡️ピピピッ⚡️               🛸