生まれ変わったログインページとデザインシステムのスタート

こんにちは、クラウドワークスでUIデザイナーをしているタカシです。
この度、クラウドワークスのログインページが変わりました。

クラウドワークスでは、現在デザイン基盤整理として、旧来の画面の改善とともに、デザインシステムの開発に取り組んでいます。
その第一弾として、ログインページの変更を行いました。

今回はデザイン基盤整理の活動と、新ログインページのデザインができるまでについて紹介させていただきます。

過去のデザイン原則やデザインシステム

クラウドワークスでは過去にも、デザイン原則やデザインシステムを作る取り組みはありました。
しかし、デザイン面に偏りすぎたデザイン原則だったことで、浸透がむずかしかったり、当時のデザインシステムの進め方では開発効率に偏りすぎてしまったため、デザインの意図が組み込みづらい状態になり、逆にスピード感のある進行が難しくなったりと、効果的に行えているとは言えませんでした。

過去の失敗は、プロダクト全体で共有できる目標がなかったことにあると考えています。
失敗があったからこそ、今回はデザイン原則をプロダクト全体で活用できるものとして作成しています。デザイン原則からデザインを作り込み、デザインシステムに落とし込むという流れを進めています。

デザイン原則ができるまで

デザイン原則は、デザイナーの意志だけで作らないというのを一番念頭において作り始めました。
デザイン原則は、いわゆる新しいデザイン・カッコいいデザインのためではなく、「サービスの目的を果たすためのもの」と考えています。

ただ、そのためには、デザイナー・ビジネス側のメンバー・エンジニアと「サービスがどうあるべきか」について認識をすり合わせることが必要です。
そこでまず、事業責任者やPMにサービスのあるべき姿・強み・将来的な理想、ユーザーにどのような価値を届けたいか・・・などなど、様々な観点でヒアリングをしました。
それらを元に「サービスのあるべき姿」を定義し、「実現するためにどんなデザインであるべきか？」をブレストしました。
そうして出来上がったものが私たちのデザイン原則です。

デザインシステムは少しずつ積み上げる

冒頭にあったように私たちは一度デザインシステムの開発にトライしていますが、リリースされることなく開発中止してしまった経験があります。
それらの経験を踏まえ、下記を重点に開発しています。

・Atomic DesignのAtoms, Molecules以上のサイズのコンポーネントは作らない。まずは小さな共通コンポーネントから作っていく
・技術負債が大きくなく、要素の複雑性が低い画面から行い、体制としても知見を高め確実に進行していく
・画面ごとに「必要なパーツ」かつ「汎用的に利用できるパーツ」のみをコンポーネント化し、各画面対応ごとに追加・改善する運用を行う

スタイルガイドも、ルールとして厳しく遵守することは想定しておらず、必要に応じて改善を積み重ねることを大前提としてスタートしています。

キャプチャはログイン画面で作成・使用したコンポーネントで、現在のスタイルガイドです。
スタイルガイドとしては不十分です。しかし、各施策の中でデザインシステムを育てていく、デザインシステムの開発に100%工数を割くことは難しい中で、まずは必要なものだけルール化して、ルールを集める場所として機能する状態を作るまでが今回の目的でもあります。

チームでのログインページ改善

上記の観点から、ログインページが一番実現可能性が高いと判断し、私たちはログイン画面のデザイン刷新を行うことになりました。詳細はエンジニアブログにも掲載しています。

生まれ変わったログインページにまつわるフロントエンド開発の話 - クラウドワークス エンジニアブログ

デザインレビューではデザイナー・エンジニア・POで行っています。
レビューの基準をデザイン原則におき、各メンバーが「デザインが原則を達成するようなものであるか？」を基準にレビューを行っています。

現在リモートがメインですが、画像のように画面共有しながらレビュー会を行っております。

今回のログインページの改修が、今後のさまざまな改善のスタートとして、
デザインシステムを通してさらにサービスの改善を続けていきます。

デザイン原則ができたことで、全員の目標に

個人的な感想になりますが、デザイン原則ができたことで、コミュニケーションが円滑になったと感じています。というのもまずは目指すべきものが「原則」として共有できているので、ひとまずの方向性の一致がスタートラインには準備されている状態になります。

自分は、以前のデザインシステムからのメンバーでもありますが、当時のチームは、期限やアウトプットのスピード感の理想、それぞれが守りたい項目、突き詰めたい部分など、それらがうまく整備できていないということが発生することもありました。
ですが、原則という目的を共有することで一体感のある選択が可能になり、各自の提案も検討・反映しやすくなったと感じています。
チームとしての一体感・解決力の向上に、良い影響が与えられているのではないかと思っています。

一緒に働くデザイナーを募集しています！

まだまだデザインシステムは未完成です。サービスのデザインに大きくチャレンジできる面白さがあると感じています。
現在、クラウドワークスでは一緒に働くデザイナーを募集しています。
気になる方はぜひエントリーをお願いします！