見出し画像

UIデザインのフローを標準化する試み「MONDRIAN」はじめました

こんにちは。Chatworkプロダクトデザイン部マネージャーのもってぃー(@87_lab)です。デザイン部メンバーの裏方として、主に業務効率化やスキルアップの仕組みづくりに日々奔走しています。
その一環として、UIデザイナーの設計フローをHCDプロセスに準えてフォーマット化する試みをはじめました。名付けて「MONDRIAN」(名付け親はメンバーの大竹(@satocalog))!今回はその誕生の訳について書こうと思います。

UIデザイナーの仕事はわかりづらい?

「UIデザイナーって何してるの?」というご質問を、社内外問わずよく受けます。
「いわゆる"デザイナー"とはちょっと違いそうだ」
「Sketchとかfigmaを使ってるイメージはある」
「"デザイン仕様書"書く人だよね?」
「デザイン素材くれる人でしょ?」
どれも間違いではないのですが、業界内でも企業によってその職域定義やスキルセットは様々というのが実態です。

デザインプロセスを見える化したい

シンプルに言ってしまうと
「叶えたいユーザー体験を実現するためのUIを設計する」
のがUIデザイナーの仕事。もちろんその設計のための与件整理、あらゆる調査、情報設計、要件抽出などの周辺業務もおこないます。これらがとにかく他部署からは見えづらいし理解されづらい。結果、
「絵を描くだけなのに結構時間かかるんですねぇ・・・」
などという声が聞こえてしまうこともあります。そして、残念ながらこのような話はデザイナー同士で集まると「あるある」として毎度話題に上るほど、業界のあちこちで起きています。

この見えづらいデザインプロセスを見える化し、各パートで明確なアウトプットを示すこと。
これが今回の試みを始めようと思ったきっかけの一つでした。

コンパクト化とスピードアップ

デザインワークとその各プロセスは、正直底がありません。深堀りしようと思えばどこまでも掘れてしまう恐ろしい沼です。ユーザーを想えば想うほどそのリスクは高まりますが、わたしたちの仕事はお客様にサービスを届けることですから、開発プロセスの序盤を任されている我々デザイナーが沼にハマっている場合ではありません

各プロセスを最小限のタスクで構成し、効率よく抽象度を下げてくこと。それによってアウトプットのスピードを上げること。これらを標準化の主たる目的としました。

MONDRIANの6つのステップと各フォーマットで実施すること
MONDRIANの6つのステップと各フォーマットで実施すること

HCDプロセスギャレットのUX5階層と実務でのワークを結びつけつつ、必要十分なステップとタスクに絞り込むことで、6つのステップで各フォーマットを臨機応変に活用していくスタイルに落ち着きました。

Chatworkメンバーのコミュニケーション能力に頼れ

わたしがChatworkに入社して一番に感じたのは
「社員みんながコミュニケーションお化け(いい意味で)」
ということです。さすがチャットの会社。テキストコミュニケーション × テレビ会議を絶妙に使い分けることで、フルリモートでも特に支障なく日々の業務をこなすことができます。

自他部門メンバーの読解力と不明点は早期に上手く解消する積極的なコミュニケーション力を信じて、隅から隅まで至れり尽くせりのドキュメンテーションはやめちゃえ!という判断も併せておこない、
エンジニアへの最終アウトプットはデザイン指示書ではなくSketchデータをAbstractで共有すること
としました。詳細な情報を担保するドキュメントはストック用に後でゆっくり書くことにして、エンジニアに渡すスピードを優先するという方針にしたわけです。

実際のドラフトレビュードキュメント
実際のドラフトレビュードキュメント

UI負債防止は部内レビューで担保

コンパクトに!雑に!早く!を追求すると、設計思想/構造の破綻やユーザビリティの考慮不足が懸念されます。そこは、各パートでチーム内レビューをおこなうことで担保する仕組みにしています。

レビューで取得したフィードバックを担当デザイナーが取捨選択しながらアウトプットを調整し、PMやプロジェクトメンバーに持って行きます。

仕組みもHCDプロセスで継続改善

こうして「とりあえずやってみよー」と始めたUIプロセス標準化計画「MONDRIAN」は徐々に形になり、部内外メンバーのフィードバックを元に日々改善しながら鋭意活用中です。今後は運用面の見直しもおこないながら、デザイナーのデザインスキルの向上やステークホルダーとの連携改善に寄与するように磨き込みたいと思います。
また、今後は、実際に利用してくれているメンバーの実例や感想なども、このnoteでご紹介していきます!(わたしも楽しみです。)

⭐️ 実例記事がアップされました!


Chatworkのプロダクトデザイン部では、一緒にUIを磨き込む仲間を募集しています。興味を持たれた方、お気軽にお声掛けください!


この記事が気に入ったらサポートをしてみませんか?