Upgrade to Pro — share decks privately, control downloads, hide ads and more …

freee + Product Design FY24 Q3

freee
November 24, 2023

freee + Product Design FY24 Q3

freee

November 24, 2023
Tweet

More Decks by freee

Other Decks in Business

Transcript

  1.  
    freee + Product Design
    freee株式会社

    View full-size slide

  2.  
    freee株式会社について

    View full-size slide

  3. 3
    使命
    Mission
    スモールビジネスを、
    世界の主役に。
    freeeは「スモールビジネスを、世界の主役に。」をミッションに掲げ、統合型
    経営プラットフォームを開発・提供し、だれもが自由に自然体で経営できる
    環境をつくっていきます。
    起業やビジネスを育てていくことを、もっと魅力的で気軽な行為に。個人事
    業や中小企業などのスモールビジネスに携わるすべての人が、じぶんらしく
    自信をもって経営できるように。
    大胆にスピード感をもってアイデアを具現化できるスモールビジネスは、今
    までにない多様な価値観や生き方、新しいイノベーションを生み出す起爆剤
    だと私たちは考えています。スモールビジネスが大企業を刺激し、社会をさ
    らにオモシロク、世の中全体をより良くする流れを後押ししていきます。(freee
    ブランドムービー)

    View full-size slide

  4. 4
    会社情報
    Company Profile
    会社名
    フリー株式会社(本社:東京)
    設⽴年⽉⽇
    2012年7⽉9⽇
    freee会計リリース年⽉⽇
    2013年3⽉19⽇
    CEO
    佐々⽊ ⼤輔
    証券コード:4478(市場区分:グロース市場)
    事業内容(短⽂)
    「freee会計」「freee⼈事労務」「freee販売」などの開発‧販売
    資本⾦は最新の有価証券報告書(IR)からご確認ください
    Webサイト  https://www.freee.co.jp(短縮表記→ freee.co.jp)

    View full-size slide

  5. 5
    グループ会社情報
    会社名 フリーファインナンスラボ株式会社 ※フリー株式会社100%出資⼦会社
    設⽴   2018年10⽉
    本社住所   〒141-0032 東京都品川区⼤崎⼀丁⽬2番2号 アートヴィレッジ⼤崎セント
    ラルタワー20F
    事業者登録:適格請求書発⾏事業者(登録番号:T7010701036533)
    会社名 フリービズ株式会社 ※フリー株式会社100%出資⼦会社
    設⽴   2020年3⽉
    本社住所   〒141-0032 東京都品川区⼤崎⼀丁⽬2番2号 アートヴィレッジ⼤崎セント
    ラルタワー 20F
    事業者登録:適格請求書発⾏事業者(登録番号:T8010701039064)
    会社名 フリーサイン株式会社 ※フリー株式会社70%出資⼦会社 
    設⽴   2013年4⽉
    本社住所  〒141-0032 東京都品川区⼤崎⼀丁⽬2番2号 アートヴィレッジ⼤崎セント
    ラルタワー18F
    事業者登録:適格請求書発⾏事業者(登録番号:T2011001094747)
    会社名 Likha-iT Inc  ※フリー株式会社100%出資⼦会社
    設⽴   2019年7⽉
    本社住所  フィリピン共和国マカティ市 (11th Flr. 142 Amorsolo Bldg., 142 Amorsolo
    St., San Lorenzo, Makati City 1229)
    会社名 sweeep株式会社  ※フリー株式会社100%出資⼦会社
    設⽴   2011年6⽉
    本社住所  〒150-0002 東京都渋⾕区渋⾕2-24-12 渋⾕スクランブルスクエア39F 
    WeWork
    事業者登録:適格請求書発⾏事業者(登録番号:T5010401094081)
    会社名   透明書店株式会社 ※フリー株式会社100%出資⼦会社
    設⽴     2022年11⽉
    本社住所  〒141-0032 東京都品川区⼤崎1-2-2 アートヴィレッジ⼤崎セントラルタワー
    21階
    事業者登録:適格請求書発⾏事業者(登録番号:T1010701043477)

    View full-size slide

  6.  
    製品・サービス

    View full-size slide

  7. 7
     
    人事労務
    電子契約
    固定資産
    請求管理
    請求管理
    債権債務
    管理
    経費精算
    工数管理
    販売管理
    会計
    会計・人事労務・販売管理を核とした
    統合型経営プラットフォーム

    View full-size slide

  8. 8
    スモールビジネス向けに統合型クラウド※1 ERPを提供
    Providing integrated cloud ERP for small businesses
    統合型クラウド会計ソフト
    2013年3月~
    日本のクラウド会計ソフト市場
    シェアNo.1※2
    提供機能:
    請求書
    経費精算
    決算書
    予実管理
    ワークフロー
    内部統制
    統合型クラウド人事労務ソフト
    2014年10月~
    スモールビジネスの人事管理市場
    売上金額シェアNo.1※3
    提供機能:
    勤怠管理
    入退社管理
    給与計算
    年末調整
    マイナンバー管理
    その他プロダクト
    ※1:クラウド=クラウドサービスの略。ソフトウェアやハードウェアを所有することなく、ユーザーがインターネットを経由してITシステムにアクセスを行えるサービス
    ※2:リードプラス「キーワードからひも解く業界分析シリーズ:クラウド会計ソフト編」(2022年8月)より
    ※3:従業員100人未満および従業員100~300人未満の企業で売上金額シェアNo.1(2020年度)。ITR「ITR MARKET VIEW:人事・給与・就業管理市場2022」より

    View full-size slide

  9.  
    freeeにおける
    Product Design

    View full-size slide

  10. 10
    Product
    Manager
    Product
    Designer
    User
    Business
    System
    Technology
    Product Designerの役割
    Roles of Product Designer
    ユーザー、ビジネス、テク
    ノロジー、法制度を理解
    し、解決する課題と優先
    順位を決め、ソリューショ
    ンを設計し、提供する

    View full-size slide

  11. 11
    計画
    調査・分析
    要求・要件定義
    設計・作成
    評価
    開発
    品質保証
    Product Designerの仕事の流れ
    Workflow of Product Designer
    HCD(人間中心設計)プロセスをベース
    にProduct Designを行っていま

    View full-size slide

  12. 12
    Product Designerの仕事の流れ
    Workflow of Product Designer
    調査・分析 ユーザーインタビュー等を行い、利用状況の調査し分析する
    要求・要件定義 ユーザーの要求(ニーズ)を特定し、それに対しプロダクトとして提供する価値、
    内容を定義する
    設計・作成 定義された要求・要件を満たす構造、フロー、画面の設計を行う。狭義の情報設計・IA
    評価 設計に基づき、プロトタイピングを行い、各種専門家によるヒューリスティック評価や、ユーザーテストを行い、
    妥当性を評価する
    開発 開発段階で様々な事情で実装できる機能が変化していく中で、要件を満たすべく取捨選択に関与し、
    必要に応じて再設計を行う
    品質保証 QAと共に開発したプロダクトをテストして、動作を保証する

    View full-size slide

  13. 13
    デザイナー体制
    Designers
    デザイナーは各事業部に所属します。特定のプロ
    ダクトのデザインを行っている『プロダクトデザイ
    ナー』と、新領域探索・企画を行う『エクスペリエン
    スデザイナー』、特定のプロダクトに紐づかずに
    Product Designの全体的な品質向上を目指す
    『デザイン基盤』という3つの役割で構成されてい
    ます。
    基盤















    プロダクト・エクスペリエンス
    デザイナー
    デザイン基盤

    View full-size slide

  14. 14
    freeeのデザイナーの働き方について
    各デザイナー職種は、全⽇原則出社となります。
    週5出社とすることで⼩さいお⼦さんの⼦育てや近親
    者の介護などの理由で⽇常⽣活との両⽴が困難にな
    る⽅については、重要なMTG等は極⼒出社して参加
    することを前提として、週1~2⽇の在宅勤務は可能で
    す。その他の事情についても、⼈事部⾨の判断で在宅
    勤務を可能とするケースもあります。
    加えて、ご⾃⾝、ご家族の体調不良やお⼦さんの学
    校⾏事など、突発的な事情があった場合は在宅勤務
    は可能です。

    View full-size slide

  15. 15
    プロダクトデザイン品質向上
    HCDプロセスを各プロダクト、プロジェクトで実践
    し、ユーザーの課題、使いにくさを解決するUIデ
    ザインを提案し、プロダクトへ反映していきます。
    また、プロダクトデザインチーム内でプロダクト、
    プロジェクトを越えたナレッジ共有、相互レビュー
    を行うなど、スキル向上を図ったアクションも実施
    しています。
    UI設計
    業務要件を取り入れ、デザインシステムおよびア
    クセシビリティ基準に則ってUI設計を行います。
    プロダクトデザイナー
    Product Designer
    共通仕様の方針やプロダクト・事業部を跨るプロダクトデザインの方針決定するチームです。新た
    に作るだけでなく継続して改善し、プロダクトをより良い方向へ導いていきます。
    情報設計
    プロダクト全体におけるユーザーシナリオを整理
    し、プロダクト内のサイト構造を最適化していきま
    す。

    ● 様々なレイヤーの情報の是正
    ● プロダクト・サービス間の一貫性、相互の確

    ● カテゴリの再整理

    View full-size slide

  16. 16
    リサーチプロセスの整備
    リサーチ実務に加えて、リサーチの環境づくりも
    チームの役割の一つです。
    他チームでもリサーチは実施されており、リサー
    チステップの効率化が求められています。講習や
    フォーマットの整備などを通して、リサーチしやす
    い環境を作っています。
    コンセプト検討
    プロジェクトチームと共同でコンセプトデザインを
    行います。メンバーによっては直接プロトタイピン
    グを実施するケースもあります。
    リサーチ結果を右から左に「渡す」ことはせず、
    チームでユーザーを理解し、共にデザインするこ
    と。freeeの強みはここにあります。
    調査分析
    テーマに応じて、事業企画、プロダクトマネー
    ジャー、プロダクトマーケ、プロダクトデザイナーら
    と共同で調査・分析を実施します。
    リサーチを特別視せず、適切に分担して行いま
    す。原理主義ではなく、現場にハマるリサーチを
    追求していきます。
    エクスペリエンスデザイナー
    Experience Designer
    ユーザーリサーチによる課題の発見、調査結果に基づくコンセプト検討、およびプロジェクトの計画
    立案サポートを実施するロールです。また、チーム内のユーザー理解の促進や、社内におけるユー
    ザーリサーチの環境作りも行っています。

    View full-size slide

  17. 17
    アクセシビリティ基準
    プロダクトだけでなく freee が世に出すアウトプッ
    トすべてが満たすべきアクセシビリティの基準を
    WCAG2.1 に沿って策定しています。
    また、デザイナーに限らず開発チーム全体でアク
    セシビリティの高いプロダクトが作れるよう、チェッ
    クリストの整備などのプロセス整備もしています。
    プロダクト横断の共通機能
    各プロダクトが共通で利用するアカウントやマス
    ターデータ、申請承認のような共通機能のデザイ
    ンを通して、ユーザーがプロダクトを横断して効率
    的に業務ができる状態をつくっています。
    高い速度で高いデザイン品質の開発サイクルを回していくことを目的に、ガイドラインやUIコンポー
    ネントや共通機能の整備を行う専門チームです。freeeのプロダクト全体を横断して一貫した高品質
    のUIを提供していくための基盤づくりをしています。
    デザイン基盤
    Design System
    デザインガイドライン
    画面パターンや操作パターンを類型化して、それ
    ぞれの設計方針を定義し、デザイナーやエンジニ
    アが少ない労力でそれらの機能を実現する仕組
    みを整備しています

    ● 一覧画面、詳細画面の設計方法
    ● 一括編集UIの配置方法
    ● モーダルダイアログの利用パターン

    View full-size slide

  18.  
    デザイン事例

    View full-size slide

  19. 19
    事例① freee人事労務での給与計算ロジックの可視化
    ● 従来の課題
    ○ ユーザーが入力した勤怠や従業員情報をもとに、
    システムで給与計算を行った結果のみを表示して
    いた
    ○ 他ソフトから乗り換える際に結果のみでは金額ズ
    レの要因を特定できず、導入までのハードルになっ
    ていた
    ● 解決策
    ○ 給与の計算ロジックを表示し、金額ズレの発生要
    因を特定しやすくした
    ○ 関連する設定に1クリックで辿れるようにした

    View full-size slide

  20. 20
    事例① freee人事労務での給与計算ロジックの可視化
    ● リリース後のユーザーの声
    ○ 「給与の計算式は複雑で、端数で一円ズレるようなことがある。これまではズレの原因を見つけるのに
    大きな労力を割いていたが、この機能でどこに原因があるか一目でわかるようになった。」
    ○ 「特にソフトを移行する際にはそのソフトが本当に信用できるのか不安になるが、計算式が見えている
    ことで安心してソフトを利用できます。従業員の給与明細にも展開してほしい!」
    ● インパクト
    ○ 新たにfreee人事労務導入ユーザーの稼働早期化に貢献

    View full-size slide

  21. 21
    事例② freee請求書の書類リアルタイムプレビュー
    ● 従来の課題
    ○ freee会計の請求書機能では入力後、PDFダウン
    ロードしないと出力される形にならないため、都度
    確認の手間がかかっていた
    ○ 書類に直接入力しているような体験であったため、
    入力エリア・方法に制約があり、入力のしやすさが
    担保できていなかった
    ● 解決策
    ○ 書類情報の入力しやすさ向上と、出力される書類
    をいつでもプレビューできることを両立できるように
    した
    Before
    After

    View full-size slide

  22. 22
    事例② freee請求書の書類リアルタイムプレビュー
    ● ユーザビリティテストでのユーザーの声
    ○ 「請求書作成時は相手にどう請求書が見えるのか気にする。例えば、明細の改行の位置だったり、相
    手にとって見やすいか、細かいところまでこだわっている。入力時にプレビューできたり拡大表示できる
    と確認のしやすさが上がって良い。」
    ○ 「freee会計の請求書機能と比べて、入力すべき項目が集まっているので入力しやすい。」

    View full-size slide

  23.  
    おまけ

    View full-size slide

  24. 24
    freeeのデザイナーたちが投稿した記事をお読みいただけます。
    どういうふうに仕事に取り組んでいるのか、どんな人達が働いているのか、ぜひ一度覗いてみてく
    ださい。
    freee Design Magazine
    中途での転職をご検討中の方に参考になるかもしれない記事をいくつか抜粋します。
    ● freeeの中途デザイナーって何やってるの①
    ● freeeの中途デザイナーって何やってるの②
    ● freeeの中途デザイナーって何やってるの③
    freee Design Magazine

    View full-size slide

  25. 25
    書籍
    ● Webアプリケーションアクセシビリティ
    ● デザイニングWebアクセシビリティ: アクセシブルな設計やコンテンツ制作のアプローチ
    ● コーディングWebアクセシビリティ - WAI-ARIAで実現するマルチデバイス環境のWebアプリケーション
    ● インクルーシブHTML+CSS & JavaScript 多様なユーザーニーズに応えるフロントエンドデザインパターン
    freee デザイナーが書いた本
    freeeの福利厚生と働き方について
    ミッションにワクワク、信頼できる仲間との繋がりを築く、インパクトを通じて成長する、という
    3軸を基に、福利厚生を拡充しております。ボトムアップで作られた制度なども多く存在しています。

    View full-size slide

  26.  
     
    Thank you!

    View full-size slide