デザイナー兼PMとしてプロダクトの大型リニューアルをした振り返り
こんにちは！株式会社スペースマーケットデザイン部の横井（ @rinoside ）です。
2019年にSPACEMARKETの予約導線を完全リニューアルしました。
デザイナーの自分が、役割としては初めて正式なPMとして仕様策定から設計、デザインプロトタイプ、UIデザインへの落とし込みに加え、全体のスケジュール管理やQAなどを担当したので、振り返りを兼ねてまとめようと思います。
施策を振り返りつつ、デザイナーとPM、両方の役割を担うことのメリットやデメリットについても書いていきたいと思います！
改修の経緯
SPACEMARKETは様々な場所をホスト（スペースを貸すユーザー）とゲスト（スペースを借りるユーザー）それぞれが貸し借りすることができるプラットフォームです。
スペースには「上限のないプラン追加」「時間毎の自由な料金設定」「利用時間のカスタマイズ」など、実はとても幅広く柔軟になっています。
スペースマーケットはサービス開始して5年になるのですが、当初は規模感も小さかったためシンプルなUI想定の設計で予約画面を作成していました。しかしサービスが成長していく中で様々な仕様追加が行われ、予約画面はどんどん情報量が増え分かりづらいページに。2、3年前からすでに改善の声があがっていました。
プランの問題を解決
課題の中でも、特に大きな課題がプランの煩雑さでした。
自由度の高いプラン作成ができるが故に、ホストは自分のスペースをより便利に使ってもらおうと様々な条件・用途・価格帯でたくさんのプランを用意してくれます。
しかし旧デザインの予約フローでは、ゲストはプランを全て把握し、その中から自力で最適なプランを見つけないと空き状況の検索ができないという設計でした。
以下が古いデザインのキャプチャです。
↑↑↑
ユーザーはリクエスト画面にいくと、まず初めにプランの内容を読んでこの中から1つを選ばなければいけません。しかしプランによって予約できる時間が違うため、選んだとしても希望している時間帯でそのプランが予約できるとは限りません。
↑↑↑
プランを選ぶと初めてカレンダーが出てきます。
人気スペースであればあるほどプランが豊富にあったため、非常に歯がゆい思いでした。なのでリニューアルでは、
「プランを選ぶ」→「日程を選ぶ」
という仕様から、
「日程を選ぶ」→「空いているプランを選ぶ」
に変更しました。
下記が新しいデザインのキャプチャです。
↑↑↑
予約画面に行くとカレンダーのみ表示されています。余計な要素をださず、必要な要素しか出さないことでユーザーが次にすべきタスクに迷いません。（ここではモーダル的なUIを採用）
↑↑↑カレンダーの日付をクリックすると利用時間が表示され、利用時間を入力すると右側にその日付＆時間帯で予約できる全プランの詳細とプラン合計金額が入っている一覧が出ます。（SPの場合は下部分に表示）
その他の課題と改善
メイン課題は上記でしたが、その他にも様々な対応を行い、ほぼ新規画面としてリニューアルとなりました。本来、少しずつ変更して様子を見ていくのがUI改善の通例ですが、開発含め予約周りの課題が多すぎたため、完全リニューアルという方針をとりました。
その他の改善点として、下記のような対応を行いました。
・カラーシステムに合わせた色変更（プラットフォームリニューアルで色の扱いが変わったため、緑を青へ変更）
・開発環境を旧→新環境に移し最新のデザインコンポーネントを適用
・情報入力が多いため、入力STEPを分けて全体のフローを見える化
・カレンダーをデザインから新規作成（従来はAnt Designのコンポーネントを使用していました）
・予約リクエストと今すぐ予約の違いを分かりやすくするため、最終ボタンの文言変更
・SPでも36時間分の空き状況をパッと見やすく＋すばやく入力できるよう、時間指定UIデザインの刷新（これはUI賛否・実装面の不備等があり反省点でもあります）
・バックエンドのマイクロサービス化
・支払い方法（Paid/Paidy）の説明文言を見直し、全て変更
余裕のない開発期間にも関わらず、オンスケリリース
メンバーはPMが2名（うち1名はサポートとして）、デザイナー、マークアップ、フロントエンド、バックエンドそれぞれ1名の、計6名です。
その6名で、仕様設計、デザイン、マークアップ、実装、テスト、QAと全てのフェーズを3ヶ月程度でやりきりました。
開発期間にはお盆休みも含んでいたのでかなり余裕のないスケジュールだったと思います。決済が関わる部分なので影響範囲は大きく、失敗したら売り上げに関わるというプレッシャーの中でしたが、一番最初のキックオフで決めた日程通りにリリースができました！🎉
スケジュール調整の仕方
キックオフ後、まずは自分が仕様とプロトタイプをある程度作り、WBSを引きました。そのWBSを軸として、週1回の定例で各自の進捗報告と課題報告、またそれに加えて必ず各スケジュールの状況・残り日数・メンバーの休み予定なども確認し、リリース日最優先で開発の優先度調整を繰り返しました。
リリースの約1ヶ月前を切ると、毎日の朝会を追加で実施し、さらに細かい単位での確認を行いスケジュールの精度を高めていきました。
朝会や定例で型を作り、大小タスクの優先度をはっきり決めていけたことで思いがけない大きなトラブルもなく最後まで進められた思います。
とはいえ余裕はなかった上に、後からどんどん湧き出てくるバグや修正、自分の考慮漏れによる追加対応など後半になるにつれ追い込まれていきました。ギリギリまで開発していたのでQAと開発が同時進行になってしまい、流石にリリース日伸びるのでは…という声も。
自分も無理やりリリースして事故につながるくらいなら伸ばそうと思っていましたが、最終的にはメンバー全員の怒涛の追い込みと気合いで（最終的には気合いも大事…）オンスケリリースとなりました！
リリース後も大きな問題はなく、無事KPIにもしっかり貢献することができていました。細かい改善や調整は対応を続けていますが、リリース初期（10/24時点）と今の状態は基本的に大体同じものです。
デザインとPMを同時にやって困ったこと
【自分が作ったUI＝主観的視点】になるので、どうしても客観的なレビューが難しかったです。自分で自分をレビューするのは基本的に無理だと思ってはいたので、早めの段階でエンジニアやCS、他のデザインメンバーなどたくさんの視点でユーザーテスト的にレビューをもらっていました。
これは非常に良い結果につながりました。一体感も生まれて良いチームにもなったと思います。とはいえ最終的なジャッジはPMが行うのでそこを決めるのが結構苦痛でした。
今回は非常に頼もしいPMがサポートとしてもう1人立ってくれていたので、判断を助けてもらうことが出来きました。おかげでなんとかなりましたが…サポートがいなかったら多数のレビュー指摘に気を取られ、仕様の取捨選択やUIの改善判断の軸がかなりブレてしまっていた気がします。
その点は本当に恵まれていたと思います。
デザイナーとPMとのコミュニケーションは、UI/UXの精度を上げるために重要な役割をすると感じています。
1人でPMもデザインもしてしまうとコミュニケーションが生まれないので品質に限界がある気もしました。やってみた自分の感想としては、120％のUIを目指すには客観的に意見ができる立場のPMは必要、ということです。
ということで、「大規模な案件」に関しては、1人でPMとデザイナーの2役を同時にこなすことは、自分的にはあまりオススメしません。
が！色々デメリット的な話をしましたが、PM2人体制の場合、または規模の小さい案件であれば、役割を横断することはとってもオススメです！（理由はこの次で）
デザインとPMを同時にやってよかったこと
とにかくスピードが早い！
仕様設計とUI設計を同時に行うので、仕様とUIで反発・影響し合うような課題などはまとめて判断できるので、初速がめちゃくちゃ早かったです。
またデザイナーが仕様を作る＝仕様を完全に理解しているので、認識合わせの必要もありません。また画面設計を考えながらなので、UI的な要件漏れも防ぎやすいです。（開発面の考慮はもっと勉強します…）
ただこれは、先にも書きましたが主観的な判断となりUIやUXの設計が偏ってしまう場合もあるので、良い面でもあり悪い面でもあると思います。（コミュニケーションしながらアイデア出した方が幅は広がりそう）
今回のような大規模リニューアルでは1人だと難しい場面もたくさんありましたが、規模が小さめの案件であればデザイナーが仕様含め意思決定できれば単純にスピードアップして良いことしかない気がします。
まとめ
色々と書きましたが、結論は「デザイナーもPM（PjM）として活動することは（体制と施策によりますが）十分可能。効率が良くなり、デザイナーの数字へのコミット力も強くなる！」です。
プロダクトにとっては嬉しい結果に繋がるのではないでしょうか。
実際にその役目を担うときは、案件規模や経験値によってサポートをつける必要性はありますが、上流工程に興味のあるデザイナーは是非チャレンジしてみてください！