【Smart相談室｜開発秘話 vol.3】 デザインを力に 〜デザインの落とし込み〜
Smart相談室 カウンセラー事務局のりよーなです！
この記事執筆を始めてから、Smart相談室の歴史を知れて、日々愛が深まっております。
たまたま代表の藤田さんとエンジニアチームの責任者の亘さんが話している席にお邪魔することがあり、開発秘話を記事にしよう企画の第3弾。今回はデザイン面についてをご紹介する内容になっています！
前回の記事は👇👇から、どうぞ！
Smart相談室とは？
Smart相談室は、従業員のメンタルヘルスをサポートする「オンラインカウンセリングサービス」です。組織の中に、ちょっとしたモヤモヤの段階から相談できる相談窓口としてご活用いただいています。
ポイントは、「メンタル不調になる前に」相談できること。
メンタル不調になる前に、休職に至る前に、どんなことにも寄り添うのが
Smart相談室です。
サービスローンチ直後の壁
Smart相談室のサービスをしっかりローンチしたのは2021年10月18日でした。それまでは繋がりのある企業様に使っていただき、フィードバックを得ながら形にしている状態だったため、この日が世の中にSmart相談室が公開された日です。
記念すべきリリース当時の記事です！↓
前回ご紹介したように、各エンジニアさんで役割分担をして、各機能の改善を重ねていく中、ローンチ直後に壁となったのは「相談のハードルの高さを感じるデザイン」であることでした。当時のデザインは、比較的淡白で、色も原色に近い色が多く、今とは全く違うものでした。
私がSmart相談室を知った時には、今の柔らかいパステルカラーのデザインだったので驚きでしたが、まずスタートして随時更新していくという今の会社全体のスタンスも垣間見えました。
デザインのイメージ
藤田さんと亘さんは、機能として使いやすいのは当然として、相談者さんの相談に対する精神的ハードルが低いデザインを目指したと言います。
藤田さんいわく、デザインの世界観は「メッカワ」とのことです。
Smart相談室は、カウンセリングという言葉の医療職のイメージを低くして、よりカジュアルに使ってもらいたいという思いを持ったプロダクトです。誤解を恐れず言えば「当日キャンセルしても良いからまずは相談したい」と思ってもらえるようにしたかったとのこと。
具体的にいうと、「柔らかくて、可愛くて、親しみがある、ポップ」という文言のもと、デザインを組んでいきます。
取り掛かったのはローンチ直後。
デザイン会社、16bitさんにデザインをお願いし、藤田さん、亘さん、そしてSmart相談室初のビジネスサイド責任者となった伊禮（いれい）さんを合わせ、アイデアを出し合いました。
（伊禮さんとSmart相談室とのエピソードは、また別の機会にお届けします！伊禮さんの入社エントリはこちらからお読みいただけます！！）
これらのデザイン作成を進める際に気をつけたのは、「色味」と「視認性」だそうです。クリックしやすい柔らかさ、そして機能が「これだ」とわかりやすいイラスト、を目指してリクエストを重ねていきます。
これも1画面だけでなく、相談申し込み画面、企業管理画面の両方の画面のトンマナを合わせる必要があったため、複数の画面を同時進行で進めていったと聞いて、すごいスピードだったんだろうなと想像していました。
相談者さまからの反応
たくさんのやり取りを重ねに重ね、2022年3月、新しいデザインをリリースしました。
ここまで読んでいただいたみなさま、気になっていたと思いますが…以下がブラッシュアップ後の画面です！！
この画面に変えてから、特に相談者さまから「何これ！めっちゃいいですね！」と良い反応をたくさんいただいたようです。
一部の管理職の方には「もっとかっちりした方がいいのでは？」というお声もいただいたようですが、この相談画面に変えてからの相談率を見ていただくと、納得いただけたようです。
当時も、今もですが、相談者さまを第一に考えるスタンスが本当に一貫しています。相談者さまから見て、使いやすさや見やすさはどうか、相談のしやすさはどうかなど、安心してご利用いただけるように改善を重ねています。
その後のデザイン関連のエンジニアさんとして浅野さんがジョインし、今はデザインのリニューアルを担当してくれています。
次回予告
今回は、相談者さまにひたすら寄り添うエンジニアさんのお話、デザインについてお届けしました。いかがでしたか？
次回は「クライアントの声」がテーマです。
各方面からいただくフィードバックを元にして、新機能の追加や更新していくエンジニアさんの、怒涛のブラッシュアップ劇をお届けします。お楽しみに！
【付録】これまでの流れ
【Smart相談室｜開発秘話】開発文化が生まれた瞬間〜Gフォームからプロトタイプへ〜
【Smart相談室｜開発秘話】役割分担 〜相談者ページ、企業側ページ、カウンセラーページ〜