connpassのホーム画面を考える

こんにちはThingoです。

前回「connpassのアプリを考える」の続きをやっていきましょう。
今回はハイブリッドアプリではなく完全なアプリ化をすると仮定した場合のデザインを考えて行きたいと思います。ただ、ベースとなるのはやはり既存のサイトなので、その辺りも極力汲みながら挑んでみます。

STEP1、タブメニューを考える

軽くサービスを触った段階で、考えたメニューがこちら。

ホーム ・ 検索 ・ クリップ ・ チケットという並びです。
connpassの持っている機能で重要そうな項目を並べてました。
検索、クリップ、チケットでアイコンの微妙な角度を揃えてみたりしてましたがそんなさ末なことはどうでもよくて、このメニューでは不完全だなと早々に気がつきます。(実際には知ってた)

1、connpassはチケットと呼ばない(受講票)
2、connpassでは受講票発行は任意(しなくてもいい)

チケットというワード自体が使えないので、別のメニュー名を考えねばなりません。受講票の名前をチケットにしたらいいという話でもありません。

反省
よくサービスを知らずに、情報設計せずに作るのはやめよう

とはいえど、プロトのようなものなので、作ってみてハッ!と気がつくこともありますよね? ね?え?


STEP2、メニューを考える為に手がかりを探す

サイトの機能とサイト名以外になにか手がかりになるもの・・・

ありました ex. LIGの「のびすけ」さんのインタビュー記事。ここから抽出するに

・イベント開催側に使いやすいサービスを作った
・コミュニティ発達のためにグループ機能を導入した
・知人の参加・開催イベントが気になる人が多い
 ゆえに、通知機能がすごくささってる

これらから、通知はマストでグループを重視しているということがうかがえます。開催側は別アプリを用意するとして、このアプリを使うイベント参加者に便利でこれらのことと矛盾しないことはなんだろうかと考えます。

知人は参加してないけど興味関心のあるイベントにどうやって出会うか?
・どんなグループがあるのか?

以上をふまえてメニューをさらに考えて行きます。


STEP3、メニューに落とし込んでいく

左が最終的なメニュー、右がconnpassというアイデンティティの事も含めて考えてたメニューです。
通知を設置、クリップ・受講票・参加するイベント等は「マイページ」に格納。


主に右メニューの説明をして行きます。

connpassという言葉はおそらく「compass」では類似の表記のものの中に埋もれてしまう為に、ユーニークな名前としてconnpassにしつつ、nnの繋がりはmに見えることからこういう名前になったのだろうと想像ができます。

さて、compassという言葉は一般的に「冒険」や「発見」などを示唆するものだと思います。参加者がイベントを発見するという意味において、ホームボタンにホームアイコンではなくコンパスのアイコンを用いた「発見」というメニューにしたらどうだろうかと考えつきました。connpassのアプリを使っているという意味性に寄与するんではないだろうかとも。

しかし、発見の横に検索メニューがあります。言葉の上では違いは認識できてもイルカとクジラの境目(同じ鯨類・大きさで分けている)のようなメニュー構成になってしまいます。これではユーザーが混乱してしまう可能性があったので、ホームへと着地しました。

ついでにいえば、connpassのアイデンティティに触れられている記述がどこにもないので正確なところはわかりませんが、compassという言葉は「ユーザーが発見する」という部分にかかっているのではなくて、イベントの内容がユーザー(イベント参加者)の未来への指針になっているという意味なのだろうと思い直すことにもなりました。


STEP4、ホーム画面を考える

STEP2で考えた以下を実現するためにホーム画面をレコメンドをする画面にしようと思います。

・知人は参加してないけど興味関心のあるイベントにどうやって出会うか?
・どんなグループがあるのか?

レコメンドに必要な情報
レコメンドのためには、あらかじめユーザーに地域や興味のあるカテゴリを選択してもらう必要があります。
現行サイトのカテゴリをオンボーディングでユーザーに選択をしてもらう設計にします。

オンボード画面

ホーム画面

やったこと

・前回こだわったステータスはそもそも必要ないので人数だけ表示
・カードレイアウトから、より障壁の少ないデザインに変更
・エリアは上バーでいつでも変更することが可能
・右上にあったメニューはマイページに統合

上記のようにおすすめ以外にも「人気の」とか「定員の」とか「募集締め切りの」とか勧め方はいろいろ考えられると思います。
右側の画面はグループとイベントが同じ形なのでユーザーを混乱させないようにグループ箇所には背景を引いてデバイドさせた方がいいかもしれないと思って作った結果です。

メモ
・カルーセルにしてもう少し情報量を増やした方がいいかもしれない
・そもそもホームと検索を分ける必要性について考察する


今回はここまで、残りのページもまた続けて考えていきたいと思います。



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

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

よかったらサポートお願いします!(切実)

\ 大吉を超えた小吉 /
11

Thingo TKSK

#デザイン 記事まとめ

デザイン系の記事を収集してまとめるマガジン。ハッシュタグ #デザイン のついた記事などをチェックしています。広告プロモーションがメインのものは、基本的にはNGの方向で運用します。
2つのマガジンに含まれています
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。