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

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


そんなビールのサブスクリプションサービスが世の中に出されたとき、そのサービスにはどんな機能があり、どんな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サービスを作っていきたいクライアント、メンバーを募集中なので是非ともお気軽に連絡くださいませ。


この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

自分の言葉や考えが、すこしの人数にでも深く伝えることができたのならすごいしあわせなことだとおもいます。

いつか仕事で繋がれたらうれしいです
61

Yuki Homma

note編集部のおすすめ記事

様々なジャンルでnote編集部がおすすめしている記事をまとめていきます。
4つのマガジンに含まれています
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。