おいしいビールが届くサービスを描く。気分は夏なのです【デザインケーススタディ】
もし毎月、自分にぴったりのおいしいビールセットが自宅やオフィスに届くサービスがあったら、みなさんは頼みますか?
そんなビールのサブスクリプションサービスが世の中に出されたとき、そのサービスにはどんな機能があり、どんな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サービスを作っていきたいクライアント、メンバーを募集中なので是非ともお気軽に連絡くださいませ。
👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾 ⚡️ピピピッ⚡️ 🛸