スマサテのプロダクトデザイン

デザインシステムの構築

デザインと実装の両方を自ら担当し、デザインシステムを構築しました。 Figmaでは各コンポーネントのバリエーションに加えて、「使い分け」や「使い方のルール」をドキュメントとして整理し、誰が作っても同じ品質になる状態を目指しました。

実装側ではReactのコンポーネントをStorybookで管理し、Figmaと同じ単位でパーツを揃えました。 デザインと実装の差分を減らしたことで、画面を作るたびにゼロから考える必要がなくなり、開発スピードの向上につながりました。

UXの改善事例

ユーザーがつまずきやすいポイントを洗い出し、画面の構成から体験を見直しました。ここでは代表的な2つの事例を紹介します。

設定画面の整理

これまで1ページに縦長に並んでいた設定項目を見直し、画面の構成から考え直しました。 「利用者情報」「個人設定」「管理者設定」「会社設定」「利用者一覧」「利用状況とプラン」といったカテゴリーごとに整理し、タブで切り替えられるようにすることで、目的の設定に迷わずたどり着けるようにしています。

トライアル導線の設計

トライアル期間中に価値を感じてもらえるよう、トライアル開始時のメールや、終了前のお知らせモーダルを設計しました。 お知らせモーダルでは、賃料査定や詳細査定レポートなど主要な機能を紹介し、まだ試していない機能の利用を促しています。