Slide 1

Slide 1 text

プロジェクトを成功に導く、デザイナーの仕事 Uzabase / NewsPicks 吉川 亜香音 視点邂逅 #1

Slide 2

Slide 2 text

視点邂逅 私について #1 Akane Yoshikawa Product Designer akanyoshi.com 2018.09 ~ NewsPicks X: @yossiyossi923

Slide 3

Slide 3 text

視点邂逅 #1

Slide 4

Slide 4 text

視点邂逅 #1

Slide 5

Slide 5 text

視点邂逅 今日のテーマ デザイナーとして 何を意識してプロジェクトを進めているのか #1

Slide 6

Slide 6 text

視点邂逅 今日のテーマ コミュニケーション と デザインデータ デザイナーとして 何を意識してプロジェクトを進めているのか #1

Slide 7

Slide 7 text

NewsPicksのボタン「PICK」を「保存・おすすめ・コメント」の 3つの機能に分ける施策を実施しました。先行してアプリ開発から 2023年7月にスタートし12月にリリース、約半年間のプロジェク トとなりました。 PICK分解プロジェクト 視点邂逅 #1

Slide 8

Slide 8 text

視点邂逅 #1 Owner PdM Server Designer QA iOS Android 2023.07 - 12 期間 メンバー構成

Slide 9

Slide 9 text

視点邂逅 人に合わせて役割を変える (to PdM) 1 2 3 合意形成は早めに・こまめに (to Designer) 隔週30分のMTGで不満を回収 (to Engineer) #1 コミュニケーション

Slide 10

Slide 10 text

視点邂逅 #1 人に合わせて役割を変える to PdM ラフデザインまで仕上げるタイプのPdM、要件が決まっていない段 階からデザイナーを巻き込むタイプのPdM、分析が得意で具体は デザイナーに任せるタイプのPdMなど得意領域ややり方が違い、 PJの内容によっても変わります。 …と合わせつつも、めちゃくちゃ意見いいます(大事) 仕様はデザインで洗い出しますね デザインはお任せください 要件から一緒にやりましょう 仕様はデザインで洗い出しますね デザインはお任せください 要件から一緒にやりましょう 先にデザインで提案しますね リサーチしてきました 細部は後で詰めましょう 仕様に合わせますね 先にデザインで提案しますね リサーチしてきました 細部は後で詰めましょう 仕様に合わせますね

Slide 11

Slide 11 text

視点邂逅 #1 合意形成は早めに・こまめに デザインの決定の遅延はリリースの遅延に直結するため、決定をス ムーズにするテクニックは結構重要。デザインメンバーには早めに こまめに出して巻き込み「同じ課題に向き合う一員」として意見を 募るスタンスで持ち込んでいくと批評になりにくい。 デザイナー to Designer アイデアください! アイデアください! アップデートしました! 気になるところあれば教えて! アップデートしました! 気になるところあれば教えて!

Slide 12

Slide 12 text

視点邂逅 #1 隔週30分のMTGで不満を回収 通常プロジェクトの振り返りはリリース後で、些細な問題も解消が 後回し。問題が小さいうちに解消できるよう、エンジニア(アプ リ)との雑談時間で定期的に不満を回収。PJ期間以外はデザインシ ステムの進め方などを相談しています。 私 エンジニア エンジニア to Engineer

Slide 13

Slide 13 text

視点邂逅 仕様書とFigmaのページ構成を揃える 段階的に渡して開発を止めない フローで作って漏れをつぶす 既存デザインに影響させないコンポーネント管理 #1 1 2 3 3 デザインデータ

Slide 14

Slide 14 text

視点邂逅 #1 仕様書とFigmaのページ構成を揃える 通常画面単位でページ分けするが、仕様書とFigmaを行き来するエンジニ アが一致させやすいよう仕様書と同じ構造に。仕様書にユニークIDを振 り、仕様書ID/TitleをFigmaページ名にします。またそれを実装日ごとに 並べておくことで何がいつ実装される・されたのがすぐにわかります。

Slide 15

Slide 15 text

視点邂逅 #1 既存デザインに影響させないコンポーネント管理 既存の画面に影響が出ないよう、開発中はvariantsにV2としてパ ターンを追加します。施策デザインの画面のみ共通コンポーネント 内部の要素をV2に切り替えて使用。リリース後に古いものを削除 し、すべて最新(V2)に変更していきました。 PICK 既存 PICK 既存 PICK_V2 追加 PICK_V2 追加

Slide 16

Slide 16 text

視点邂逅 #1 フローで作って漏れをつぶす 大きめの開発になるほど、認識齟齬が起きてトラブルになりやすく なります。会員種別/操作/ステータスなど全ての状態を流れで起こ して理解を深めます。仕様の漏れを発見しやすくなるだけでなく、 リリース後以降に最新の設計を確認するためにも役立ちます。 会員別フロー 会員別フロー 操作別フロー 操作別フロー 状態別フロー 状態別フロー

Slide 17

Slide 17 text

デザインPh1 Ph2 開発Ph1 Ph2 テスト 要件 仕様 視点邂逅 #1 段階的に渡して開発を止めない 開発者へのデータの渡し方を工夫するとリソースの無駄を最小限にす ることができます。各仕様書(ページ)ごとに完成したものからエン ジニアに展開。開発的に作業量が少なく仕様もシンプルな画面類をま とめて先出しし、複雑なものは開発進行中に議論を進めました。

Slide 18

Slide 18 text

視点邂逅 #1 ちなみにこのプロジェクトの成果は

Slide 19

Slide 19 text

視点邂逅 #1 2024.12.20〜2024.1.22 保存/おすすめ/コメント いずれかのボタンを押す人の割合 コメントを押す人の割合 1.5倍 1.2倍

Slide 20

Slide 20 text

視点邂逅 仕様書とFigmaの構成を揃える 段階的に渡して開発を止めない フローで作って漏れをつぶす 既存に影響させないデータ更新 #1 1 2 3 4 まとめ 人に合わせて役割を変える コミュニケーション デザインデータ 1 2 3 合意形成は早めに・こまめに 隔週30分のMTGで不満を回収

Slide 21

Slide 21 text

視点邂逅 #1 おわりに

Slide 22

Slide 22 text

視点邂逅 #1 デザイナー募集中です なんと アプリデザイナー現在2名あと1名募集中! YOU

Slide 23

Slide 23 text

視点邂逅 #1 恥ずかしい方はQRからでも 視点邂逅 STAFFパス を下げている社員に お気軽にお声がけください

Slide 24

Slide 24 text

視点邂逅 ご清聴ありがとうございました #1