Gali Gaviria

End-to-end Product Designer

From problem to live product.

I start from the problem: research and validation, then branding, UI/UX prototyping and the documentation the development team builds from. In a team or on my own, I carry it through to live.

Work

Case studies

Two products, two different stages of the product lifecycle: one just born and entering go-to-market, the other grown over four years into a difficult but learning-rich shutdown.

01

Proptech · Side project

2026-now

Side project, alongside client work · live product

Clavis.casa

Fewer wasted viewings, faster and safer long-term rentals.

Founder & Product Lead of my own side project. From discovery to live product in 8 weeks, entirely on my own.

Clavis.casa screens the profiles applying to view a rental property, validating identity and solvency before the viewing even happens.

UX end-to-endMobile firstBrandDesign systemProduct developmentWeb app

Founder & Product Lead

Role

71 → 4 confirmed viewings

Pilot test

5 min, being reduced

Screening

Live product

Status

Visit Clavis.casa
Clavis.casa: the homepage, the generated listing, and its photo gallery
Clavis.casa: the homepage, the generated listing, and its photo gallery

All product images are real screenshots, not mockups. The mobile ones are from the PWA, designed mobile-first partly for Google's indexing. Some parts of the process (the internal dashboard) stay private: Clavis.casa isn't a registered company yet.

Problem

The problem

Renting well on your own comes with real risks: the wasted viewing, renting below market value, or to someone who ultimately can't afford it. Handling the paperwork well still takes an agency or years of experience today, at the cost of high fees and lost time.

Right priceRight tenantSafe paperwork

Understand

What I needed to understand

How to guarantee that whoever books the visit actually shows up, and that whoever shows up has their paperwork in order. I talked to real landlords to see how they handle this problem today.

Guaranteed presenceVerified requirements

Methods reported by the landlords I interviewed

  • Personal details requested by message or form, before the visit.
  • Direct replies to renters' own listing requests, offering the unit instead of a public ad.
  • An ad with just the basics, full details only to whoever replies with their own information.
  • Proof of solvency requested at the visit, like the employment contract I used to ask for myself.

Discover

What I discovered

I learned that the central problem, on both sides, is trust.

  • The documents you receive make you responsible for their privacy (GDPR).
  • No one validates the information they receive: more often than not, people lie just to get the visit.
  • Candidates have a trust problem too: vague listings, with few photos and thin descriptions, are often the tool scammers use.

Change

What I changed

Rebuilding trust needed clarity on both sides:

  • The landlord gets verified too, not just the candidate.
  • The listing presents complete information.
  • The processes make people aware of their privacy rights.
  • Sensitive data is handled with total security.

These premises led to the three independent portals: landlord, candidate, and an impartial administrator, in a closed cycle.

Clavis's three portals: landlord, candidate, and administrator, with the flow connecting them

Design decisions

The key choices behind every screen.

In practice: privacy by design and data minimization
Login security: passwordless system with a code sent by email
Collecting data the way a real estate agent would: interactive forms and AI-generated descriptions
Supporting decisions: rent and tax simulations

How it behaves

Real screen recordings of the product. The thread running through them: never leave someone alone in front of an empty field. Questions arrive one at a time, any answer can be corrected, and every photo brings its own prompts for describing it.

The chat: multi-select answers, and the control to fix a wrong one without starting over
Steps 1 and 2: each section opens once the previous one is answered, and the view follows on its own
Photo slots stay empty frames until you upload: then prompts appear to help describe the room, and you can add another

Validate

What I validated

Candidate side: a real pilot on the property listed on Idealista. Everyone who responded was invited to apply through the direct link to Clavis.casa, without being told they were part of a test.

Landlord side: a small demo campaign on a Facebook group for rentals in Turin, with a 45-minute video call for every interested landlord.

The underlying hypothesis, for both: if the information is clear, the right people come forward. Confirmed.

Result

The result

Candidate side: the screening works, 71 contacts down to 4 confirmed viewings. It currently takes 5 minutes.

Landlord side: of the demo requests, 1 in 3 turned into a completed video call, a high rate for such an early stage, with no marketing activity behind it. Fun fact: one person told me the process is better than Airbnb's.

I'm now in the go-to-market phase: SEO, a blog, and growing the number of landlords and agencies on the platform.

Candidate side · from contact to viewing

710

a qualification rate no manual check could match in the same time

The screening currently takes 5 minutes.

