This page is intended for users in Germany. Go to the page for users in United States.

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

初めまして!
ココナラでUIデザイナーをやっている奥野と言います。
会社ではハリーというあだ名で呼ばれています。

今回やったこと

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

出品者:Matty さん(デザイナー)

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

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

プロフィールページリニューアルの最大の目的は、
「簡易的なプロフィールから、その人を表現するホームページにすること」です。
現在ココナラには90万人の会員がいて、11万件以上の出品サービスが投稿されています。

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

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

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

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

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

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

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

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

そんな中で今回は、

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

といった理由から、本プロジェクトのタイミングで、既存のデザインルールに引きづられず更新していくことに決めました。

そんな訳で、デザインのガイドラインを再整理し、本体に関わるところは合わせて変更を提案しながら、既存のデザインを徐々にアップデートしていくことにしました。

ユーザーの幅が広すぎる

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

▲赤で囲っているところが職種のカテゴリです。(幅広すぎる!)

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

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

ココナラに出品していなくても使いたくなるくらい、出品者それぞれが"自分の居場所だと思える距離感”
個性に応じてデザインを変化しつつも、今回のデザインではココナラらしいアットホームで安心できる空気のある”距離感"を大切にしました。

今回の拘ったポイント

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

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

▲出品者:Matty さん(デザイナー)

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

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


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

▲上が編集画面、下が公開画面です。(編集している項目のみ表示されている)

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

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

▲出品者:あかつきひなさん(イラストレーター)

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

他にも沢山

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

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

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

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

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

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

最後に

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

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

沢山チャレンジさせてくれたチームの方々、本当にありがとうございました!

あと新規事業にがっつり携われるUIデザイナーも募集しておりますので、もし興味がありましたら、お気軽にオフィスに遊びにきてください!

新規事業担当デザイナー
ココナラ創業者新明と一緒に新規事業立ち上げ!!UIデザイナー募集
『一人ひとりが自分のストーリーを生きていく世の中をつくる』 わたしたちはこのビジョンのもと、インターネット上で個人の知識・スキル・経験を売り買いできるマーケットプレイスである「ココナラ」を運営しています。 2012年7月のローンチ以来順調に成長し、ユーザー数は130万人に達し、累積の取引件数も350万件を超えるなど、知識・スキル・経験を売買できる国内最大級のマーケットプレイスに成長しています。デロイトトーマツによる2017年度日本テクノロジーFast50(3年間の収益成長率)では、第1位(1,252%)を受賞するなど、急成長しています。 これから弊社は、新機能開発だけでなく、既存の枠にとらわれない新たな事業を立ち上げていきながら、「相談事なら“ココナラ”だね」と日本中で言ってもらえる総合相談プラットフォーム構築を実現していきます。 直近の動きとしては、より多くの方にココナラを知っていただくことを目的として2年ぶりにTVCMを放送したり、これまで個人対個人(C2C)だった取引を法人利用へも拡大(B2C)させていくためのチャレンジなどをしています。 ▼ 弊社が運営するサイト みんなの得意を売り買い、スキルマーケット「ココナラ」 https://coconala.com/ 弁護士とオンライン法律相談ができる「ココナラ法律相談」 https://legal.coconala.com/ くらべて予約 対面サービスのマーケット「ココナラミーツ」 https://meets.coconala.com/ ▼急成長「スキルマーケット」が社会にもたらす価値とは https://yomoyamablog.coconala.co.jp/entry/2018/10/24 ▼弊社運営メディア「ココナラマガジン」 https://magazine.coconala.com/
株式会社ココナラ
株式会社ココナラ's job postings
5 Likes
5 Likes

Weekly ranking

Show other rankings
If this story triggered your interest, go ahead and visit them to learn more