PageAI – Intelligent Document Processor


PageAI is the first big strategic project that I got to work on as a lead UX/UI Designer right after I joined SKAEL. PageAI is an intelligent document processor (IDP), which its main feature is to extract data from any documents such as PDFs, images, spreadsheets, emails, etc. This product is a comprehensive and competitive IDP solution, which is also an integral component of the automation platform.


For V1: My team and I focused on building out the PageAI solution and focus on extraction for invoices only. The goal is to allow customers to automate business processes that include invoices easier and faster.

For V1. 1: The goal is to enable customers to manually overwrite (input data) during Document Validation easier (user validate error/invalid data that PageAI can't recognize).


Lead UX/UI Designer
Responsible for defining constraints, competitive research, ideating, wireframing, deliver final mockups to engineers, and iterating based on customers' feedback.

The Team

1 UX/UI Designer
1 Product Manager
10+ Engineers (Front-end & Backend)


August 2021 - Present
(Ongoing project)

Why PageAI is an important project?
  • PageAI enables users to process documents easier (doesn't need to know technical knowledge) and faster (PageAI can process many invoices at the same time).
  • PageAI would elevate SKAEL's automation platform, which provides more use cases for SKAEL's customers (such as processing invoices, validation checks, etc. ).
  • PageAI improves users productivity and makes users' life easier because PageAI can be integrated into SKAEL's main automation platform, so now users can automate more tasks.

Design Process

Competitive Research

I collaborated with the Product Manager to conduct research on competitors who has been leaders in IDP solution such as: IQBot (Automation Anywhere), Data Extraction Component (UiPath), and By doing that, we acquired the knowledge of:

  • What are the available IDP solutions on the market?
  • What makes those solutions become the market leaders?
  • What are the good and bad UX pain points that those solutions have?
User Flows

We created 3 main user flows for PageAI:

  • The general IDP User Flow: we came up with this based on our research on other competitors' IDP solutions, with this general user flow, we can determined the main components for PageAI user flow.
  • PageAI Setup Flow: this flow contains all the main components and functions that would be included in the Setup Flow.
  • PageAI Run-Time Flow: this flow demonstrates how PageAI can be integrated into the main automation platform.
PageAI Version 1 Mockups

The product manager and I agreed that we should go for a mid-fidelity mockups first so we can have the mockups for engineers to start develop PageAI. Since Page AI is a big strategic product so the team wanted to move fast and have the beta release as soon as possible.

View Figma File

PageAI Beta Demo

This beta demo of PageAI was shown to existing customers (San Diego Housing Commission, Asurion, etc. ) and other potential prospects for feedback.

PageAI V1. 1 Iterations And Enhancements

Iterations and enhancements were made based on customers feedback and also aligned with the go-to-market (GTM) team strategies (use cases based):

  • When there are many field values, the right column became very clutter and hard for users to navigate and determine which field is which.

    Solutions: Allow users to click on the value they want in the document view (left side), and the field value on the right column will automatically expand.
  • Users couldn't validate values that PageAI didn't recognize during the extraction process.

    Solutions: Created and implemented 'Type-in' function, which allows user to manually type in the field value they want to validate documents even when that values didn't get extracted. I also proposed that we should utilize value type make sure PageAI can recognize if the users type in inappropriate field values.
  • PageAI couldn't process invoices that contain table format, which many potential prospects and customers demand this function, and the function also align with PageAI roadmap.


This is one of the project that I'm most proud of since it's one of the big important project at SKAEL because despite the lack of resources and constraints (technical, time, capacities), I was able to deliver the full product mockups, and PageAI was beta-released. Here are the main outcomes:

  • The stakeholders, customers, and potential prospects were very happy and exciting to try out PageAI. The GTM team also leverages PageAI to get new potential leads and deals.
  • PageAI helps SKAEL with more competitive edge because customers can now integrate PageAI into SKAEL automation platform and automate even more complex tasks and use cases that involves documents processing, which increases productivity and reduces time & efforts.

Here are the valuable lessons I learned from working as a lead designer in this project:

  • At the beginning of the project, the processes and frameworks were very 'waterfall', which then, I collaborated with the product manager, engineer leads and project managers to assessed and proposed new way to communicate the information in a more linear and agile way.
  • Estimating all the constraints and resources to define and communicate the exact scope, which helps collaboration between cross-functional teams more effectively.
  • Always acquire knowledge of what the engineers and data scientists/analysts can/can't do to ideate solutions that utilize the technology.
  • Always looking at the bigger picture when brainstorming and introducing new solutions/ideas. This will help minimizing the gap between GTM team, Marketing team and Product team. It also help preventing scalability, and UI components maintaining issues, etc.