Landlord side · from request to demo

110

completed video calls, with no marketing activity behind it

One person told me the process is better than Airbnb's.

Brand

The brand

Clavis.casa

The typography follows the same idea: Fraunces for headings, the warmth of a classic serif; DM Sans for body text, the clarity of a technical sans-serif.

Terracotta

Sage

Ochre

Warm background

Design system

Design system

I defined reusable foundations and component variants to keep the interface consistent and scalable.

Below, the button system and tokens.

Design system: scale, states, and button variants
Design tokens: colors, surfaces, states, and typography

Motion

Motion belongs to the system as much as color, so it is documented here: whoever builds it needs to know what happens, not just how it looks. Three rules, each one born from a real problem.

Questionnaire

Single answer
  • The tap is the answer: it confirms itself and the next question appears.
  • Correct stays under every answer, so one can be changed without starting over.

Questionnaire

Multiple answers
  • With several choices nothing can tell when you are done, so you say so with Confirm.
  • That is the rule separating the two: where an answer has an end it confirms itself, where it has none it takes a gesture.

Photos and description

The photo slots
  • They stay empty frames until something is uploaded.
  • Once a photo is in, prompts arrive to help describe the room, and another room can be added.

What I learned

  • A real test, even a small one, beats ten interviews: how people behave in front of an unfamiliar form is different from what they say they'd do.
  • The screening works: going from 71 contacts to 4 confirmed viewings is a qualification rate no manual check could match in the same time.
  • Being founder, designer, and, in practice, product lead of a team of AI agents requires a different kind of discipline: every design decision has to be clear enough to be translated into instructions for actually building it.
  • Managing the project in Claude Code, after switching from Lovable, turned out to be more precise for this kind of product.
FigmaLovableClaudeClaude CodeSupabaseResendCloudflare

Need something like this?

Send me an email

02

Fintech (Germany) · Product Designer → Product Lead

2021-2025

Closed project · 4 years, from research to the product team's shutdown

Horizon65

From lead generator to a more qualifying lead generator, with information tailored to each user's situation.

Joined as a junior designer straight out of bootcamp (Ironhack UX/UI, mid-2021), and grew into de facto ownership of research, design system, and the direct relationship with developers and the CTO.

Horizon65 is a German fintech in pension and insurance investment advisory. The app was meant to generate qualified leads for in-house financial advisors: I helped evolve it from a simple lead-gen funnel into a simulation product designed to quickly give users the information they need to make informed decisions, up until the product team's shutdown due to market conditions.

Designer → Product Lead

Role

1% → 25-45%

Conversion

1.3 → 8.3 min

Time on page

4 years

Duration

16 in 1 month

Prototypes

1 week

Dev → live

2 weeks

New feature

What I built, on my own

  • Dashboard and advanced simulator (time-machine)
  • Option & Offer: scanning, comparing, and matching investments
  • Complete account redesign
  • New wealth assets (real estate with simulator, savings, ETFs) and a redesigned flow for private, state, and company pensions, plus 2 onboardings
The homepage: 'Secure your retirement', the mobile simulator front and center, trust badges (GDPR, Berlin-based, 160+ providers)
The homepage: 'Secure your retirement', the mobile simulator front and center, trust badges (GDPR, Berlin-based, 160+ providers)

Problem

The first problem: conversion

Hired to increase warm leads for the in-house financial advisors.

  • The existing funnel converted only 1%: from ad to account created.

Understand

What I needed to understand

Why people weren't investing in private pensions, or why they should.

  • 30+ interviews with testers, segmented by age, location, and profession.
  • Surveys on attitudes toward pensions, as a financial topic and as a life-expectancy question.
  • Testing on the existing app, for a full audit.

Discover

What I discovered

The problem wasn't (only) the app: it was people's behavior in front of such a big decision.

  • A pension investment locks you in for 20+ years: the decision felt too risky to make quickly.
  • People jumped between advisors, learned from online gurus or books, depending on their own financial literacy.
  • The urgency had to come first: the 'pension gap' (only 46% of income covered).
  • Hypothesis: give the basics first, so the user arrives at the advisor call already aware.
The welcome screen: 'Your personal financial advisor for your retirement'
The welcome screen: 'Your personal financial advisor for your retirement'
The first hit: 'You will retire in 39 years!'
The first hit: 'You will retire in 39 years!'
'Meet Sara, she's your age': the time machine
'Meet Sara, she's your age': the time machine
The 'pension gap' explained as a diagram: today's income vs. future income
The 'pension gap' explained as a diagram: today's income vs. future income

