Trip Expenses

Mobile App, Web Application

This project presents a proposed user interface (UI) for an airline company's internal system. The specific focus is on a screen designed to streamline employee expense management during business travel. The interface integrates features for managing costs, bookings, additional expenses, and cash advance requests, ensuring a comprehensive and user-friendly experience for the airline's employees.

Project Goals

Create a single page for Trip Expenses.

Include a plethora information like bookings, other expenses and cash advance.

Have a smooth user flow.

Create a unified design system.

The Challenge

The goal was to create an information-rich page that consolidated all trip details, from basic information like origin and dates to bookings, traveler profiles, and expenses. The key challenge was achieving this without an overwhelming user experience, especially on mobile devices with limited screen space.

Understanding User Needs (Limited Scope):

To get a starting i used existing knowledge of user needs in travel management applications. I considered common pain points like difficulty finding specific information, managing bookings, and navigating complex interfaces.

Based on user research, I created a sitemap to organize the app's content logically and intuitively. This ensured users could easily find what they're looking for.

From Blueprint to Prototype

The design process moves from a well-defined user flow and a comprehensive UI kit to a functional prototype built in Figma. This crucial step translates static plans into an interactive user experience for the travel expense management app.

The UI kit acts as a library of pre-built visual components – buttons, icons, color palettes, and typography styles – that will form the foundation of the app's visual identity. Each element is meticulously crafted for consistency and brand alignment.

Figma becomes the design platform. Leveraging the user flow, each step is meticulously translated into a high-fidelity screen. Take booking a flight, for example – the Figma interface will mirror the user journey, allowing for interactive exploration of the booking process. Users can interact with elements like options, menus, and functionalities just as they would in the final app.

This translation involves layering UI kit elements onto Figma frames. Text styles are applied, icons are placed, and button interactions are programmed. With each element in its designated position, a cohesive and visually appealing screen emerges.

Figma's strength lies in its ability to create interactive prototypes. Once screens are built, they're connected through user flows, replicating real-world app behavior. Users can test-drive the app, navigate between functionalities, and provide valuable feedback. This allows for early identification and refinement of usability issues before development begins.