Google Maps Integration for Mileage Expenses (UX/UI)

Travel and Expenses management app

Table of Contents

- Context

- Design Solution

- Results

- Design process

Context

My task for this project at Emburse Captio was to seamlessly integrate Google Maps into our B2B travel and expenses app. The objective? Simplify the mileage expense creation process. Now, users can effortlessly input destinations, letting our system autonomously calculate distances. The result is a user-centric solution that not only meets but exceeds our goal, significantly boosting efficiency and accuracy in expense management.

Design Solution

With the new solution, users can now generate a mileage expense in just two clicks. Offering a clear visualization of both origin and destinations, the system adds convenience by enabling users to easily convert their route into a roundtrip with just one click. Even during multiple short journeys within the same city, users retain the option to manually create mileage expenses, providing flexibility alongside streamlined efficiency.

Home page with all created expenses

Creation dial with the three types of expenses

Mileage expense detail

Route creation page

Auto fill location browser

Route creation page filled

Route creation page filled and detail of the generated map

Results

We managed to create a great impact with this feature. The new feature "Routes" got a noteworthy 37% adoption rate. On the other hand, the revelation of the roundtrip capability, unveiled through research, proved to be a game-changer, embraced by a staggering 70% of users when creating mileage expenses.

✨ New feature "Routes": 37% adoption rate
✨ Roundtrip capability: 70% adoption rate

Process

My process kicked off with a thorough analysis of competitor solutions, uncovering insights like the Roundtrip capability. Establishing a clear big picture through information architecture, I then presented diverse solutions via wireframes to collaborate with PM and engineers. Upon alignment on a direction, I transitioned to final visuals, subjecting the solution to user testing—successfully validating the Roundtrip concept. Iterative refinement with the team ensued, culminating in a comprehensive project handoff inclusive of user flows and pixel-perfect specifications.