Case: B2C Proptech
CreditoHipotecar.io
From Zero to Launched SaaS with Paying Clients
Summary
CreditoHipotecar.io is the result of a conversation with Andres (a financial advisor specialized in Real State) about a spreadsheet simulation that got traction and was helping his clients. I decided to make it a challenge and make a SaaS out of it.
How long can it take to use all the latest tools, like AI, and vibe-coding (for the first time) it if I purposely use the minimum to have a live product , I thought it would be 1 or months. It took me 4 months.
This is the story on how I took a challenge, fail, got several moments of frustration, but by persisting ended up with a final product users love.
The Process
The process was a short cycles of Research, analysis, planing, mock & build, test & evaluate, and improve.
There is a key step for me in this project, I did not just delivered, user-flows, pictures, or static prototypes, but functional app connected to real data. This allowed me visualize and express ideas, right away find problematic interactions, get accurate feedback from real users, have them play with a working app in a matter of days.
Fast validation
We focused on accelerating the workflow, collapse the cycle from idea to iteration and final product.
Research
I researched on what tools and technology could facilitate such a endeavour, a vibe-coding option like Lovable.dev (switched later for Cursor.AI) would be a first for testing and checking traction from users.
It was essential to move quickly and validate solutions against genuine user needs.
I looked for different simulation, financial and analysis tools to help people play with simulation and understand their options.
We gather documents, other existing spreadsheets, common doubts, questions from previous Andres’ clients.
With our Minimal Lovable Product, I quickly build and test the power of vibe-coding, it was promising. After understanding the basics, I started to figure out more the details of comparing mortgages. It let us understand user experience that first made sense for us, then testing it with users and gathering feedback until it made sense for them too.
Analisys
A normal analysis will be: I understand to my best of knowledge step by step, mock a few user-flow ideas and UI in Figma and validate with Andres. Eg: How to create a property, and it’s many implications, bonuses, insurances, etc.
We quickly discussed what existed in the market and (we initially) assumed needs from the users.
We initially identify 2 users :
Those willing to buy and commit to a mortgage
Those with a mortgage but starting to understand the ins and outs of the financial options
As reference, I personally bought 2 properties, but I never realized how much money I was committing to pay or the consequences of paying extra amortizations, or year-terms. People like our users (and me) we will help to easily crunch the numbers and see the consequences of changing any of the values.
We got our User stories, use-cases, acceptance criteria.
Business Requirements
The results of the analysis became a business and functional requirements document .
I quickly realized that spending good time defining the business requirements made for great Prompt Planing. Clear definition on:
What the user needs,
How are the workflows organized,
Validations,
User experiences steps and sequencing,
UI design.
The more details the requirements were, the better sequence and task for prompting the AI (Claude via Cursor) got, all the way to back-end, front-end, the structure of the database and form validations.
Now Cursor can came back with an understandable dev-plan both can follow. Including database, schemas, types, Zustand, React Query use suggestions.
Desing and Build
A engineer mindset, means understanding how software works, constraints and compromises.
I use AI not just speed but for more iterations. not just visuals, but strategic vision. As a constant learning tool to lay out the options.
Accelerated
Interest & Insurances
$501,598
-S/ 27,504
Years
25
1.1
Monthly Payments
$3,021
-S/ 101
New Rate
Create Mortgage
User experience / User interface
Ideation, branding, Landing page, components, toast, feedbacks, dashboard, main sections.
With speed in mind I used Figma create flows, iterate fast possible UIs, have a fews ideas then straight to working demo.
I was not just making the assets, but blurring the lines between design and engineering.
Quickly create a flexible brand , and a design system the allow me to start producing.
We started with a “broad lighthouse” design in Figma then move to a mock-prototype and laser focus on details for the app.
Working functional proof of concept with a React components library.
Mock and testing
We use several working demo-mocks. Bringing the concept in to reality.
Andres invited different alpha user, home buyers and experts in the field, lawyers, financial advisers, construction entrepreneurs, etc. With the use of mocks, he recorded their use for analysis and pain point discovery. We capture their problems and suggestions.
With a relentless feedback loop, and the use of our own product with real users, we quickly spotted where our flows lack clarity and even found out user needs we didn't scope at first.
We continuously delete our accounts to experience the platform as a new user that need to be onboard , and feel the app for the first time.
No more static mockup deliverables, we test complex ideas with working mock with data, calculations and scenarios.
Lovable
Lovable.dev was the first AI vibe-coding tool that allow me to understand how to explain my self with the AI with little understanding about coding and nothing from React.
With it I was able to taste the limitations of building an app, integration with Supabase, Auth.
Realization: Only by prompting it was really hard to have fine control on the design and consistency of the components, the UX, and the UI.
Lovable could come with acceptable ideas, small flows, but inconsistent components to our needs.
Cursor
I switched to Cursor.AI, to have accurate control on the UI and the components, as I wanted to build with consistency and reusability.
Using GitHub to transfered the progress, and adopting React Libraries, I started learning the details of ‘prompting’.
Shadcn / Tailwind
I quickly learned I needed to learn and master ShadCN, and tailwind to move faster and have WCAF compliance UI.
ShadCN is easier to customize and brand, it let us move fast.
Additionally there are libraries with ShadCN-Figma components, great to mock several pretty static UI first.
ChatGPT / Claude
These models help me to plan, architect the file and code organization, to clear programming doubts, create tasks, debug, discuss mid term vs long term approaches.
Framer for a quick landing Page, then learn to integrate Stripe to charge for our efforts 💪🏽
‘Failing’
I was moving far and steady with no coding, but after test, iteration was needed and the UI was evolving, moving away from a happy-path. User needed crossing user-flows. EG: the user could change the property values at any point and the dependant mortgages should reflect the change. Or to help comparisons, user should be able to favourite Scenarios, and Capture them for further comparison.
At some point Claude 3.7 was over-complicating the app, due to its constraints and modifications on the UI, it did a tangled code.
This led in to a month of learning REACT, just to understand how to structure reusable code, the philosophy of react, component-based architecture, the principle of "one component, one task" , the difference between hooks, services, types, schemas, calculations, Types, React Query, Zustand Stores and more.
I came back with my fresh knowledge and in 2 weeks to untangle and remove unnecessary code.
We progress with a tight collaboration using Loom videos
Collaboration
I built and shared Loom videos walkthroughs, to share prototypes, ideas, progress, intentions, Quality Assurance.
Loom videos let us work async, be concise and specific on the intention of the interaction, doubts and expectations. Optimizing back and forward communication.
AI not changing the what designer do, but the how is done, the task of the human is alignment and to cultivate true beauty.
Conclusion
What’s next
We open the door and many needs appeared, currently we think fast iteration is key to learn fast; as next features we think:
Analysis of properties
Investors would insert different incomes and outcomes, like cost, expenses, rent, appreciation, rental increment, home equity. To evaluate the rental as a investment, and compare it to different other investment options.
AI wrappers
AI tool will guide the user in conversation trying to gather all the information accesible and injecting these data to creating different scenarios for mortgages and rentals as investment.
No more need to manually fill up forms.
As designers we currently have to become AI native, as the new tool not only gives you raw speed and but you get high fidelity app-prototypes, that feels like the end product. That with some code knowledge can become the final product.