Redesign of the Travel & Expense Management Approval Dashboard


  • Role: UX Research, Wireframing & Prototyping, Usability Testing, UX UI Development
  • Project Timeline: 4 Weeks

Project Overview

A Travel and Expense (T&E) Management System is a specialized software solution designed to help organizations automate and manage the process of booking business travel, tracking expenses, and ensuring compliance with company policies. It enables businesses to streamline travel arrangements, expense reporting, and reimbursement workflows, making it easier for employees and finance teams to handle travel-related tasks efficiently.

Problem Statement

The current travel and expense management approval dashboard is inefficient and lacks intuitive design, causing delays in processing and approving expense reports. Approvers struggle with navigating cluttered interfaces, filtering critical information, and identifying compliance issues. A redesign is needed to streamline the approval process, improve data visualization, and provide clear, actionable insights for managers. The new dashboard should enhance usability, reduce processing time, and support compliance monitoring.

Business Goals & Objectives

  • Increase Efficiency: Reduce approval processing time
  • Improve Compliance Monitoring: Ensure policy violations are flagged accurately
  • Optimize Decision-Making: Provide data-driven insights to approvers for faster and more informed decisions
  • Boost Adoption Rates: Encourage more managers and finance teams to actively use the system by improving the UI and reducing friction
  • Enhance Usability & Streamlined User Experience: Simplify the dashboard’s interface to improve navigation for approvers and introduce an intuitive interface with clear navigation.
  • Enhanced Data Visualization

Challenges

  • Complex Navigation: The previous version had a cluttered and inefficient layout that confused users.
  • Delayed Approvals: Lack of clear action points led to delays in processing expenses.
  • Poor Compliance Tracking: The system did not highlight policy breaches effectively, leading to increased manual checks.
  • Low User Engagement: Users avoided the system due to its cumbersome design, leading to inconsistencies in approval workflows.

Research Methods

A combination of secondary research and qualitative user research was conducted to empathize with users and understand their pain points. The research included: Examining existing expense management tools to understand industry standards. Conducting structured interviews with finance managers and team leads to understand workflow pain points. Collecting quantitative data on common issues faced with approval dashboards. Assessing the current system for usability flaws and inefficiencies. Based on the understandings from the research we created user personas representing the target audiences and designed empathy maps and user journey maps.

User Journey Map

Research Insights

  • Cluttered UI leading to confusion & poor visual hierarchy
  • Inefficient workflows causing slow approvals
  • Delays in identifying compliance violations
  • Lack of clear prioritization in pending approvals

User Needs

  • Streamlined, intuitive interface.
  • Quick access to key insights and pending approvals
  • Automated compliance checking and flagging
  • Clearer visual representation of expense categories & pending actions

UX Redesign Solutions

The design considerations and design principles for the dashboard were as follows
  • Clarity Simplifying the UI to reduce cognitive load.
  • Consistency Maintaining uniformity in design elements.
  • Efficiency Reducing the number of steps for key tasks.
  • Accessibility Ensuring WCAG compliance with high contrast, keyboard navigation.
  • Cleaner & More Structured Layout Introduced a cleaner, grid-based layout with proper white space to enhance readability and structure. Ensured a well-structured layout that helps approvers quickly identify key information and take action without being overwhelmed.
  • Enhanced Visual Hierarchy & Data Presentation Introduced typographical hierarchy with clear titles, bold expense amounts, and color-coded compliance flags for policy violations. Improved scanability, allowing users to prioritize approvals efficiently.
  • Intuitive Navigation & Quick Actions Streamlined navigation with a sticky top menu for frequently used actions and inline quick-action buttons on each expense card. Reduces the number of clicks required for common tasks and makes the workflow more intuitive.
  • Improved Compliance Indicators & Alerts Automated compliance flags with color-coded alerts (red for policy violations).

High Fidelity Prototype

Approval Dashboard

Let's Connect

Feel free to reach out for any oppurtunities or just a friendly hello!
pgaurank@gmail.com
Copyright © 2020 All rights reserved | Gaurank M. Patil UX/UI Designer & Developer