入社3ヶ月のデザイナーが、"安心できる空気のある距離感“に拘ってCtoCのプロフィールページをリニューアルした話

f:id:coconala_Show:20190104164054p:plain 初めまして!

ココナラでUIデザイナーをやっている奥野といいます。

会社ではハリーというあだ名で呼ばれてます。

今回やったこと

こちらの投稿にもありますが、先日出品者プロフィールページを大きくリニューアルしました。

f:id:coconalainc:20181229171531p:plain
出品者:Mattyさん(デザイナー)

この記事ではプロフィールページの「リニューアルにあたっての想い」と、「デザインアップデートのプロセス」を振り返りながら纏めていきたいと思います。

プロフィールページリニューアルの目的

プロフィールページリニューアルの最大の目的は、 「簡単なプロフィール情報から、その人を表現するホームページにすること」です。

現在ココナラには90万人の会員がいて、11万件以上の出品サービスが投稿されています。

その結果、 購入者には一人の出品者から何度も買っている常連さんも多くいて、出品者にはサービス出品をキッカケに、個人事業主として活動する方も多くいらっしゃいます。

そのため、サービスだけでなく、自分の”得意”を簡単に可視化できるようにし、よりその人自身を表現出来る居場所として、プロフィールページを生まれ変わらせる必要が出てきました。

極論、サービス出品しなくても、自己紹介用に経歴・ポートフォリオ・料金プランなどを登録するだけで、見積もり提案や仕事の依頼がされる場所していくのが今回の施策です。

項目として、400文字記入するだけだったプロフィールページから、現段階ではスキル・経歴・受賞/講演/執筆歴・ポートフォリオ・料金プランなどが追加出来る様になりました。

新しいデザインルールを取り入れた理由

今回、プロフィールページを中心に色のルール・フォントサイズ・余白の取り方などを調整しました。

f:id:coconalainc:20181229171650p:plain ココナラは5年以上運営しているサービスですので、機能も追加・変更が繰り返される中で、デザインもどうしても崩れがちな点や今のトレンドからみて古い点があります。

ココナラユーザーも今のデザインで使い慣れており、運営としてもやりたい施策が沢山ある中で、デザインのアップデートはタイミングが難しく着手しづらい状況です。

そんな中で今回は、

・ココナラのトーンを踏襲すること以上に、出品者の個性が映えることが重要
・多くの情報を手軽でわかりやすく編集できるUIが求められる
・プロフィールページをマイクロサービス化するというタイミング(こちらを参考に)

といった理由からも、今回のプロジェクトは、既存のルールに引きづられずデザインを更新していくには最適でした、既存のデザインをある程度アップデートしていくことを決めました。

そんな訳で、デザインのガイドラインを再整理、本体に関わるところは提案しながら進めていきました。


ユーザーの幅が広すぎる

いざ着手すると、出品者の知識・スキルの幅の広さにいきなり躓きました…(それがとてもココナラらしくて面白いのですが)。個性が映えるプロフィールページと一概に言っても、ココナラで活躍されている実際に出品者の職種を見ると、

f:id:coconalainc:20181229171805p:plain
赤で囲っているところが職種のカテゴリです(幅広すぎる!)

イラストレーター、ライター、占い師、弁護士など、この性質の違う、幅の広い出品者それぞれに、誰が使っても違和感が無い様に使いやすくしなければ意味がありません。

ココナラのビジョンは、「一人ひとりが『自分のストーリー』を生きていく世の中をつくる」です。

ココナラに出品していなくても使いたくなるくらい、出品者それぞれが“自分の居場所だと思える距離感”

個性に応じてデザインを変化しつつも、今回のデザインではココナラらしいアットホームで安心できる空気感を残した“距離感”を大切にしました。


今回こだわったポイント

自分の居場所だと思える距離感”を達成する為に気にかけたポイントがいくつかあります。

キャッチコピーを追加し、お客さんに手紙を届けるような見せ方で設計

f:id:coconalainc:20181229171907p:plain
出品者:Matty さん(デザイナー)

スキル・知識は違っても、出品者さんそれぞれに届けたい想いは必ずあると思います。

その想いがより届けやすく、購入者にもわかりやすくなるように設計し、この人だから買いたいと共感したり、想いに惹かれて買ってもらえるようにしました。

設定していない項目は表示しない

f:id:coconalainc:20181229173818p:plain
上が編集画面、下が公開画面です(編集している項目のみ表示されている)

例えば「出品サービスはまだありません」や「実績はまだありません」などが、他のココナラユーザーに見えてしまうのは、運営の作って欲しい箇所が際立ち、ページの未完成感が強くなりあまり嬉しくありませんよね。タブも項目も追加されたところだけ表示される様にしています。当たり前のようで結構大事。

イラストで個性をアピールしたいイラストレーターさんと、ヘッダーが無くて良い行政書士さんとでは見せ方が大違いです。

ホームタブのみ1カラム構成

f:id:coconalainc:20181229172139p:plain
出品者:あかつきひなさん(イラストレーター)

ただのプロフィールページだと思わないように、ホームページの感覚を強める様にしました。 ホームには大体の情報がまとまっていて、他のページは2カラム構成で可読性を優先している形です。

他にも沢山

f:id:coconalainc:20181229172259p:plain

* ヘッダー画像作るのめんどくさいな...って人のための導線で、出品サービスリンクを置いたり * ヘッダー画像の縦横比率をTwitterと同じにして、簡単に配置できるようにしたり * 編集ページもポートフォリオもレスポンシブで設計したり * 出品ページやココナラトップも全ページ含めてヘッダーを変更したり(これがかなり大変…) * 出品者検索機能も並行してガッツリ

言いたいことは山ほどありますが、今回のところはこの辺で!


デザインもユーザーと共に成長していく

f:id:coconalainc:20181229172518p:plain ココナラはユーザーと共に成長していくサービスであることを意識しています。

毎月開催している出品者交流会でも、どんな機能をなぜ求めていて、どういう想いで使っていただいてるのかヒアリングさせて頂き、実際に機能検討を進めて反映させたりしています。デザインも同じく今回は特に近い距離で進めていくことができました。(リリース後に出品者交流会でも直に反応を聞けるのはほんと励みにもなります...)

まずは使ってもらってから求められたところをさらに応えていく、ユーザーの声に柔軟に対応しながら本来あるべき状態を一緒に模索していくため、想定している70%ほど状態でリリースし、沢山フィードバックをいただきながら、次に作るものがまた増えて、というのを繰り返しています。 (もちろん新プロフィールページも、まだまだ機能を追加していきます!)

最後に

こんな感じで書いてますが、実はまだ入社して3ヶ月のタイミングでアサインしていただいたプロジェクトであり、その前はアプリUIだった為、WEBデザインは完全に未経験でした。。。

提案が適切ならすぐ通り、適切でないときは的確にフィードバックが貰える、沢山の人に助けてもらいながら、上流からがっつり関われる場所でデザインできたのはとても良い経験となりました。

沢山チャレンジさせてくれたチームの方々、本当にありがとうございました! あと新規事業にがっつり携われるUIデザイナーも募集しておりますので、もし興味がありましたら、お気軽にオフィスに遊びにきてください!

デザインの力でユーザーの課題を解決したいUIデザイナー募集! - 株式会社ココナラのUI/UX デザイナー中途の求人 - Wantedly