Client
Personal project (Lovable)
Project type
0>1 Responsive web app
Role
PM, UX & Developer
Blick: All your cross-border accounts in one place
Learning through building, I experimented with Lovable to create a financial web app for expats -- a product I've been missing for a long time. Here's an overview of what I was able to achieve in about a day.
Challenge
Challenge
Challenge
People who've lived in multiple countries often end up with accounts scattered around and struggle to understand their finances as a whole. Different currencies and inflation rates can also add to this confusion.
People who've lived in multiple countries often end up with accounts scattered around and struggle to understand their finances as a whole. Different currencies and inflation rates can also add to this confusion.
People who've lived in multiple countries often end up with accounts scattered around and struggle to understand their finances as a whole. Different currencies and inflation rates can also add to this confusion.
Solution
Solution
Solution
Blick brings all financial accounts into one clear, interactive view. Users can connect accounts manually or through third-party integrations, to get a holistic overview of their money, no matter how many countries are involved.
Blick brings all financial accounts into one clear, interactive view. Users can connect accounts manually or through third-party integrations, to get a holistic overview of their money, no matter how many countries are involved.
Blick brings all financial accounts into one clear, interactive view. Users can connect accounts manually or through third-party integrations, to get a holistic overview of their money, no matter how many countries are involved.
Approach
Drafting the product brief & prompt
I started by sparring with ChatGPT about the problem space and what kind of solutions to explore. It helped me narrow down a set of MVP features, then generated a Lovable-friend prompt template draft. I reviewed and tweaked this myself, then fed it into Lovable to generate an initial prototype.
I started by sparring with ChatGPT about the problem space and what kind of solutions to explore. It helped me narrow down a set of MVP features, then generated a Lovable-friend prompt template draft. I reviewed and tweaked this myself, then fed it into Lovable to generate an initial prototype.
Result of first single-shot prompt. Boring, but not terrible.
Iterating in Lovable
After making some feature updates (e.g. changing what data the hero graph displayed and enabling editing of existing accounts), I experimented with the best way to apply a specific design language. I started with some simple style descriptions through prompting, then tried 'tweakcn' -- the Tailwind's CSS style generator. There you can copy the CSS code directly to Lovable to apply exact color and other style values.
After making some feature updates (e.g. changing what data the hero graph displayed and enabling editing of existing accounts), I experimented with the best way to apply a specific design language. I started with some simple style descriptions through prompting, then tried 'tweakcn' -- the Tailwind's CSS style generator. There you can copy the CSS code directly to Lovable to apply exact color and other style values.
Reflections so far
1. Define constraints clearly and early If you don’t give Lovable clear objectives and constraints, it fills the void with generic solutions. It was tempting to start refining visuals immediately after my first prompt result, so I needed to take a step back and evaluate/refine the app's overall interaction model before getting sucked into details. 2. Examples over descriptions While using the tool, I began shifting from “do this: [provide spec]” to “help me explore this space, here's an example.” It seemed like the best results come from treating prompts like early concept sketches rather than Jira tickets. 3. Iterations became conversational Rather than a linear flow (wireframe → feedback → revise), I found myself falling into a rhythm of micro-iterations. It felt like I was negotiating with Lovable, sometimes asking for tweaks, sometimes suggestions.
1. Define constraints clearly and early If you don’t give Lovable clear objectives and constraints, it fills the void with generic solutions. It was tempting to start refining visuals immediately after my first prompt result, so I needed to take a step back and evaluate/refine the app's overall interaction model before getting sucked into details. 2. Examples over descriptions While using the tool, I began shifting from “do this: [provide spec]” to “help me explore this space, here's an example.” It seemed like the best results come from treating prompts like early concept sketches rather than Jira tickets. 3. Iterations became conversational Rather than a linear flow (wireframe → feedback → revise), I found myself falling into a rhythm of micro-iterations. It felt like I was negotiating with Lovable, sometimes asking for tweaks, sometimes suggestions.
Next steps
Next I plan to run a couple quick validation tests with other expat friends. I'm considering stripping out all the styling and testing with a more white label wireframe-y version first to avoid visual bias. I also need to investigate the third-party integration potential to see whether connecting financial accounts is possible at all.
Next I plan to run a couple quick validation tests with other expat friends. I'm considering stripping out all the styling and testing with a more white label wireframe-y version first to avoid visual bias. I also need to investigate the third-party integration potential to see whether connecting financial accounts is possible at all.