Contracts.ai
Contracts.ai
Contracts.ai
Contract Details Panel (Key Clauses)
Contract Details Panel (Key Clauses)
Product Design · 2-hour design sprint
Product Design · 2-hour design sprint
Product Design · 2-hour design sprint
Overview
Overview
Redesigned a contract details panel to help Finance/AP users quickly understand risk, pricing, and key terms without reading full contracts.
The layout prioritizes invoice alignment, financial signals, and risks to support faster decisions.
Redesigned a contract details panel to help Finance/AP users quickly understand risk, pricing, and key terms without reading full contracts.
The layout prioritizes invoice alignment, financial signals, and risks to support faster decisions.
Redesigned a contract details panel to help Finance/AP users quickly understand risk, pricing, and key terms without reading full contracts.
The layout prioritizes invoice alignment, financial signals, and risks to support faster decisions.
My Role
My Role
Product UI · hierarchy · UX writing · end-to-end execution
Product UI · hierarchy · UX writing · end-to-end execution
Scope
Scope
2–3 hour timebox
Focused on hierarchy, grouping, and clarity
Preserved existing UI patterns
No changes to data model or backend behavior
2–3 hour timebox
Focused on hierarchy, grouping, and clarity
Preserved existing UI patterns
No changes to data model or backend behavior
Key Design Decisions
Key Design Decisions
Invoice-first hierarchy
Financial Alignment and Invoice Match appear at the top, reflecting real Finance workflows.
Financial Alignment and Invoice Match appear at the top, reflecting real Finance workflows.
Clear separation of concepts
Contract Overview reflects canonical contract terms.
Financial Alignment reflects how those terms compare to real invoices.
Contract Overview reflects canonical contract terms.
Financial Alignment reflects how those terms compare to real invoices.
Early risk visibility
Mismatches, renewal deadlines, and escalation are surfaced immediately under Risks & Alerts.
Mismatches, renewal deadlines, and escalation are surfaced immediately under Risks & Alerts.
Progressive disclosure
Key Clauses and Full Contract Details remain accessible but de-emphasized to preserve scannability.
Key Clauses and Full Contract Details remain accessible but de-emphasized to preserve scannability.
Using AI in My Process
Using AI in My Process
Used AI to quickly explore layout and hierarchy options.
Final decisions on structure and usability were mine.
Used AI to quickly explore layout and hierarchy options.
Final decisions on structure and usability were mine.
Impact
Impact
Reduced cognitive load
Faster visibility into risk
Clearer financial decision support
Reduced cognitive load
Faster visibility into risk
Clearer financial decision support
Out of Scope (Intentionally)
To keep the work focused, this design does not attempt to solve for:
PDF viewer redesign
Cross-contract analytics
Role-based permission models
Backend reconciliation logic
Contract authoring or configuration flows
This work focuses specifically on read-only decision support for Finance/AP users reviewing contracts in a high-risk state.
If I Had More Time
Future exploration could improve speed and confidence without expanding scope:
Inline source previews or hover states for faster context
Contextual plain-language explanations when risks appear
Role-aware defaults for Finance vs Legal users
Clearer action affordances for reanalysis and approval states
These ideas would extend the system without introducing unnecessary complexity.
I design for clarity under constraint: prioritize what matters, structure information cleanly, and move fast without sacrificing judgment.
I design for clarity under constraint: prioritize what matters, structure information cleanly, and move fast without sacrificing judgment.
Open to
new opportunities and
collaborations.
OLIVIA FAY 2026
Open to
new opportunities and
collaborations.
OLIVIA FAY 2026
Open to
new opportunities and
collaborations.
OLIVIA FAY 2026