Context
STeP's platform includes a contract template module used by HR and legal teams to generate employment contracts, service agreements, and compliance documents. Creating a new template meant manually identifying every dynamic field in a contract, assigning each a field type (text, date, dropdown, etc.), and then composing the template in a rich-text editor with field placeholders — a process that took 2-4 hours per template and was prone to missed fields and type errors.
The challenge
- Each contract document contains 20-40 dynamic fields that had to be manually identified, named, typed, and placed.
- HR teams managing multi-country operations needed templates for UAE, KSA, Qatar, Kuwait — each with different legal requirements and field sets.
- The manual process was error-prone: missing a field meant a contract went live with a hardcoded value instead of a dynamic placeholder.
- Template creation was a bottleneck — only senior staff could do it, blocking sales and onboarding.
My role
I led the product discovery, UI/UX design, and front-end development of the AI-powered template generator. I used Claude to build and commit the entire front-end and AI integration, working hands-on from concept to working prototype. This included mapping the as-is manual workflow, specifying the AI extraction pipeline (document parsing → field identification → type assignment → editor population), designing the review/approval UX so users could verify AI suggestions before applying them, and coordinating with the development team through sprint cycles.
The key design decision was making AI assistive, not autonomous. Every extracted field goes through a review screen where users can rename, retype, add, or remove fields before applying. AI does the heavy lifting; the human stays in control. This eliminated the trust barrier that would have killed adoption if we'd gone fully automatic.
Approach
- Built with Claude. The entire front-end UI, AI integration logic, rich-text editor, and multi-step modal flow were built and committed to the codebase using Claude as an AI coding assistant — from initial prototype to production-ready code.
- Document upload & parsing. Users upload PDF or DOCX contracts. The system extracts text and structure, then uses AI to identify candidate fields based on context patterns (dates, names, amounts, places, signatures).
- Intelligent field typing. Fields are auto-classified as DatePicker, Textbox, Textarea, Dropdown, etc. based on their content and surrounding context — not just pattern matching.
- Review & refine screen. All AI-detected fields appear in a review modal with inline editing. Users can rename labels, change types, delete false positives, or add missed fields. Fields marked with an AI badge show provenance.
- One-click template population. On approval, the system injects all fields as interactive chips into the rich-text editor, composing the full contract template from a structured layout. Users can then fine-tune formatting and language.
- Multi-country support. Template metadata (country, office) drives field suggestions. UAE employment contracts auto-suggest UAE-specific legal fields; KSA templates get KSA-appropriate defaults.
Outcomes
Key decisions & learnings
- Review screen was the MVP. We originally planned to skip review and auto-apply. User testing showed immediate rejection — people won't trust AI they can't verify. Adding the review modal with inline editing turned skeptics into advocates.
- Field chips in the editor. Making extracted fields visible as interactive chips (colored, removable, clickable) inside the editor gave users a mental model they immediately understood: "these are the blanks I fill later." This replaced a confusing placeholder syntax.
- Country metadata matters. A "Contract Start Date" is universal; "Iqama Number" is KSA-specific. Linking template metadata to field suggestion logic made the AI contextually smarter without requiring per-country training data.