Xeroのインボイス一覧の
リデザイン

ROLE プロダクトデザイナー
CLIENT Xero
TIMELINE 2022年6月 – 9月
PLATFORM iOS & Android

Background

キャッシュフローの確認だけのためにデスクトップ版へ切り替えていた中小企業オーナー

「Xero Accounting App」は、中小企業オーナー向けのモバイル会計アプリです。しかし以前のインボイス一覧のデザインはアクセシビリティに課題があり、キャッシュフローを素早く把握しづらい状態でした。そのため、ユーザーはデスクトップ版を使わざるを得ませんでした。

「Xero」の新しいデザインシステム導入にあわせて、モバイル版のインボイス一覧をリデザインしました。

改善前の請求書リストデザイン

前のデザイン

Research

中小企業オーナーがキャッシュフローを把握し、次の行動に自信を持てるようにするには?

17名の中小企業オーナーを対象にしたアンケートから、インボイス一覧の状態やタスクにかかわらず、「名前」「金額」がもっとも重要な情報であることが明らかになりました。これらの情報は、次の3つの問いに答えるために必要でした:

  • 誰が支払いを滞らせているか?
  • いくら?
  • 何を優先すべきか?

デザインとエンジニアリングのチームとワークショップを通して、「名前」と「金額」を優先して表示するという改善方針を定めました。

アンケート結果のヒートマップ

アンケート結果のヒートマップ

アイデア出しワークショップ

アイデア出しワークショップ

機能の優先度付け

機能の優先度付け

Design

ステータスを優先したレイアウト

リデザインでは、期限超過・期限間近のインボイスを優先して表示し、超過日数や残り日数をインライン表示することで、素早い意思決定をサポートしました。

また、名前・金額・支払期日・発行日での並び替えを追加しました。

BEFORE / AFTER

BEFORE / AFTER

Outcome

アクセシビリティとタスク完了率を向上し、将来的な機能拡張の基盤

リデザイン(Android版:2022年10月、iOS版:2023年3月リリース)により、インボイス一覧全体のアクセシビリティが向上し、現代的なデザイン基準に沿ったものになりました。ユーザーはより短時間でインボイスを見つけられるようになり、一覧を確認する際の負担が軽減されました。

また、「Xero」の新デザインシステムの導入により、技術的負債を削減し、チームが将来的な機能追加に備えられるようにしました。

ローディング・選択・並び替え状態

ローディング・選択・並び替え状態

インボイス一覧の種類

インボイス一覧の種類

インボイス一覧の検索

検索

NEXT PROJECT

ライブサービスゲーム向けUXシステムデザイン