Change

What I changed

Four years of successive iterations, each one triggered by validating the last.

  • Onboarding: new flow (pension gap, time machine). 16 prototypes in a month, live in a week.
  • Simulator: two tiers, basic and advanced. Starting persona defined by the sales team, completed with this data.
  • Rebrand: new brand plus mapping the social presence, to build trust through preparation and empathy.
  • Options & Offers: self-service or assisted choice. Advisors ignored the choices made in-app, eroding trust.
  • Final pivot: shifted focus from state pension to private pension tax deductions. Data from advisors' experience, shipped fast, without rigorous validation.
The simulator: the time machine that simulates your pension gap based on the assets you've added
The simulator: the time machine that simulates your pension gap based on the assets you've added
The questionnaire: a form with explanations to add your assets, here the real estate one
The questionnaire: a form with explanations to add your assets, here the real estate one
The comparison table: compares the proposed investments across many parameters, explained and filterable
The comparison table: compares the proposed investments across many parameters, explained and filterable
The offer: the final step of a chosen offer, with the three final options to choose from
The offer: the final step of a chosen offer, with the three final options to choose from

Motion

Recordings of the app in use. None of these animations is decorative: they hold attention, cover the time the calculator needs, and explain the gap while you wait.

Onboarding

The time machine
  • You tap the year once and the travel runs on its own.
  • It is there to catch attention and hold it until the pension gap is explained.
  • Shape and transitions worked out so it was ready to hand over to development.
  • Built with the variants of a component, adding the transition.
The Figma file of the time machine: the component variants from 2022 to 2047, linked by After delay transitions
The working file: the component variants, from 2022 to 2047, chained with After delay transitions. The pink arc grows at every step.

Dashboard

The simulator
  • Add an asset and the gauge rebuilds. The animation is generated on every calculation: the asset colours and the share of the arc they cover change with the numbers of whoever is looking, so you see how much each investment weighs on the final pension.
  • Research had shown that the pension gap is widely misunderstood, so here it had to be visible, with the real numbers of whoever is looking.
  • A pixel-perfect prototype: first to test it, then to show it to front-end, back-end and the founders.
  • On the first attempt the calculation took five minutes. The work with front-end and back-end brought it inside the animation, which lasts as long as the calculation, and took out the jumps.

Solutions tab

The waiting page
  • Filters investments against the parameters chosen in the simulator.
  • The wait is the real calculation: longer or shorter depending on those parameters.
  • It needed an animation that carries the sense of waiting and of heavy work.
  • Among the candidates I picked this radar, an external GIF: it has no limits, so it covers a few minutes or many, whatever the calculations and filters take.

Validate

What I validated

Each phase only moved to the next after a round of validation.

  • Onboarding: advisors still called unbooked leads, and found them better prepared.
  • Simulator and rebrand: time on page increased noticeably, and the session replays showed people coming back to re-run the simulator, checking that the numbers really moved and that the investments really followed.
  • Tax deductions: strong initial results, until competitors copied the same angle, wiping out the differentiator.

Result

The result

Conversion 1% → 25-45%; time on page 1.3 → 8.3 min.

  • With the German recession underway, the founders paused the product team after 4 years, going back to working as regular advisors.

Ad-to-account-created conversion

1%0%

peaks of 45%

Staying true to the findings, even when the result felt risky, is what made the test worth running.

Average time on page

1.3 min0.0 min

almost 6.5x the starting time

Time spent exploring their own numbers became the strongest trust signal for the product.

Brand

The brand

Horizon65

Blue communicates trust and stability: central for a product dealing with people's financial future.

One typeface for everything, headings and body: Inter.

Blue Navy

Sky blue

Dark blue navy

White

Design system

Design system

The navigation buttons, with one example in place next to the variants. The states are only Enable and Disable: on mobile there is no hover.

Below, the tokens: the type scale in Inter and the colour system, with a light and a dark scheme.

Bottom navigation: one example in the screen and the button variants in the Enable and Disable states
Tokens: the Inter type scale for desktop and mobile, and the colour system with a light and a dark scheme

