初めまして！モチベーションクラウドのUX/UIデザインを担当している溝上です。今回は株式会社リンクアンドモチベーションのデザイナーがUX/UIデザインを行う過程を紹介しようと思います。
課題の特定
ゴール：解決する課題を言語化し開発チーム内・事業サイドと認識をすり合わせる
期間：1~2週間程度
使うツール：スプレッドシート、miro
課題のネタとなるのは「事業戦略上の課題」や「顧客要望」がメインです。
ただしこのタイミングでは課題は不明瞭で非常にフワッとしています。
例えば、 「モチベーションクラウドの利用頻度をコンサルのサポート無しで向上させたい」 くらいです。
Pdmとデザイナーが本当にそれは課題なのかどうかや、根本的な課題はどこなのかを定量・定性の両方から特定することに注力します。このフェーズが一番重要であり、最も難しいと私は思っています。それぞれが自由に〇〇も課題だと話すと発散しがちで、意思統一が難しいです。
BtoB向けのプロダクトのためある程度フローが見えてることが多く、事業規模やユーザー数などの軸でファネル分析をします。またユーザーインタビューなどから得られた定性情報をカテゴリ分けしスプレッドシートに書き出していきます。
ユーザーモデリング
ゴール：関係者間でユーザの認識を揃えること
期間：2~3日程度
使うツール：miro
課題の特定とほぼ並行して進めるのがこのフェーズです。特定した課題を抱えている人は具体的にどんな人なのかを深掘ります。ユーザーはどんな属性かをペルソナ、どんなフローで何を考えながら行動しているのかをカスタマージャーニーマップにまとめます。ポイントはアップデートされる情報だと割り切って早く仕上げて展開してしまうことです。
プロトタイプ(手書き~デジタル)
ゴール：機能開発においてデザインの方向性の認識が揃うこと
期間：1週間程度
使うツール：スケッチブック等、Invision
私が所属している開発チーム内では要件を考えるフェーズとプロトタイプの製作が同時進行することが多いです。ほぼ最初は手書きからスタートします。このタイミングでは、本当にこの要件で課題を解決できるものになっているかを重視しているので細かい粒度は一切考えていません。
手書きである程度方向性が見えてきたらデジタルに起こしていきます。
レビュー内容によっては次の日からは全く別のアイデアを考えたりなどもよく起こるので作り込み過ぎず、でも みんなの認識がずれない程度のもの を作っていきます。
プロトタイプ時点では、ペルソナの課題を解決するためにこんな開発すべきじゃない？まで認識が揃えばokです！関係者からいかにレビューをもらえる状態にするかがこのフェーズのポイントとなります。
デザインコンセプト
要件を満たすUIを作るだけでは、デザイナーとしての力は半分しか発揮できていません。要件を満たすことは最低条件であり、さらにデザイナーとしてのこだわりを加えます。この時担当していた機能は、プロダクト内のユーザの利用状況を管理者が把握することができるようにするという内容でした。把握した後は利用を促進できるように促せるようになりますが、どうしても「管理する」というニュアンスが強くなりがちでした。そこで「管理」ではなく「寄り添い」というコンセプトを設定しました。デザインコンセプトを設定したことにより、 「できていないユーザー」ではなく、「よく利用してくれているユーザー」 にフォーカスが当たるような要件も追加することになりました。このように「システム要件」+「デザインコンセプト」をセットでUIを作り上げていくことが内部にいるデザイナーの重要な役割になってきます。
コンポーネントを意識した設計
toB/toC関係なく他のアプリやサービスを参考に様々な表現方法を考えます。
このタイミングでは実装工数や実現可能性等は一切考えていません。
後々、フロントエンドエンジニアと実装できるかどうかなどをすり合わせていきます。
人間は心理的に 「中途半端なものを綺麗にしてしまいたい」 という感情を抱きやすいため、各ステップから少し進んだところまで色を塗るというデザインに決定しました。
ユーザビリティテスト
ゴール：想定通りに利用してもらえるのかの検証
期間：2週間程度
使うツール：XDのプロトタイプモード
UI設計と同時に進めていきますが、作ったもの/作っているものを素早く他者に見せてフィードバックをもらいます。UIを詳細に詰めていくことも重要ですが、 自分たちが作っているものが「完璧ではない」と割り切り 、様々な観点からフィードバックをもらいます。静的な画面で終わる時もあれば、アニメーションが重要になってくる画面だと、XDのプロトタイプなどで簡単に作ることがあります。表現しきれない内容に関しては簡単に実装してもらうこともあります。どうやってお客様に納品するか、どうやって価値を直接伝えていくかなど、開発チーム内だけでは考えられない範囲まで話し合います。
UI設計
ゴール：様々な条件時の実装方針が分かるデザインデータの作成
期間：1週間程度(画面数に応じて変わる)
使うツール：Adobe XD
様々なフィードバックをもとに最終的に出来上がったデザイン(理想)は以下のようになりました。
ただしこれだけだと開発の設計は進みません。
そもそもユーザが設定されていない時は？データが存在しない時は？エラー時は？など様々条件時のデザインも作っていきます。
状態デザイン含めデザインデータを作成したらいよいよ大詰めのフェーズになります。デザインガイドラインに沿って、マージンなどを調整し、最終的なデザインデータを制作します。その後チーム内でデザインを共有してUI設計は完了になります。
まとめ
ここまで見てくれてありがとうございました！
株式会社リンクアンドモチベーションのデザイナーがUX/UIを製作する過程の一部を紹介させていただきました。プロジェクトの大きさによってはやることなどが変動しますが、機能開発・修正等は大体こんな感じで行っています。何か参考になれば幸いです！
