Personas

Employees

The employee is responsible for tasks within their area of expertise and receives assignments from their managers. They manage their day independently and efficiently, tracking the progress of tasks and goals.

Financial tasks, such as purchase requests and expenses, are not part of their regular duties, but occasionally they are required to handle them. They prefer to complete these tasks quickly to focus on their primary work.

When the employee also serves as a manager, they are responsible for approving or rejecting expenses and requests from their team members, ensuring they comply with budget constraints and tracking their execution. The manager aims to complete these tasks quickly and efficiently while maintaining budgetary order.

AP processor

AP Controller

AP approver

CFO/CEO

Background

We created an AI-based system designed for non-financial employees, centralizing all their open tasks in one interface.

The system allows employees to track all requests and expenses requiring their approval, while simplifying the process. This enables them to complete tasks faster and more efficiently without needing to navigate through multiple screens or modules.

Goal 1

Improving Employee Efficiency

The system improves employee efficiency by showing all open tasks in one place, allowing them to quickly complete and respond to requests. With the new interface, employees save time and complete tasks in a more organized and focused manner.

Goal 2

Reducing Task Completion Time

The system reduces the time needed to complete tasks by automating processes and streamlining the interface. Employees no longer need to search or switch between different screens to manage requests, resulting in faster task completion and simpler.

Creating a new request for an employee who is not a manager

The user can freely type their request using natural language, without needing to follow a strict format or fill out complex forms.

What do you want to purchase?

Detail your purchase and we’ll generate your request form.

PowerBI for my team

Manually add purchase details

The system automatically detects and fills in the purchase details.

It classifies the request, identifies it as a subscription payment, and suggests relevant categories such as “monthly subscription” or “annual subscription.”

It also detects the amount and the vendor’s name.

If the vendor already exists in the system, their details are filled in automatically. If not, the system will create a new vendor as needed.

The AI-powered system addresses one of the main goals of the project: reducing task completion time and approval time for requests.By automating the process, the system makes it faster and easier for employees to complete tasks efficiently.

Employee-Manager Perspective

Slack integration

The manager receives an update about a new request via Slack integration.The Slack notification includes the key details of the request, allowing the manager to approve it directly within Slack or open the request in the system for further review.

Request Page

The system automatically generates a page that centralizes all the request details, including vendor information, the budget bar, and all relevant data such as files (if available) and internal and external correspondence.

Manager Home Page

I led the UI design of the main records page, which centralizes all of the employee’s open items — including requests, invoices, expenses, and pending tasks.

The goal was to create a clear, actionable overview that helps employees quickly understand what requires their attention and act on it with minimal effort.

Exploring Design Solutions

It was important for me to explore new layout directions to ensure the interface is clear, accessible, and action-oriented.

based on the PRD

A Kanban board layout with two columns.one for "To-Do" tasks and another for archived items, ensuring efficient task management and quick access.

A dashboard page with a central table box, featuring tabs for easy navigation and data organization.

After exploring different layout options,

I proceeded to the record component and began designing it.

The Outer Structure

The component is built as a work card with consistent inner and outer padding.

1920*1080

1440*800

1280*700

Slot

The component includes a flexible slot designed to hold variable content.

This decision was made with a long-term vision in mind, allowing the record card to be reused across the system with different types of content depending on context.

The width, height, and padding of the element are fixed.

States guidelines

I created clear guidelines for every state: Regular, Hover, Press, Processing, Selected ,On focus, Selected Focus. Each state follows consistent rules for colors, icons, and available actions.

I divided the record into six distinct sections,

each with its own specific design and development guidelines.

Example

In the record type section, there is a unique icon for each type, with detailed guidelines regarding resolution, size, and positioning to ensure design consistency.

Type sectionIn the record type section, there is a unique icon for each type, with detailed guidelines regarding resolution, size, and positioning to ensure design consistency.

There are five types of records: bill, expense, card expenses, request and card

The design of the avatar does not change in all states of the record

Expense records can be a group of records

The icon maintains the same size across all resolutions