課題
日本の法人経費管理には、次のような大きな課題があります。
- 紙ベースの仕組み： 多くの企業がいまだ紙の領収書や帳票に依存しており、記入ミスや紛失、さらには不正の温床にもなりかねません。厳格な法定報告要件がこの非効率さに拍車をかけ、企業はデジタル化への移行に二の足を踏んでいます。
- 法人カードの利用ハードル： 法人カードは、十分な資本を持たない中小企業やスタートアップには発行されにくいのが実情です。この制約が経費管理を複雑にしており、とりわけ通勤費のように必ず発生する精算業務で負担となっています。
- 複雑な業務フロー： 経費の登録、領収書のアップロード、支払いの確認、会計ソフトとの連携まで、経費管理には専門的なタスクが数多く含まれ、しかもその内容は利用者の役割（従業員か管理者か）によって大きく異なります。
担当した役割
私は事業が急成長するフェーズでチームに参画し、次の領域を担当しました。
- ユーザー体験の再設計： 使いやすく、アクセシブルで、今後の機能追加にも耐えうるプラットフォームにすること。
- ビジュアルアイデンティティの強化： Staple Cardのデザイン、プロダクトサイト、各種ビジュアルアセットの刷新。
- 情報アーキテクチャの改善： 多様な役割とユースケースに対応できるよう、複雑な構造を整理すること。
- デザインシステムの構築： 拡張性の高いフロントエンド開発を支える、一貫したデザインシステムと独自CSSフレームワークの整備。
難しかった点
このプロジェクトの複雑さは、機能の幅広さと、ユーザー層の多様さにありました。
- 専門性の高い機能群： Stapleは、経費の作成、領収書のアップロード、支払いの確認、会計ソフトとの連携、ユーザー権限の管理、経費の承認、財務データの書き出しなど、多岐にわたる業務に対応しています。
- 役割ごとに異なるユースケース： 従業員には直感的に支払いを管理できる仕組みが必要な一方、管理者には統制、承認、レポーティングのための堅牢なツールが求められます。この両者のバランスを取ることが大きな課題でした。
プロセス
エンジニアとの協働
エンジニアと密に連携しながら、技術要件とビジネス要件の双方を満たしつつ、全体のユーザー体験を高める直感的なインターフェースを設計・実装しました。
情報アーキテクチャの再構築
使いやすさを高めるために、次のことを行いました。
- プラットフォームの情報アーキテクチャを再構築し、従業員と管理者の双方に明確な導線を用意しました。
- 機能をユーザーの業務フローに沿って論理的にグループ化し、手戻りを減らして、最小限の手間でタスクを完了できるようにしました。
デザインシステムの構築
デザインと開発の両方を効率化するために、次のことに取り組みました。
- 再利用可能なコンポーネントと詳細なドキュメントを備えたデザインシステムを作成し、プラットフォーム全体の一貫性を担保しました。
- アトミックデザインの考え方とSarah Dayan氏によるこの記事から着想を得て、その概念を独自のCSSフレームワークへと落とし込み、チームが素早く効率的にページを構築・拡張できるようにしました。
解決策
最終的なデザインは、当初の課題に的確に応えるものとなりました。
- 経費管理の効率化
- 従業員は直感的なインターフェースから、経費の作成、領収書のアップロード、支払いの管理を素早く行えるようになりました。
- 管理者は、業務フローの把握、承認プロセスの設定、レポートの作成を容易に行えるツールを手にしました。
- 統一されたデザインシステム
- デザインシステムが今後の機能開発に向けた一貫性と拡張性のある土台となり、フロントエンドの実装時間を50%削減しました。
- ブランドプレゼンスの向上
- 刷新したStaple Cardのデザインとプロダクトサイトにより、ブランドのビジュアルアイデンティティと市場での存在感が強化されました。
- 財務管理の負担軽減
- 従業員が法令要件を満たしながら自律的に支払いを扱えるようになり、経理担当者の管理負担が軽くなりました。
成果
丁寧な設計とチームでの協働を通じて、日本特有のビジネス環境に合わせたキャッシュレスな法人決済ソリューションという目標を実現できました。刷新されたプラットフォームは、あらゆる規模の企業にとって経費管理を効率化し、拡張性とアクセシビリティ、そして従業員と管理者の双方にとって使いやすい体験を実現しています。