Led the design, research, and implementation of a solution that replaced inefficient manual document extraction with a faster, more reliable process. It achieved over 90% accuracy, processed documents in under 3 seconds, scaled to handle 100,000+ documents daily, and resolved 95% of issues within 24 hours—delivering speed, reliability, and exceptional user satisfaction.
My Role
I led UX research, UI design, and information architecture. I positioned UX as a key advocate for user-centered design principles among business stakeholders throughout the product design and development processes.
Scrum Team
Project Manager | Product Owner | SMEs | Engineers | Database Developers | Data Analyst | QA Analysts | Stakeholder Representatives.
Project Backstory
XTM Document Extraction is a process of data extraction from diverse file formats, streamlining workflows and improving accuracy within the XTM translation management system.
Pain Points
The initial document processing methods are time-consuming due to the manual data entry approach. This leads to backlogs, an increased risk of human error, and delays in tax audits. Too many back-and-forth emails lead to omissions and loss of communication in an ongoing project.
Business Goal / Outcome
Develop a tool that:
Automates data extraction from various formats (PDFs, Word files, scanned images) within the XTM platform, streamlining workflows, improving translation accuracy, and enhancing user experience for tax auditing.
Ensure compliance with each client’s data residency requirements, enable users to collaborate seamlessly, and extract, review, and export documents effectively.
Key Outcomes:
- Design a new application
- Strong conversion rate
- Measure success: Analytics/Research/Design/Testing
Due to the sensitivity and proprietary of this project, some information will be withheld and modified. This project will be referred to as DocXtract and the Client as XTM
Kickoff & Requirement Gathering | Understanding MVPs and future state
At the kickoff meeting, we set the foundation for this project's success by bringing the stakeholders together, including the product owners, business analysts, developers, and design teams, to align on the project's objectives, timelines, and key deliverables. During the meeting, we reviewed the project scope, defined the user stories and use cases, and agreed on communication channels and project milestones.
We collected functional and non-functional requirements for the XTM Document Extraction solution. This includes understanding the user needs, business objectives, and technical constraints to ensure a comprehensive solution and then we decided on MPV features and nice-to-haves vs must-haves.
User Research: Stakeholders/Clients Interview | Diving into the challenges
I interviewed users in various roles within DocXtract to understand the challenges faced by engagement teams, the current state of data extraction, and processes across different access levels.
Additionally, I reviewed competitive solutions for document extraction to understand best practices, industry standards, and user preferences.
User Flow & Journey Mapping | A design sprint workshop
I led an all-day design sprint/session with the product manager, product owner, engineers, and stakeholders to review requirements, analyze business logic, and understand relevant legal guidelines to build domain knowledge. Brainstormed and mapped out entry points, access, logic, user stories, user flow, and journey maps. This foundational understanding enabled me to engage effectively with stakeholders brainstorm design solutions, and structure my thought process.
Wireframing | Tool: Balsamiq
After several rounds of layout exploration, I mapped the product's complexity and iterated on the wireframes to streamline the workflow and create a smoother user experience. The wireframe below illustrates an Admin adding a user and assigning roles for the document extraction process.
HiFi Mockup: Client & Project Dashboard | Diving into design & interaction
To begin any extraction process, an associate will search and select a client, view lists of projects under that client name, and delete or add new project(s). Only an admin user has the right to add and delegate associate roles to a client's project. I created a graphical visual representation of data and information related to a client, including associated documents, contacts, and status updates. I collaborated closely with the development, data analytics, and business analysis teams to familiarize myself with the data visualization platform (DevExtreme). Additionally, I audited the DevExtreme platform to understand its dashboard components, functionalities, and limitations, which informed my design solutions.
Document Upload | High level itraction process
An Engagement Member can upload, prepare, map, and run a model for document extraction.
Begin Extraction Model | High level document tagging process
When documents are uploaded successfully, an Engagement Member can begin the extraction process. The extraction process includes training a document model, mapping out data from the document, and adding notes. This document can then be transferred to a manager for verification and approval.
Manager Approval | Notification, review, and decision
A manager reviews a document from an engagement partner/associate for accuracy and confidence level, then decides whether to approve it or reject it, stating the reason in the event of rejection.
Design Review | Gathering feedback, then iterate
Peer Review
I teamed up with a few designers who were not on this project to get additional input and feedback. The goal is to identify issues, improve quality, and share knowledge. The constructive feedback helped me refine the design before final approval or implementation.
Review with Stakeholders and Scrum Team
I presented the design to the project stakeholders and the development team via a HiFi mockup prototype. The goal is to align the design with business needs, user requirements, and technical feasibility. Stakeholders provide feedback on goals and priorities, while the Scrum team ensures the design is implementable within the sprint cycle, identifying potential risks or improvements.
Design Handoff to the Dev Team | Accessibility, annotation & Spec
After rounds of reviews and iterations, I handed the design to the dev team. There's a full-fletched design system in place with a detailed storybook for developers to leverage. I worked closely with the dev team to review each feature as soon as it was developed, review component usage, and be sure there were no inconsistencies on the approved design to development.
I leveraged Figma plugins and Web Content Accessibility Guidelines (WCAG) to ensure my designs were accessible to all user types. I used plugins like Stark and Contrast to test color contrast ratios, ensuring text and UI elements met or exceeded WCAG AA/AAA standards. Additionally, plugins such as Able helped simulate various visual impairments, allowing me to assess usability from diverse perspectives. I also conducted keyboard navigation checks and screen reader compatibility reviews to enhance accessibility for users with motor or visual impairments. This approach ensured an inclusive design that prioritizes usability for everyone.
The budget doesn't allow for prototype usability testing, but I worked closely with the QA and Analytics team to test each feature as soon as it was developed. We ran some moderated/unmoderated, and performance testing with the Engagement Partners, then documented our observations and how they interacted with the application.
Conclusion | Metrics, challenges, and resolutions
The Document Extraction application aims to streamline the process of automatically extracting relevant data from various document formats, enhancing efficiency, accuracy, and scalability. Note: the above HI-Fi mockup is not a representation of the entire application, I narrowed down what is shown in this case study to a few key features.
Challenges
While the collaboration between design and development was strong, there were recurring challenges with implementing features to match the intended aesthetics and patterns, despite being functionally complete. This often led to time-consuming back-and-forth iterations to align the development output with the design.
To address this, we introduced review sessions where engineers demoed their work, and I provided feedback to refine it until it aligned closely with the design before the code was finalized. A key issue was some engineers' unfamiliarity with the Design System Storybook. To resolve this, I organized a knowledge transfer session between my scrum team and UX engineers from the Design System team to enhance their understanding and usage of the code base.
Additionally, I created a dedicated Confluence page to track design gaps for each feature, tagging the responsible engineers. These gaps were closed out once the refinements were complete, ensuring better alignment between design and development.
Success Metrics
Below are some metrics gathered from the analytics team some months into launching the application
• Extraction accuracy of at least 90%
• Processing speed of under 3 seconds per document (in comparison to hours of manual extraction)
• Now handles up to 100,000 documents per day without performance degradation.
• User satisfaction was tracked through feedback, with a target of resolving 95% of reported issues within 24 hours.
• This project was successful because it consistently meets or exceeds these metrics, providing reliable, fast, and accurate document extraction for the business.
XTM - DocXtractA solution for extraction efficiency
Verizon | Refer a FriendCloud feature to increase user retention
Sendyfast - Mobile AppUX Design
T.Rowe Price - Subscription SearchUI/UX Design
Kimberly Clark - eCompassUI/UX Design
Qunol - Website RedesignDigital, Web & UX
Qunol - Amazon StoreDigital, Brand & UX
Instant Drink Mix | Product AwarenessProduct Awareness