YT YouTube2Text

YouTube2Text → Transcripts → How I Design Beautiful SaaS (Frontend & UI Guide)

How I Design Beautiful SaaS (Frontend & UI Guide) — Transcript

by Olly Rosewell · 4,505 words · 617 segments · language en · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

0:00what's going on guys this is Oliver uh
0:02formerly from response AI uh and now
0:04obviously from get.com
0:06trome.com obviously again guys thank you
0:08so much for around 7,000 subscribers now
0:11which is crazy to me um I didn't even
0:13know there'd be 7,000 people to ever you
0:15know watch my videos but crazy I'm
0:17really excited to keep on you know just
0:19creating content for you guys building
0:21stuff it's going to be exciting right so
0:23today I wanted to talk about how as
0:25someone who cannot code and cannot
0:27design anything to save their life how I
0:30make in my opinion and other people's
0:32opinion uh goodlooking software right so
0:35software that looks cool that's easy to
0:37use and
0:39ultimately gets people to do what you
0:41want them to do inside the app because I
0:43feel like that is the most important
0:46part of software is and you know in how
0:49it looks is can this help my user do the
0:52thing that they want in the end right so
0:56crafting Beauty right so the art of SAS
0:58UI design so in the early days of
1:01software functionality was Supreme right
1:04so in other words you could have the
1:06ugliest software in the world and users
1:08tolerated these like clunky interfaces
1:11and you know sort of like really slow
1:13tools think like really early Microsoft
1:16think really early like Salesforce and
1:18sap and and things like that right it's
1:21because these tools were revolutionary
1:23right SAS was um back in the day you had
1:26to go to someone's building and install
1:29software and then excuse me software
1:32became like you know this sort of like
1:35um above thefold thing where you could
1:36just download it off the internet which
1:38is crazy to me right so Salesforce still
1:42get away with this right but we're in
1:43the business of building tools that look
1:45good and are you know useful and easy to
1:47use for for customers right so today
1:51because SAS products are built daily and
1:53more rubbish softwares are built by
1:54non-designers good design is crucial so
1:56well-designed UI sort of you know acts
1:58as the speaker or the ambassador of your
2:00product right so the Zen of clarity so
2:03less is more but make it matter right so
2:06uh there's antoan Dison exupery um who I
2:10don't know if I'm saying that right he
2:12said that Perfection is achieved not
2:14when there is nothing more to add but
2:15when there is nothing left to take away
2:17right so how you should see software is
2:20the front end of your software should
2:21not be this like um sort of like this
2:24contest of how much stuff you can put on
2:27it and how much cool stuff you can
2:28squeeze onto it but rather how simple
2:30can you get it and allow the user to
2:32still achieve that desired outcome from
2:35the product right so the first law of
2:38SAS design is Clarity so your dashboard
2:40needs to make sense to people you know
2:43users aren't these tourists um wondering
2:46around your interface and sort of just
2:47like faffing around for a laugh they're
2:49Hunters like seeking prey and in other
2:52words they're seeking tasks to complete
2:54right so there's problems to solve and
2:56if the user cannot find their way around
2:58it they will just churn and cancel your
3:00software every random button um every
3:04vague icon every random thing that's in
3:06their path and every button that takes
3:08them nowhere is a sort of thorn in their
3:10path and it it will stop them from
3:12getting value from your tool and then
3:13they won't pay you right so consider
3:15this statistic right 80 88% of users
3:18abandon a site after a poor experience
3:20so Clarity isn't just about like how
3:22things look but it's about survival for
3:24your SAS right now when it comes to uh
3:28modern tools you've got things like um
3:31uh so it says bubble here I meant uh
3:33dribble right so dribble so modern tools
3:36like dribble which is just like a big
3:38database of like designs right so you
3:40can see that there's a gentleman Ahmad
3:41fisen um from OnPoint studio right so
3:46those kinds of like design Snippets and
3:50stuff like that can be found on dribble
3:52so it's dribble with three Bs what you
3:54can do is you can plug these into
3:56something like lovable or cursor or chat
3:57gbt and literally say can you copy this
4:00can you copy this UI right so that is
4:03how easy it is to actually build
4:04goodlook UI and good-looking front end
4:06is just by taking screenshots of the
4:09thing that you like and then just
4:10putting it in and I've built all of my
4:13software tools like this since um you
4:16know like cursor came out and lover B
4:18and wind Surf and all these different
4:19things right so just as a quick clear
4:22guys so it's easier than ever to design
4:26pretty UI and pretty SAS even without
4:28coding or design experience and a Noti
4:30is that UI is just the front end of your
4:32software so you can see here on this
4:34page you've got this like taskboard with
4:36the dashboard and loads of like to-dos
4:38and stuff that is the UI that is the
4:41front end so the user interface is what
4:43the user uses right just in case you
4:44didn't know so data Rams 10 principles
4:47so prioritize function over ornaments
4:50right so in other words the user like I
4:53said needs to get the thing done they
4:54don't need to be like you know impressed
4:57by all these like wild colors and wild
4:59buttons animations a dashboard cluttered
5:02with metrics is just noise right but a
5:04dashboard that surfaces actionable
5:06insights is preferred so Slack's
5:09interface thrives on minimalism they're
5:12a billion billion dollar company right
5:15um they've got channels messages and
5:16some search bars that's all you see but
5:19beneath those simple things lie
5:22thousands of Integrations now the user
5:25is the muse right so designing with
5:28empathy not go so people ignore design
5:31that ignores people by Frank Cho right
5:34so so phrased another way if your app is
5:37not desire for people to use they will
5:39they will cancel the software because it
5:41just it just won't look right they won't
5:43be able to do what they want to do UCD
5:46which is user Center design is often
5:49reduced to personas and these Journey
5:51maps and things like that like go
5:52where's the user going to go at its core
5:55your users are not data points they
5:57these human flawed characters that are
6:00going to go into your software and not
6:01know where the hell to go right to
6:04design for them is to embrace the fact
6:05that often times users have no idea
6:07where they're going what they're doing
6:09they need like loads of handholding and
6:10that's absolutely fine um it sounds
6:12nasty of me but it's it's completely
6:14fine to say because people uh people
6:16like being treated like this you have to
6:18treat them like like children right you
6:20cannot they cannot find their way around
6:22the app without your help and that's
6:24absolutely fine that's how you're going
6:26to keep them there you're going to help
6:27them every step of the way and get them
6:29to their goal right so start with the
6:31jobs to be done in theory guys so what
6:33job does your user hire your product to
6:37do so is it like a project management
6:39tool um or is it some kind of like uh
6:42tool to manage their to-do list is it a
6:44tool that helps them find um leads on on
6:48the internet whatever it may be right so
6:51you've got to make sure that you
6:52alleviate that anxiety of the job
6:54getting done and you need to make sure
6:56that they can get that done quickly
6:58without all of this like fr and mess
7:00right so you can shift the design Focus
7:03from these features and all these colors
7:04and all these cool looking dashboards to
7:06just emotions what is my user feeling
7:09what does my user need to get done and
7:10what does my user need to be shown like
7:13what is the important data that they
7:14need to see to get value from the
7:16product right so you can incorporate
7:20feedback loops that look alive right so
7:22dual lingo which obviously isn't like a
7:23SAS like a B2B software but it is like
7:26an app that millions of people use they
7:28have error messages that say things like
7:30you know even owls Miss sometimes and
7:32like oops you know you did this or you
7:34did that wrong right you can transform
7:37frustration into engagement right so in
7:39other words if you press the wrong
7:41button or do the wrong thing you've got
7:43to make sure um that you know the
7:45software tells you that you're going in
7:47the wrong
7:48direction basically what I've seen is
7:50that users never use the app because
7:53you're building it for months right
7:55building it for months and months and
7:56months and you know you know your way
7:58around it you know exact how to use it
8:00when you actually make it live you just
8:02expect users to to use your software
8:05like you have but you've built it so
8:07it's almost like it's almost like doing
8:09a maze that you built like you know how
8:12to use it but the people who are
8:14actually spying the software off you
8:16they've never been there before so it
8:17needs to be like you know you're like a
8:19tour guy through a maze you can use
8:21tools like hot jar and stuff like that
8:23where it gives you like this glimpse
8:25into user Behavior so there's like heat
8:26Maps so I'm not affiliated with heat J
8:29hot jaob I haven't used it in years I
8:30just know that it's really really good
8:32it shows you where your users are
8:34clicking and stuff and then also where
8:36their rage clicking so have you ever
8:38been like on a software and you've been
8:40like stuck and you've just been clicking
8:41and clicking like trying to get
8:42something to work hot J will tell you
8:44whether there's people are actually ra
8:45rage clicking and don't know what
8:46they're doing now remember guys the
8:48reason this is important is because it's
8:49going to stop you from losing customers
8:52like if people get on and they enjoy it
8:54and they find what they need they're not
8:56going to cancel the product they're
8:57going to be interested and and and you
8:59know keep paying but go beyond these
9:01analytics right so you can build like a
9:03culture of listening so what I do is I
9:05have a very very simple bug feature that
9:07just says um submit a bug here it takes
9:10like two seconds to submit a bug and
9:12it'll tell me what page it was submitted
9:15from and you can basically describe the
9:17problem right so you collect those bug
9:19reports and then you actually iterate on
9:22the design of your app and things like
9:24hot jar will tell you what your users
9:26aren't telling you so they'll it'll tell
9:28you that they're clicking on the wrong
9:29thing when they log in and stuff like
9:31that right now the other side is
9:35consistency right so even when people
9:37are unfamiliar with the software we will
9:40hunt for this kind of like settings Cog
9:44or like you know like a get started drop
9:46down or things like that right we're all
9:48used to that we've all used hundreds of
9:50software tools right and you should
9:52adopt a design system early and you
9:54should make sure this is like written
9:55down right so an example is guys um you
9:58know if you have um a button that says
10:02delete on one screen but then on another
10:04it says remove you've introduced this
10:06friction because you're just naming
10:08things differently and there's no like
10:09Cadence and no like consistency to what
10:11things are named and what things things
10:12are doing the same applies to the size
10:15of pages the size of text all of this
10:17stuff needs to be the same um so titles
10:20need to be a certain size um buttons
10:22need to be a certain size you it creates
10:25friction and even if they don't really
10:27like say then they're not going to tell
10:28you all text is different size on
10:30different pages they're just going to
10:32not like the app for some weird
10:34cognitive reason and the reason is
10:35because it's not consistent humans love
10:37consistency right and language is this
10:40sort of like UI like we are speaking to
10:42the user with our software and they need
10:44to be able to find their way around it
10:46right so that is like a dashboard that I
10:48found from um Halo uux for Halo LA right
10:51so very very
10:53useful Now The Narrative of this visual
10:56hierarchy right so you you need to
10:58direct the eye inside an app right so
11:00assass interface is like a story so use
11:04size and color and spacing and fonts and
11:06things like that to guide you sub
11:08subconsciously right so base camp um
11:11which is a multi- multi-million dollar
11:13company they use these like bold project
11:16titles and then like muted secondary
11:18text um to create um a sort of entry
11:22point so that you like know where things
11:23are going they have like clear buttons
11:25that are really simple and basically
11:28these things like air table so on the
11:29right is like a UI um that's sort of
11:31inspired by air table right and you've
11:34just got like rows and like data and
11:37stuff like that but they've transformed
11:39like something very boring like
11:41spreadsheets into like a story you can
11:43see that there's different scores of
11:45different colors on when you hover over
11:47something it like expands or changes
11:49color or things like that you've got to
11:51make sure that the data is clear so so
11:54basically you've got to find a way to
11:56make data as clear as possible an air
11:58table does this this because they just
11:59have simple rows right now the Alchemy
12:04of onboarding so it's like a love letter
12:06right so your onboarding flow is like
12:07this sort of first date right and and
12:09you can you can really [ __ ] up a first
12:11date like like like like things can go
12:12wrong on the date things can um you know
12:15you might not sort of uh gel with the
12:17person you might not really get along
12:19and when you first have paid to get into
12:21a software or you're on a trial you are
12:24the most like um critical of a software
12:27ever and it's similar to just turning up
12:28to a date really nervous and already
12:30wanting to leave right you got to charm
12:32people educate them and then leave them
12:34wanting more so this is actually a
12:36screenshot of my software like I I you
12:38know I practice what I preach I design
12:40software um and I design the front ends
12:42of my software now this front page the
12:45thing that I hope sticks out really is
12:48the start here button which is very very
12:50simple and when you first log into your
12:52to you know to your account for my app
12:55it says launch social agent and this box
12:57has a drop shadow it's greener than
12:59every other box and it suggests that
13:02when you first log in start here is just
13:06basically telling the user to click on
13:07the social agent and basically get
13:09started
13:10right
13:12now linear on boarding which is like a
13:15sort of forc tutorial it feels like a
13:18lecture right see like forcing someone
13:19to jump through these hoops right
13:21instead what you should do these days CU
13:23that's what people respond better to is
13:25you should opt for this sort of thing
13:27called Progressive onboarding run right
13:29so Notions blank page it sort of looks
13:31like the thing on the right by um Sayad
13:34Muhammed so basically there's a blank
13:37page and it invites exploration so
13:40you've got like tool tips appearing when
13:42you hover over certain things and um you
13:44know you've got like um sort of like
13:46tips and tricks that say oh you should
13:48click here if you want to do this or do
13:49that do a lingo approach I know I use
13:52them but you know they're not a B2B sass
13:55but they like I said they have millions
13:57of people who are using the tool every
13:58day and they make hundreds of millions
13:59of dollars they let users dive into like
14:02a a first lesson immediately and then
14:05they basically guide you through the
14:07actions of getting to the result of the
14:09software right but on boarding never
14:11really ends right so when users are sent
14:14to do a new
14:16thing it should be just as inviting so
14:19there's like little copy you can write
14:20so things like click here to create your
14:23first task you've got this right it
14:25transforms this empty space into like a
14:28game for the user right you've got to
14:30make sure that they're invited to take
14:31the next step with the
14:33software this is the this is one of my
14:35softwares like actual agent launch
14:38modules right so as you can see the
14:40first step it says AI agent setup
14:43configure agent right you basically go
14:45through steps with a progress bar in
14:47green at the very top and it just allows
14:49users to go through this process without
14:52really having to worry about the next
14:53step or or whether like you know they're
14:56going in the right direction because the
14:57green progress bar tells them they're
14:59going um to the result and they're going
15:02to get the result when they finish this
15:04module and it's very attractive you've
15:07got like uh the the the like logos and
15:11the sort of icons below Target domain
15:14business context keywords and the first
15:16step really is that you effectively as
15:19you can see over here you put in your
15:21domain then you go over to the agent
15:24setup where you describe your business
15:26and then you finally add um the keywords
15:29to um the tool and you press launch and
15:33then that's it you get a confetti thing
15:35that says well done a bit of confetti
15:37comes out you can just that's really
15:39easy just ask your AI coding tool to say
15:42you know can you blow up some confetti
15:44when they press launch or whatever and
15:46they are now Off to the Races they're
15:48ready to go but I haven't like really
15:50sent them anywhere complex I've just
15:52asked them to click here it explains
15:54exactly what we need to do so enter your
15:56website URL tell us about your business
15:58then add in important keywords and then
15:59you press done and that's
16:02it now speed is an aesthetic guys right
16:04so a laggy UI is like a stuttering poet
16:08right so no matter how you know cool
16:10what they're saying is the delivery is
16:12going to ruin it right now studies show
16:14that a 1 second delay in things being
16:17clicked reduces conversions by 7% which
16:20doesn't sound like a lot but if you've
16:21got a thousand people visiting the page
16:23or downloading a trial you're in trouble
16:25right you need to optimize assets with
16:28tools like image optim there's like you
16:30know like lazy loading and things like
16:32that basically one of my favorite things
16:34to do on on Seer and Tricom is when a a
16:38page is loading you can add what's
16:39called a skeleton screen right so if you
16:41go guys now to LinkedIn and try and um
16:44load up someone's profile for a split
16:46second or try and search someone in the
16:49search bar for a split second there's
16:51actually loads of um like skeleton gray
16:55bars and this adds some kind of Illusion
16:58of speech
16:59because you know that something's
17:01loading in right and it's just
17:03perceptual it's not like technical like
17:04they're not like timing how long it's
17:06going to take but when you see that
17:07skeleton screen with just like gray
17:08boxes you know it's something's
17:10happening users just need something to
17:13be you know they need to be shown
17:15something so that they know something is
17:16happening behind closed doors you can
17:18use progress bars and stuff like that
17:20like Lotty animations you should look up
17:22Lotty animations use like Whimsical
17:25animations and silly stuff so you know
17:27people like juggling balls and stuff it
17:28doesn't really matter but it makes
17:30waiting tolerable so if your app is like
17:32heavy on data and needs you know needs a
17:34lot of loading you can consider that now
17:39branding guys right so when UI becomes
17:41identity and when you know you you know
17:43that you're inside my app because of how
17:46it looks right so this is the sort of
17:49cumulative effect of like these
17:51different interactions with your app so
17:53MailChimp have like branded error
17:55messages right so when you click on the
17:57wrong thing there like a little
17:59chimpanzee that say d whatever right you
18:02if you click on the wrong place on cly
18:04or you run into an error on cly there's
18:06like animated stuff that happens right
18:09but you shouldn't like do all this just
18:11for the sake of it right you should only
18:12do this when you've established a brand
18:14and for example stripe doesn't mess
18:16around with any of this right they just
18:17use this muted really really boring
18:20palette as you can see on the right but
18:22they use a lot of coding examples they
18:24you can just copy paste code right their
18:27brand isn't in the color
18:29but in the help they give you so
18:31consider brand not just as colors and
18:33logo and designs and cool animations but
18:35think of it as like how the user feels
18:37inside the app now proof of progress
18:40this is one of my most one of my most
18:42the most important parts of the UI sort
18:44of like guide is that users need to feel
18:48like they're making progress and you can
18:50actually show them this right so B2B
18:52users crave proof right they they crave
18:55that fast they want proof of progress
18:57and proof of progress reduces churn so
19:00you can embed a value tracker inside the
19:03UI right so it's like a live dashboard
19:05showing metrics like time saved or tasks
19:08automated or Revenue made or leads
19:11generated and HubSpot do this pretty
19:13well their onboarding flow asks for like
19:16you know Integrations and stuff like
19:18that then later on it populates your
19:20dashboard with like pipeline projection
19:22it's like we think Steve is going to
19:24close for $10,000 or we think Lucy is a
19:28great Prospect for you to call back and
19:30stuff like that right it's taking your
19:32data and saying you are on track to do X
19:34or Y and achieve this result and that's
19:36a very important thing guys
19:39now speed kills slowness saves this is a
19:43really important part as well right
19:44ethical friction designing these
19:47thoughtful pauses so I have been in this
19:50position where I've designed I've been
19:52on a software and something very
19:55important there's a very important
19:56button I'm going to delete something or
19:59you know pause something or something
20:00like that and it just lets me do it and
20:02I just delete everything right and then
20:04you're on the phone to support saying
20:07look like I've deleted something I
20:08didn't mean to right borrowing from um
20:11Nia Al's
20:13indestructible ethical friction
20:15introduces these deliberate pauses to
20:17prevent rash decisions right it turns
20:19dark patterns into light patterns so in
20:22other words you can add confirmation
20:23layers so for high stakes actions like
20:25deleting a database or um you know
20:28remove moving a campaign or shutting
20:31down a server you can add some kind of
20:33two second animation like a like a trash
20:35can spinning or something like that
20:37right before confirming this Leverage is
20:40What's called the zanic effect which is
20:42that unfinished actions linger in memory
20:45so in other words if you just click
20:46delete and then nothing happens but
20:49something's been deleted you're not
20:50going to feel that like you're not going
20:53to you're going to Crave like completion
20:54like has that happened has it not you're
20:57you know refreshing the page to find out
21:00literally have another popup that just
21:02says you sure you want to do this thing
21:04that you've just said you want to do
21:06you've click delete do you mean this do
21:08you really want to X right and that's
21:11amazing guys because it means that users
21:14can have you know a a last chance at
21:18deciding against the thing they're doing
21:20but it also leverages that zonic effect
21:22and gives them closure on what they've
21:24done if you just click delete and
21:26something disappears that's just really
21:28bad user design right so final thoughts
21:32in the end the most beautiful interfaces
21:35are those that sort of disappear right
21:36so you shouldn't ever Lo it's similar to
21:38like watching an actor you should never
21:40be thinking God this actor's a great
21:42actor you should just be thinking I I
21:44love this movie because if you know an
21:46actor is acting it just feels like it
21:49just feels like it's not it's not a
21:50movie it feels like it's just an actor
21:52showing off how good he is right how
21:53good how good she is so your UI
21:56shouldn't be like this thing that they
21:57like have to it should just be something
21:59that feels seamless so a software really
22:03is like lived inside especially if your
22:04tool is being used all day by people and
22:07that lies it's down to you to basically
22:10make it simple enough for the user to
22:12enjoy and for the user to get the
22:14results remember we are optimizing for
22:17how easy is it for someone to get a
22:19result in the software and how easy is
22:22it for them to continue getting those
22:24results and is it showing you the data
22:27that is relevant right right now if you
22:30guys have any questions about you know
22:31how to build UI or how to sort of prompt
22:35um you know um AI to build good
22:37frontends then you can just effectively
22:39just reach out to me on Twitter or
22:41comment or anything like that and I'll
22:43be there but essentially you can pretty
22:45much copy any UI that you want by just
22:47going on dribble um and then just
22:50screenshotting things that you think
22:51looks good and then just feeding it to
22:53Ai and it is as simple as that guys I'll
22:55see you in the next video and have a
22:57good uh weekend speak to you soon
22:58bye-bye

About this transcript

This page contains the full transcript of How I Design Beautiful SaaS (Frontend & UI Guide) by Olly Rosewell, generated from the public captions YouTube serves with the video. The transcript has 4,505 words across 617 segments, with the original timestamps preserved so you can click any line to jump to that moment in the embedded player.

What you can do with it

Use the transcript to take notes, quote the speaker, build a study guide, generate a summary with ChatGPT or Claude via the YouTube Summary tool, or export it as a timed subtitle file with YouTube to SRT. You can also re-open it in the transcriber to translate the transcript into 100+ languages.

Free YouTube transcript tool

YouTube2Text is a free YouTube transcript generator — no signup, no daily limit. Paste any YouTube link and get the full transcript instantly, with timestamps, click-to-jump, translation to 100+ languages, AI prompts for ChatGPT, Claude, and Gemini, and exports to TXT, SRT, VTT, or Markdown.