KAKEHASHI Tech Blog

カケハシのEngineer Teamによるブログです。

デザイナーが推進する、お客様のためのデザインシステム

こんにちは。カケハシの主力プロダクトである「Musubi(電子薬歴 ムスビ)」開発チームでUI/UXデザインを担当している木村です。

この記事はカケハシアドベントカレンダー2021の7日目の記事になります。

Musubiは、カケハシ創業以降、薬局の基幹システムとして成長してきたプロダクトです。
特に機能面では日々追加開発が行われ、便利になってきています。もちろんまだ十分ではない部分はありますが、とにかく絶え間なく成長を続けています。
一方、デザインの面では、機能開発の成長スピードに追いついていない状態となっていました。

この状態を改善すべく、開発チームでは2021年下半期から始めた試みがあります。デザインシステムの構築です。
プロダクトの成長と共に、デザインのアップデートも行っていきます。

私たちの抱えるデザインの課題、例えるならレゴブロック、キュボロ、マグフォーマー、ピタゴラスのすべてを合わせてひとつの構造物を作ってきたようなものです。アートにはなりうるが、プロダクトとしての一貫性には欠けると言わざるを得ません。

これらを整理し、運用につなげ、一貫性の高い体験を提供することが課題です。

デザインシステムがもたらす価値

デザインシステムがもたらす価値には次のようなものがあります。

  • 体験価値を向上するデザインメリット
    一貫性の高い体験の提供、ユーザーの教育コスト減(わかりやすい、使いやすい、覚えやすい)、統一感、ブランディング
  • 開発チーム内のコミュニケーションメリット
    属人性排除、共通言語化、共通認識化、短時間で精度の高いコミュニケーションによるデザイン判断
  • 後戻りの少ないデザインプロセスを実現できる開発効率化メリット
    高再利用性、開発スピードの向上、デザイン修正や保守運用のしやすさ

一般的なデザインシステムについてのコンテンツを読むと、デザインメリットは「開発チームにもたらされる内部一貫性が主で、お客様にもたらされる外部一貫性はその結果」といった風に書かれているものが多く見受けられます。個人的には、その点に疑問を持っていました。UI/UXデザイナーは、顧客視点を開発現場に持ち込んで仕事をすべきだからです。

そのため、Musubiのデザインシステム構築は、第一にお客様のことを考えて進めることを決めています。チームに対してのメリットだけでなく、お使いいただいているお客様、さらにはその先の患者さんを助けることができるようになることが、私たちの使命だからです。

なぜやるのか

プロダクトとデザインを一緒に成長させ、より快適なサービス体験をお客様に提供するために行います。同時に、開発チーム内のコミュニケーションの良化とデザインプロセスの効率化を実現します。

STEP 1 現状を整理する

プロダクトで利用しているUIコンポーネントを画像でまとめ、矛盾点と改善点を把握する

STEP 2 基本要素を定義する

  • デザインシステム
    カラースキーム、タイポグラフィ、サイズ、余白、ブレークポイントなど。各パーツの意味や利用目的も明文化する。
  • デザインコンポーネント
    フォーム、ボタン、タブ、アラートなど。disabledやhover、errorなどの各ステートについても定義する。

STEP 3 画面やパーツ単位で定義する

  • デザインシステム + コンポーネント
    入力フォームやグローバルナビゲーション、プロダクトの全画面の定義。フィルタリング、ソート分けの結果やUI Stackなどのデザインパターンも用意する。
  • ユーザビリティテストの実施

STEP 4 コード化とドキュメントの作成

  • 作る側の責任を明確にするもの
    デザイン選択の具体的な根拠と理由、導入ガイドライン、していいこと/いけないことの定義、コードスニペットなど。

実装前に考える、認知負荷と運動負荷の問題

私たちのプロダクトが抱えるデザイン上の課題の一つに、「情報密度が高くなってしまう問題」があります。
お客様からの改善要望にも、一画面上で全ての情報を詰め込んで欲しいといった声は多く聞かれます。操作して最適な情報を見るのではなく、画面から見つけ出すという思考です。 しかしながら、それがお客様にとって最良の解決策ではない場合もあります。

画面の情報量と認知負荷により生じるストレスを最小限にするため、デザインシステムの構築と並行して新デザインを用いたユーザビリティテストを実施します。
旧/新画面において、お客様がどのようにインターフェースを操作するのか観察し、対話し、認知負荷がかかるボトルネックを特定して、最良の解決策を探ります。
テストには、どこまでの運動負荷は許容されるのか、どれほどドラスティックに画面改善ができるのか、誤操作を誘発しないかなどの観点も含めます。

今期のゴール

  1. 共通の指針を明確にするためのFigmaでのコンポーネントと画面デザイン
  2. 1.をコード化したHTML/SASS/JSで作るUIコンポーネント

すぐに大きな成果をあげることはできませんが、デザインシステムがもたらす価値の実現に、大きな一歩を踏み出すことができるはずです。

来年以降の目標

現在はまだ実装前の準備段階ですが、来年以降はプロダクトへの反映を目指して日々前進しています。
すでにお使いいただいているお客様への影響も考慮し、リリースにはある程度の時間を使って行うことを予定しています。事前のコミュニケーションや関係各所への協力依頼も必要です。これらは来年上半期に整理していく予定です。

晴れてリリースされた後は、ユーザーインタビューやユーザビリティテストの定性調査、アプリケーション内のユーザーアクション分析などによる定量調査を行い、KPIを設定しながらUI/UXを継続的に改善できるワークフローを構築し実践することに注力していきたいと思っています。
お客様とともにプロダクトを創っていくことを続ければ、お客様に愛されるプロダクトにきっとなるはずです。

一緒にMusubiを創りませんか?

カケハシではアプリケーションエンジニア、フロントエンドエンジニア、デザイナーをはじめ、多くの業種で採用を強化しています。

ご興味のある方はぜひこちらをご覧ください。

https://recruit.kakehashi.life/