AutoAL Web App
AutoAL
AutoAL is a compliance tool for short term rental hosts in Portugal. It was also the first project where nobody above me decided what it should be, so scope, pricing and what to refuse landed on my desk next to the design work. This page is a summary, the full product story is in the case study link at the end.
Challenges
The first week was not design
Nine legal obligations across five authorities, each with its own portal and its own deadline. The law is spread across texts that contradict each other, and none of it is written for the person who actually has to comply with it. I couldn’t design the main feature before I understood every one of them, so the first week went into reading and researching instead of drawing.
Understanding an obligation doesn’t mean I can automate it. Some of those portals have no API, and no documentation that says whether automation is even possible, so not all nine are automated yet. Testing has the same problem, because some platforms have no credentials for testing. The only way to validate those flows is with real hosts using their own accounts, which is why I’m launching it as a beta first.
There was no product manager to hand me a scope and no client to approve a decision. The only person who could tell me I was wrong was me.
9
OBLIGATIONS I HAD TO MAP BEFORE DRAWING A SINGLE SCREEN
61
RESPONSIVE SCREENS RUNNING ON ONE DESIGN SYSTEM
6
WEEKS FROM NOTHING TO A PROTOTYPE IN DEVELOPMENT
Reserved at the measured size. This screen is a live Figma frame, not an exported image.
Process
I kept everything grey until I had the structure done
Every userflow followed the same process. Research and an interview with Claude (more on that below) until I could define the paths. Build it. Then walk it out loud as the user and ask whether the path is obvious, whether there’s a way back, what happens when it fails, and what the screen shows when there’s nothing on it yet. At the end, I closed each flow with a basic heuristic analysis to catch what I had missed.
Everything stayed greyscale until I had the structure defined, so the hierarchy had to come from the layout itself and I could see what mattered on a screen without relying on colour. Only then came the visual review. This order is a cost decision as much as a design one, because a missing back button is much cheaper to fix in a wireframe than in a build, and that kind of attention to detail is what decides whether someone trusts the product.
Reserved at the measured size. This screen is a live Figma frame, not an exported image.
Product
Less is always better
The most common move in a market that already exists is to ship the same product with more features inside it. I went the other way and cut the channel manager on day one. A host with three flats doesn’t need one, Airbnb and Booking already sync between themselves, and building it would have doubled the scope and the time to win a fight I didn’t want.
Keeping the scope small bought me speed. A product this size gets in front of real users in a few weeks, and I can get valuable feedback and improve way faster than I would by guessing on my own. I’d rather ship less and let people who actually have the problem tell me what’s missing than spend two more months building a feature nobody asked for.
Another important metric that guided me was time to value (TTV). My first call was to ask for a card at signup, because it’s already clear that trials with a card up front convert better. But when I was testing the flow, the first thing the product did was ask for my card details, before showing a single screen. So I pivoted. Now you sign up, connect a property, look around the dashboard, and the card is only asked the first time you try to do something important, like turning an automation on. Same friction, but moved to after the value is already proven.
Reserved at the measured size. This screen is a live Figma frame, not an exported image.
AI
How I built this
I built this with Claude Code connected to Figma MCP, so the model acts on the real components and variables in the file instead of a screenshot pasted onto a canvas. The mechanical and repetitive work got done in minutes, easy to review and correct. Components, tokens, colour ramps, prototype wiring.
The method that changed how I work was the interview. Before anything got built I made it ask me questions one at a time until we mutually agreed on what that thing actually was. Having to defend each choice out loud surfaced gaps I would have walked straight past.
And lastly, the part nobody talks about, the cost. Everything it produces has to be reviewed, and reviewing isn’t free. I ran it through some review rounds, optimisation passes and heuristic analysis using Nielsen principles (all of this is way cheaper to automate than it has ever been), but at the end of it all, there’s still a screen in front of me that I have to approve or reject, and think about the why. The human is still the bottleneck, but also still the one who decides whether something is good. Will we one day have a supreme intelligence that gets that call right every time? I doubt it, because not even two humans agree on what good looks like, let alone a machine. The speed is real, but it’s speed at execution.
Reserved at the measured size. This screen is a live Figma frame, not an exported image.
Next steps
My learnings
The first thing I’m taking with me is that the returning user is the product. I spent many hours polishing the onboarding flow, but almost delivered a dashboard that treated a user of a year like it was their first day. The long time user now goes into the personas on day one, with the same weight as the new one.
The other thing I’m taking forward is that my best decisions were subtractions. Cutting did more for this product than any feature I could have added.
The prototype is with the developer and the build is running. Next is a beta with hosts who have real properties and real deadlines, then the sales page, branding done properly, and after all of this, the marketing machine I want to build, but that’s a story for its own article.
Reserved at the measured size. This screen is a live Figma frame, not an exported image.
