Strategy: The “Modular Contract” Philosophy
Our strategy was to move away from “document editing” and toward “data-driven generation.” We decided to attack the challenge by building a dual-layer system:
- The Executor Layer (Mobile/Web): Enabling field agents and clients to complete contracts using intuitive, error-proof forms.
- The Architect Layer (Desktop): Empowering senior lawyers to build “Smart Templates” with custom logic.
The Design Process
We moved from a “feature-first” mindset to a “user-validated” framework, ensuring every pixel served a legal or functional purpose.
1. Value Proposition Canvas
We mapped legal “pains” like breach-of-contract risks against “gains” like automated payroll calculations. This led to the inclusion of QR-code verification and automated payment scheduling based on contract milestones.
2. User Personas
We balanced the needs of the “Tech-Forward Junior Associate” (focus on speed/UI) and the “Experienced Partner” (focus on compliance and stability).
3. Sitemaps & Information Architecture
We organized the ecosystem into a “Secure Login Wall” leading to three core pillars: Templates, Active Contracts, and User Profile.
4. User Journey Mapping
By mapping the journey from “Need for Contract” to “Final Archive,” we identified that the biggest drop-off occurred during clause selection. We solved this by creating a “Gallery of Predefined Templates.”
5. Flowcharts & Logic Mapping
We mapped the “New Custom Model” flow to handle complex “If/Then” logic for variables like currency, social security deductions, and yes/no clauses.
6. Wireframes & User Flow
Using Optimal Workshop, we conducted Tree Testing to ensure users could find specific clauses without guidance. We iterated on the “Template vs. Custom” distinction after discovering users found the initial merged flow confusing.
7. Brand Identity:
We chose a “Trust Blue” palette to evoke the stability of a traditional firm, paired with modern sans-serif typography and a “secure frame” logo to signal technological advancement.
8. High-Fidelity Design & Prototyping
We built interactive Figma prototypes for five distinct flows. We used First-Click testing to measure the intuitiveness of the “Variable Creation” modal, leading to a UI that felt more like a simple form than a coding environment.
Execution: From “Idea” to “Quality-Assured SaaS”
The project spanned 12 months, evolving from a solo design mission into a robust cross-functional operation.
- Course Correction: Early in the project, we pivoted from “feature-dumping” to a strictly defined MVP. This ensured we launched on time with a stable “Core Engine.”
- Agile Integration: I acted as the bridge between two development squads (Web and Mobile), utilizing a RACI matrix to ensure accountability.
- Quality Assurance: I led the translation of design to code, documenting the Figma file to ensure padding, haptics, and Lottie animations remained pixel-perfect across iOS and Web.
Results: Performance by Design
The launch of the MVP replaced a fragmented, manual process with a streamlined digital environment, delivering significant efficiency gains.
Accuracy
70% reduction
in typing errors (from 7 to <2 per document)
Speed
5x faster
contract completion (from 20 minutes down to 4)
Verification
3x faster
authenticity checks using QR-code-based methods
Productivity
2x boost
in lawyer output through template-based creation
Satisfaction
95% NPS
achieved during the initial launch stage
Scalability
Standalone SaaS
transitioned from an internal tool for Financar
Learnings & Insights
The Customela journey proved that in the legal field, User Testing is non-negotiable. Our assumption that lawyers wanted “everything at once” was wrong; they wanted “structured simplicity.” By introducing Card Sorting, we narrowed down infinite possibilities into 7 key variable types (Currency, Logic, Dates, etc.), which became the backbone of the app’s success. We learned that a successful MVP isn’t about how much you build, but how well you solve the “Burn” of the manual process.