What I learned

  • Staying true to the findings, even when the result feels risky, is what makes a test worth running.
  • Sometimes the right choice goes against standard best practice: a long, shocking onboarding beat every rule about brevity, because it answered a real emotional need.
  • A product that informs is only credible if the content behind the interface is as considered as the interface itself: otherwise the promised differentiation never shows up.
  • User loyalty built on transparency is valuable but volatile: it needs to be tested, not assumed.
  • A strong working relationship with developers comes from listening to what they need to move fast, not just handing off finished designs.
  • Agile is something you learn in a classroom, but applying it at a real company, with real clients and deadlines, is a different experience.
  • My architecture background translated well into technical specs for developers.
  • Forces bigger than design, like a recession, can determine whether a project succeeds.
FigmaUser researchA/B testingDesign systemsProduct marketing

Need something like this?

Send me an email

More work

More work

Smaller-scope projects where I worked inside existing teams and processes. A different signal from Clavis.casa and Horizon65, but just as useful: I can slot in, follow given requirements, and collaborate with PMs and tech leads.

Defensetech · Landing page

Smash Electronics

Design & build (vibe coding)

The founder is a CTO: I covered the whole design side (logo, brand, landing page), he handled the entire technical side of getting it online.

Visit Smash Electronics

From brief to live: 3 days

  • Alignment with the founderDay 1

    A meeting to understand vision, product, and target audience.

  • Proposal and logo draftDay 2

    I arrive with a landing page proposal on Lovable and a first logo draft; in the meeting we validate the choices together and define the changes.

  • DeliveryDay 3

    Final logo, finished page, Lovable access handed over.

Landing page: technical positioning for G-hardened electronics in aerospace and defense
Landing page: technical positioning for G-hardened electronics in aerospace and defense

Proptech (Spain) · Feature for the internal team

Vivara · GCO Ventures

Product design, against Product Manager requirements, in collaboration with the Tech Lead

A feature supporting the internal team in managing, improving, and publishing the images sent in by property owners, part of a larger initiative to publish listings on Idealista.es. I followed the Product Manager's requirements and took the solution through to a clickable prototype to discuss technical feasibility with the Tech Lead, then prepared the graphic files to support development.

Hand-drawn lowfi → Figma midfi → Clickable prototype (Figma Make)

About

Gali Gaviria

I'm a product designer: I take an idea and carry it through to a real product that solves a real problem. From the first research to go-live, without waiting for a dev team to start building.

I've built my experience in two sectors that demand precision and trust: fintech and proptech. At Horizon65, a German fintech in long-term investment planning, I grew over four years from junior designer to de facto product lead. With Clavis.casa, my own venture, I'm founder and product lead: from the idea to fully built product in two months.

Before product design, I worked for 8 years as an architect where I worked in renovations of luxury stores like Gucci Berlin, Maxmara and Gucci Marbella. During Corona I retrained to product designer but my method of working, proactive, precise and well coordinated is the same way I work alongside clients and developers today: understanding what they really need, and designing in a way that makes it easy to build.

What I bring

Research & UX
Brand & Design Systems
AI-augmented development
Product ownership
iOS & Android
SEO optimization
Fintech
Proptech
Go-to-market

Skills

From research to a live product

Research & Strategy

  • User research and problem validation
  • Surveys and quantitative analysis
  • Field testing and A/B testing
  • Business model definition

Design

  • End-to-end UX/UI
  • Design systems and brand identity
  • Prototyping (Figma)
  • Mobile-first design

AI-augmented development

  • Lovable, Claude, Claude Code
  • Supabase, Resend, Cloudflare
  • Direct collaboration with developers and CTOs
  • From prototype to live product

Method

How I work

I come from architecture, where the requirements are handed to you by the context: the plot, the rules, the budget. A digital product has none of that, so somebody has to produce them, and that somebody is whoever runs the discovery. Until an intuition has been validated it is not the problem yet, and designing on top of it means solving a fragment of something.

01

Discovery

Research, interviews, competitors: I get to the real problem.

Validation analysis

02

Alignment

Findings and a roadmap, to decide budget and timeline together.

Roadmap & budget

03

Design

User flows and design system, every choice justified.

Flows & design system

04

Live 1.0 product

Not a prototype: the real version, online, ready to test.

Live product

05

Iteration and launch

Feedback, changes, and the version ready for market.

Launch-ready version

Contact

Let's work together

I work end-to-end, from startup MVPs to SMB digitalization: from research to a live product. Get in touch.

gali.gaviria@gmail.com