Workflow Simplified: Turning Manual Approvals into a Connected
Experience
Loan Digitization Tool
As the Lead UX Designer, I redesigned the commercial loan approval platform for an international bank, transforming a manual, form-driven workflow into a cohesive digital experience. My work focused on improving transparency, scalability, and collaboration across multiple teams while navigating low-code platform constraints.
Brief
The Loan Digitization Tool replaced a fragmented, email-based approval process with a centralized application that allowed users to review, track, and approve commercial loans in one place. The legacy experience lacked visibility and consistency, causing delays and confusion between departments. The redesign introduced a more structured, data-driven workflow supported by dashboards, checklists, and progress tracking.
Result
By introducing new features like the loan pipeline dashboard, progress stepper, dynamic data entry, comment functionality, and a low-code-compatible component library, I improved visibility into bottlenecks, streamlined communication, and reduced redundant work—creating a scalable foundation for the bank’s broader loan digitization strategy.
My Role
UX Designer
Skills
Wireframing
Prototyping
Tools
Figma + FigJam
Jira
Team
Product Manager
Solution Architect
Developers
Problem
The existing process relied on emails, spreadsheets, and isolated tools, creating inefficiencies and information silos.
Reviewers lacked visibility into loan progress, struggled with version control for loan documents, and faced inconsistent UI patterns that slowed decision-making.
As a result, approvals were delayed, collaboration was fragmented, and leadership had no centralized view of pipeline activity.
BEFORE
Lack of Visibility into System Status
Users had no clear indicators of where they were in the review process or what actions were pending. Without progress tracking or feedback after submissions, reviewers couldn’t easily gauge next steps or status changes.
Fragmented Workflow Across Tools
Beyond the legacy system, many reviewers were still completing portions of the process offline in Microsoft Word. This led to version control issues, redundant data entry, and lost time consolidating files for approval.
Disconnected Navigation
There was no easy way to jump between relevant forms or focus only on sections needing attention. Users had to scroll through lengthy pages or exit the screen entirely to locate what they needed.
Constraints & Approach
Because I did not have access to end users, I partnered closely with subject-matter experts (SMEs), product owners, and program managers to map out current workflows and pain points.
The platform was being developed in a low-code environment, which required continuous collaboration with developers to understand feasibility constraints, reuse existing components, and adapt UI patterns for technical compatibility.
I applied a user-centered, iterative design approach that emphasized:
-
Rapid prototyping and validation with SMEs and developers
-
Prioritizing high-impact screens for phased releases
-
Building scalable design standards compatible with low-code limitations
Solution Overview
Connected Loan Review
To improve transparency and collaboration, I introduced a loan dashboard, progress stepper, and in-app commenting that allowed teams to see where each loan was in the pipeline, identify bottlenecks, and communicate directly within the platform—eliminating the need for external emails.
Streamlined Data Entry Experience
I redesigned the review process to move beyond static forms by implementing dynamic tables, inline image previews, and efficient borrower search, allowing users to complete reviews faster while maintaining data accuracy and reducing context switching.
Scalable Design System for Low-Code
To address inconsistencies and accelerate delivery, I created a component library tailored to the constraints of our low-code platform—establishing reusable components, consistent patterns, and scalable foundations that reduced rework across future releases.
Featured Final Designs
Understanding the Problem
Through discussions with product owners, SMEs, and program managers, I uncovered critical pain points in the existing loan approval process that guided design priorities and informed the overall product strategy.
KEY INSIGHTS
Teams needed end-to-end visibility into loan stages and ownership
Reliance on email attachments underscored the need for centralized document management.
Navigation and UI inconsistencies led to unnecessary rework and confusion.
Technical debt within the low-code framework limited flexibility but presented opportunities for reusable components.
Design Challenges and Solutions
Brief
I partnered with multiple product teams to prioritize new features, refine existing screens, and build a shared component library that aligned with low-code constraints—ensuring consistent, scalable delivery across the platform.
1
Transparency & Collaboration
Challenge
Teams had no shared visibility into the loan pipeline or context for communication.
Solution
-
Introduced a Loan Index & Checklist that clearly outlined required actions for each loan.
-
Implemented a progress stepper showing stage completion across all departments.
-
Embedded commenting and tagging features directly in the loan file, replacing external email threads.
2
In-Context Image Referencing
Challenge
Users needed a way to attach images inline for quick reference. This functionality was separate from the attachments page, but the existing form design didn’t support it. The goal was to enable reviewers to view and reference images seamlessly—without sacrificing valuable screen space or forcing them to navigate away from their work.
Approach
-
Collaborated with developers to assess the feasibility of image attachment and in-line pasting.
-
Considered usability for lengthy form pages and the handling of larger images.
-
Challenged existing mental models (like “copy and paste” in Word) while maintaining familiarity and efficiency for users.
DESIGN EXPLORATIONS
This design placed image attachments at the bottom of the form, but this quickly became inefficient for lengthy pages. Users found it frustrating to scroll down to view reference images while completing fields near the top, breaking their focus and slowing down the review process.
This version placed an image attachment field horizontally beside each corresponding text field. However, it introduced excessive white space for entries that didn’t require images and added unnecessary fields in cases where attachments weren’t needed.
3
Scalable, Low-Code Design System
Challenge
When I joined the project, there was no existing design system or brand guidance. Components were being created on an ad hoc basis, which increased design time and caused misalignment with the low-code platform—often resulting in development delays or the need for custom code.
Approach
-
Audited existing screens to identify recurring patterns and usability inconsistencies.
-
Referenced established systems such as Carbon, Material, Dell, and Apple Human Interface Guidelines to inform structure and best practices.
-
Documented foundations, styles, patterns, and components to guide future design work and ensure scalability.
-
Partnered with developers to validate that new components aligned with the low-code system’s constraints and could be easily implemented.
Outcome
Delivered the first cohesive design system for the platform, reducing design and development rework, improving visual consistency, and accelerating delivery across multiple product teams.
Final Thoughts
This project taught me how to design collaboratively within a complex enterprise environment while balancing design quality, technical feasibility, and delivery speed. As my first project as a UX Designer, I learned how to adapt quickly to an active development cycle—working closely with product owners and developers to make iterative UI updates while building a scalable design foundation.
The Value of Early Discovery
If I were to approach this project again, I would dedicate more time upfront to understanding business goals and user workflows before beginning design. Conducting early discovery would have helped clarify user needs, align priorities across teams, and reduce the rework that came from designing before fully mapping the process.
Anticipating Future Needs and Roadmap Alignment
I would also invest more effort in understanding the broader product roadmap. During slower periods, I focused on building the design system, but later learned there was an unspoken need for reporting tools that hadn’t surfaced during agile ceremonies. Gaining earlier visibility into long-term goals would have allowed me to design more strategically and expand the tool’s overall impact.