Role: UX Research, UX Design, Prototyping, Front-end Development
Timeline: First iteration completed in 4 weeks; continuing development in progress
Tools: Excalidraw, Figma, HTML, CSS, JavaScript
AI-Powered FNOL Management Application
Narrative: What started as a few rough sketches quickly became a live prototype powering a major product demo, but getting there meant pivoting fast and designing smarter. With the clock ticking, I needed to shape a raw UI into a confident, intuitive experience that brought the product vision to life.
About The Project
The company's AI-powered FNOL Management System is designed to modernize the claims intake process in Property and Casualty insurance. By integrating seamlessly with existing platforms, it uses document parsing, predictive analytics, and a virtual assistant to streamline first notice of loss, automate reserve forecasting, and support faster, more accurate decision-making across underwriting and claims. The result is a smarter, more efficient insurance experience—for carriers and customers alike.
The Challenge
The founder of a promising AI-powered FNOL (First Notice of Loss) application reached out for help refining the product's user experience. While the platform was functional, the interface was minimal and not yet ready for client-facing demos.
With an important sales presentation approaching in just a few weeks, he needed fast support to transform the experience into something polished, intuitive, and presentation-ready. This would serve as the MVP for the first iteration, focused on core workflows and key interactions, with future enhancements planned for upcoming phases.
Before & After
Before:
- Basic chat interface with minimal design elements
- Visually very sparse with plain colors
- Limited navigation, and minimal visual feedback
- Structure feels incomplete, lacking a sense progress
After:
- Clear, structured layout that improves focus and flow
- Improved color palette with stronger visual contrast
- Introduced visual pathways to support task completion
- Interactive elements designed for clarity and responsiveness
Key insights
UI Maturity Gap
While the core functionality was in place, the interface lacked the clarity, structure, and polish needed for product demos.
Workflow Misalignment
Early wireframing sessions revealed gaps between the founder's vision and how users might intuitively navigate the system.
Urgency as a Design Constraint
A rapidly approaching sales presentation required an accelerated process, from conceptual wireframes to a live prototype in a matter of days.
Design Priorities
Create Clear Visual Guidance
Design a layout that kept users oriented throughout the claims intake flow, using visual indicators and iconography.
Deliver a Functional MVP Fast
Prioritize core workflows and build a live, mobile-responsive prototype that could be confidently demoed under pressure.
Align Vision and Usability
Translate a high-level product vision into an interface that felt modern, intuitive, and grounded in real-world user expectations.
Approach
Aligning Vision with Function
With previous experience in UX from an insurance background, I understood the FNOL workflow and its unique challenges. I started by sketching low-fidelity wireframes in Excalidraw to visualize key tasks and layout options. These early conversations, shared via Zoom, quickly surfaced misalignments, and allowed us to clarify priorities and functionality without getting caught up in visual details too early.
Pivoting to High-Speed Prototyping
Originally, I planned to move into high-fidelity designs using Figma. But with the presentation looming, I pivoted and went straight to building a live HTML/CSS/JavaScript prototype. I prioritized responsive, mobile-first design from the beginning, even though the immediate focus was desktop, to ensure long-term flexibility and scalability.
Designing with Familiarity and Clarity
To guide the design, I researched leading AI platforms like ChatGPT and Claude, along with productivity tools such as Slack, Jira, and Monday.com. These tools shaped expectations for visual feedback, clarity, and intuitive interfaces. I applied this insight by incorporating universal iconography, clear progress indicators, and a strong visual hierarchy that kept users oriented and confident throughout the FNOL workflow.
Visual Highlights
Primary Color
Used the company's signature orange as the foundation.
UI Hierarchy
Critical actions placed prominently, secondary items pushed to the periphery.
Visual Cues
Progress indicators and consistent iconography guide user flow.
Responsive Design
Ensured adaptability across devices.
Outcome
The final prototype was delivered ahead of schedule, giving the backend team valuable time to integrate AI components. After minor refinements to color and layout, the founder was extremely satisfied with the result, and had a demo-ready product that clearly communicated product vision.