Speaker A
So, you come up with a new idea.
Learn 5 common SaaS UI/UX mistakes and how to fix them to create professional, user-friendly software with improved design and functionality.
Key Takeaways
- Professional icons and colors improve UI credibility over emojis and AI-generated palettes.
- Human input is crucial for effective layout and design decisions in SaaS apps.
- Simplifying UI elements and adding relevant data visualizations enhances user experience.
- Builder.io offers a powerful tool to convert Figma designs into production-ready code efficiently.
- Well-designed landing pages and clear pricing structures build trust and improve conversions.
Summary
- Avoid using emojis and let professional icon libraries like Phosphor or Lucide enhance your UI.
- Never rely on AI to pick colors or layouts; human design improves coherence and usability.
- Simplify and organize UI elements such as sidebars, cards, and buttons to reduce clutter.
- Use modals and collapsible advanced options to improve feature accessibility and layout.
- Builder.io enables seamless Figma-to-production workflows with visual editing and code generation.
- Redesign billing and usage pages with clear KPIs, simplified plans, and better hierarchy.
- Add analytics tabs with meaningful charts, maps, and toggles for better data visualization.
- Improve landing pages with quality graphics and presentation to increase user trust and conversions.
- Focus on low-hanging fruit features that enhance app usability and user experience.
- Consistent design principles and thoughtful UI/UX choices turn vibe-coded apps into professional products.
Full Transcript — Download SRT & Markdown
Speaker A
Head over to Cursor, Replit, or Builder to whip something up.
Speaker A
It works great, but it doesn't look very good.
Speaker A
So, in the next six minutes, I'm going to redesign a real vibe-coded URL shortener into a usable and beautiful product.
Speaker A
So that by the end, you can design and ship software that looks and feels flawless.
Speaker A
The first problem is pretty painfully obvious.
Speaker A
Get rid of the emojis.
Speaker A
Admittedly, some apps like Notion successfully use them, but if we take this card and just swap to some more professional icons, it already starts looking better.
Speaker A
I like Phosphor icons, but Lucide or any other interface icon libraries work well too.
Speaker A
Along those same lines, never let an AI choose any of your colors.
Speaker A
They always go for bright colors that don't really work well together.
Speaker A
But all we need to do is change the backgrounds from dark blue to dark green, remove these icons, expand these KPIs, and add in some micro charts.
Speaker A
From before to after, we've added in much more relevant information and color through charts instead of buttons and icons.
Speaker A
A few more color-related changes, and we have the beginnings of a professional dashboard.
Speaker A
And if you want a full deep dive on software color theory, check out my previous video right after this one.
Speaker A
But just like you can tell when there's too many of these dashes that an AI wrote this, these four KPIs at the top show up not once, not twice, but three times in a small app.
Speaker A
Bringing me to my next point, never let an AI choose your layout either.
Speaker A
Starting with the sidebar, if I'm in custom domains or teams, the amount of clicks and links doesn't really matter to me.
Speaker A
If I need that information, I'll visit the dashboard or the analytics tab, which we definitely need to add.
Speaker A
I'll align this to the left and tighten up the spacing too.
Speaker A
AI also loves to make these gradient profile circles with letters in them.
Speaker A
So, let's swap this for an account card.
Speaker A
And with that, we can get rid of these links and tuck them into a pop-over on click, and collapse settings and billing and usage together.
Speaker A
And finally, for these cards, they're feeling a little busy.
Speaker A
Let's collapse these buttons into a triple dot menu, move the date to the center, collapse these chips to just icons, and move clicks to the right.
Speaker A
AI sets up logic well if you tell it to, and the same is true for features.
Speaker A
For example, this create link flyout is pretty sparse with fields, even though we have a ton of space.
Speaker A
Because of this, a modal is probably more fitting.
Speaker A
Let's collapse down the advanced options by default and give this a bit of a more modern look.
Speaker A
We're also missing a few options, like allowing users to swap between their custom domain and LinkGuard's or add a description.
Speaker A
This layout also allows for more features to easily slot in.
Speaker A
And this is honestly where you can spend the least amount of time and see the largest changes, since AI is generally pretty bad at putting together complex layouts and cards.
Speaker A
Now, if you actually want to take your designs straight from Figma into production-ready code, you should check out today's sponsor, builder.io.
Speaker A
You can import your Figma designs directly, drop in a screenshot, add a Slack thread with feedback, or even just describe what you need.
Speaker A
And builder.io works like an AI front-end engineer that actually understands our existing code base and design system.
Speaker A
But what I found really unique is the visual editor.
Speaker A
You can drag and drop components, adjust spacing, tweak colors, and fine-tune layouts directly in the interface.
Speaker A
And those changes get reflected in your actual code base.
Speaker A
I've been using it with one of my projects lately, and honestly, the workflow is pretty seamless.
Speaker A
You can iterate visually without bouncing between tools, and it generates production-ready code that actually respects your design system.
Speaker A
If you want to take your software to the next level, you can check out builder.io with the first link down below.
Speaker A
Now, coming over to the billing and usage page using our new pop-over, this page definitely needs some human touch.
Speaker A
First, this card doesn't do anything.
Speaker A
And that's a pattern you're going to see a lot with AI.
Speaker A
So, it can go.
Speaker A
Then let's retitle this and create a few tabs, since we're pretty much going to nuke this whole page and start from scratch.
Speaker A
First, these KPIs are very vibe-codey and lame.
Speaker A
Instead, a real simple two-column layout really elevates things, especially with a few small donut charts.
Speaker A
Now, in the billing tab, these plans down here are a bit of a mess.
Speaker A
It doesn't make any sense that Standard is less than Hobby until you realize that this is discounted, and Team technically is too.
Speaker A
At least we're going to assume that it is.
Speaker A
Also, having five plans is really not ideal.
Speaker A
Hobby probably makes the most sense to drop, but at least one of them needs to go.
Speaker A
The hierarchy isn't bad, but I think we can tune it up a little.
Speaker A
With that extra width we have, let's drop some of the unnecessary elements and adjust the colors.
Speaker A
Drop the size of the name, since no one cares about that, increase the size of the cost per month, since people do care about that.
Speaker A
Business has become Enterprise, since if you need 50,000 links per month, you probably need more.
Speaker A
Showing the actual discount the user is getting is very important, and also showing them what the next plan includes that the current plan doesn't have.
Speaker A
This kind of pricing pattern is extremely common for softwares like Resend or Supabase.
Speaker A
Finally, let's throw in a billing email and payment method for good measure.
Speaker A
The pro of this layout is as things scale and you need to add documents, integrations, or AI, it's easy to add another tab and go.
Speaker A
Now, we've added in the analytics tab for a reason, so let's use it.
Speaker A
Let's first toss these KPIs as we discussed earlier, along with these tabs.
Speaker A
Now, when you're creating features for your SaaS, don't forget about the low-hanging fruit.
Speaker A
The simple features that make your app way better.
Speaker A
First, let's move these actions down here and add a toggle to split into individual links.
Speaker A
Doing this allows you to compare certain links against each other, something super easy to implement and genuinely useful.
Speaker A
Then I'll shove a lot more useful information into this row with helpful icons that also add a splash of color.
Speaker A
Finally, below that, instead of a boring bar chart, let's actually show them a map with shaded regions and the actual data to the left for a much more rich experience.
Speaker A
Seriously, from start to finish on just analytics, we've created such a big change just by changing a few charts and adding in some icons.
Speaker A
Finally, let's talk landing pages.
Speaker A
This is where you'll lose most of your customers if you vibe code it.
Speaker A
There's definitely a standard of quality on SaaS landing pages that establishes trust, even subconsciously.
Speaker A
Applying some of the color and layout principles we talked about helps, but what we really need are some graphics.
Speaker A
Even adding something as stupid simple as link cards with some skew really starts to elevate the page.
Speaker A
And instead of these lame-ass icons, we can use a slightly edited image of the analytics page we designed, or same idea with password protection.
Speaker A
Landing pages aren't about complexity, they're about presentation, and generally, the better the presentation, the better the conversion.
Speaker A
And that is everything you'll need to turn your vibe-coded app into a pro piece of software.
Speaker A
If you'd like to check out builder.io, it'll be the very first link down below, and the link to all of the Figma assets will be down there too.
Speaker A
Thank you so much for watching, and I'll see you in the next one.
Topics:SaaS UI UXUI design mistakesUX best practicesBuilder.ioFigma to codesoftware designdashboard designanalytics UIlanding page designpricing page UX
![The Wounded Spirit – Timothy Keller [Sermon] — Transcript](https://i.ytimg.com/vi/pkL3R27ZV1o/maxresdefault.jpg)
