This was a real-world project for a B2B startup aimed at simplifying document verification and correction using AI, starting with the KPD client and eventually expanding to other companies.

This was a real-world project for a B2B startup aimed at simplifying document verification and correction using AI, starting with the KPD client and eventually expanding to other companies.

Project Specs

SAAS (Software as a service), B2B
timeline: Sep-Oct 2024

My Role

The team included developers and a product manager. As the sole product designer, I conducted a Research, identified pain points, created wireframes and final UI, and collaborated with developers.

My Design

What Challenges we have?

I identified that one of the challenges with our product was the time required for user interviews and testing. For our initial MVP, we decided to conduct internal testing with colleagues. Once development is complete, we plan to test with external users for more comprehensive feedback.

I conduct an interview with the STAKEHOLDER to understand what exactly is the problem. there are many issues but this issue was one of the most important issue:

I identified that one of the challenges with our product was the time required for user interviews and testing. For our initial MVP, we decided to conduct internal testing with colleagues. Once development is complete, we plan to test with external users for more comprehensive feedback.

I conduct an interview with the STAKEHOLDER to understand what exactly is the problem. there are many issues but this issue was one of the most important issue:

Business KPIs

Improve task completion speed, boost adoption, and stay within budget.

Document Workflow

Document Workflow

Who Interacts with This Software and How?

Our target audience includes Operational Directors and other employers responsible for managing document workflows. They need a solution that lets them view documents on the left, identify errors efficiently, and correct them seamlessly in fields on the right.

How might We design and develop these screens to help users find mistakes more quickly and correct them efficiently?

Existing Design

Key Solutions

The Product Manager handed me a brief for a full redesign, aiming to improve usability, streamline document workflows, and enhance the user experience—all while keeping the core functionality intact. So, I decided to start fresh and design from scratch.


I began by sketching out this wireframe, but soon, the client had some questions and feedback:


• If there’s a PDF with multiple pages, where should it be displayed?

• The comment section isn’t necessary for this MVP.

First Wireframe

in the Second Wireframe

  • "Document name" was added

  • Comment section was removed

  • I emplemented the idea of Gategorizing Documents into Clear Sections

Second Wireframe

How I solved the Problem?

I suggested tooltips to provide quick, helpful information when users hover over or click elements. These pop-ups guide users with tips or instructions while keeping the interface clean.

The Next idea was “Auto Correct” that Use LLMs to automatically suggest corrections based on patterns or previous corrections. Users can accept suggestions with a single click.

Another Solution Embed a chatbot or interactive assistant in the corner of the interface to guide users through the correction process or answer queries in real time.

The other idea was Sections that can

  • Break document into clear sections (e.g., client info, invoice details)

  • Use icons for every section

  • Apply color coding to different document sections (e.g., blue for financials)

The next Idea was Editable Contrast that can

  • Add dynamic expansion and collapse for sections being corrected

  • Highlight editable fields with visual contrast (e.g., bold borders)

  • Highlight errors within cards to direct user attention

The last solution was Focused Review that can

- Zoom in on specific fields for focused error-checking by buttons:

- Correction mode

- Document view

How We Chose Our Final Solutions Using Decision-Making Tools

We then held a meeting with the team, which included two developers, one data analyst, one business analyst, and the stakeholder. I suggested using an Impact-Effort Matrix to determine which features we could implement in this MVP.

So based in the picture, we decided to implemented these solutions.


1. Break Document into Clear Sections

Organizing the document into distinct sections (e.g., client info, invoice details) simplifies navigation and accelerates the correction process.


2. Use Icons for Every Section

Section-specific icons provide quick visual cues, enabling users to identify key areas effortlessly.


3. Add Dynamic Expansion and Collapse for Sections

Expandable and collapsible sections allow users to focus on one area at a time, enhancing workflow efficiency.


4. Highlight Errors within Cards

Emphasizing errors within cards immediately directs users' attention to mistakes, facilitating swift correction.


5. Highlight Editable Fields with Visual Contrast

Distinctive borders around editable fields make them instantly recognizable, expediting the correction process.


6. Zoom in on Specific Fields for Focused Error-Checking

A zoom feature for individual fields enables users to focus on and correct errors with precision.

Iterations

We conducted user testing with internal users. I assigned them tasks, such as finding errors in the header, and timed their performance. Four out of five participants were able to locate the mistake in under two minutes.

The Existing Design

The Existing Design

First Wireframe

Second wireframe after first Iteration

The Existing Design

What I learned

This project taught me how to balance user needs with business goals in a real-world setting. I learned the value of listening to user feedback, improving designs based on their input, and focusing on creating solutions that truly simplify their work. Working with different teams also helped me understand how to turn challenges into opportunities for better design.