YT YouTube2Text

YouTube2Text → Transcripts → 4 levels of UI/UX Design (the gap is INSANE)

4 levels of UI/UX Design (the gap is INSANE) — Transcript

by uxpeak · 2,952 words · 433 segments · language en · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

0:00Hey, today you'll learn super
0:01interesting tips to design apps and
0:03websites that users actually love. With
0:06the risk of getting us hungry, let's
0:08start with looking at food delivery
0:09apps. Look at these four versions of the
0:12same screen. The one where you decide
0:14what you're eating. They have the same
0:15photos, same meals, and same
0:17information, but not the same
0:19experience. One was designed by a
0:21junior, one by a mid, one by a senior,
0:24and one by a staff designer. Which one
0:26do you think has the best UX and UI? A,
0:29B, C, or D? Pause the video and decide.
0:33Write in the comments which one you
0:34picked and why. So, let's start with C.
0:37The screen a junior would design. There
0:39is one decision here they got right and
0:42four places where it goes wrong. The
0:44right one is the photos. They showed you
0:46the food instead of the restaurant's
0:48logo. A logo tells you who is selling. A
0:51photo tells you what you are eating and
0:53that is what you came for. Then the
0:55size. Those photos are 56 pixels. An
0:58image in a list can identify or it can
1:00create appetite. An appetite takes real
1:02space. At 56 pixels, you can see there's
1:05a bowl of something, but it doesn't make
1:08you want to eat it. And why is it so
1:10small? Because six restaurants fit above
1:12the fold at that size. Juniors and
1:15marketers usually want as much as they
1:17can get above the fold. That is the
1:19first mistake, and it's still being
1:21taught as a good thing. Everybody
1:23scrolls now. What matters is whether the
1:25first thing somebody sees is worth
1:27continuing for, not how much you fit
1:29before the cut. We cover this in much
1:31more detail in our UX Peak Plus platform
1:34because there is more nuance to it.
1:36Second mistake, filters and sort are
1:38hidden inside two drop-downs with 17
1:41options behind them you would never know
1:43about. Third, the card has no hierarchy.
1:45The name is 13 pixels. Everything under
1:48it is 11.5, all on one gray line at the
1:51same size and color. If you cannot say
1:54which element somebody should read
1:55first, they will not be able to either.
1:58And fourth, every corner here is four
2:00pixels while the category images are
2:02circles. Two different shape languages
2:04on the same screen. Now, a the mid
2:07[music]
2:08same six restaurants and four things
2:10change. The photos change from a square
2:12to a rectangle, get three times wider,
2:15and become the biggest thing on the
2:16card. The corners are rounder now, and
2:18the same rounding runs across the whole
2:20screen. The screen is more polished all
2:22around. The spacing is better. There's
2:24more white space and the colors are
2:26handled with more care. And there is
2:29hierarchy which matters more than any of
2:31it. The name steps up. The rating takes
2:33the star and the weight. And everything
2:35else drops back. That is what lets you
2:37scan a list instead of reading it. And
2:39the filters are visible. Eight ships
2:41sitting on the screen tapable. What the
2:43junior buried is now something you can
2:45find. Then D, the senior. The photos get
2:49even bigger as they go full width and
2:51take over the card. The category row
2:53stops being photos and becomes a custom
2:56icon set. That does two things. It gives
2:58the app a personality that the stock
3:00photos do not. And it stops six food
3:03photos competing with the six food
3:05photos directly underneath them, so the
3:07actual meals stand out more. The quick
3:09filters are still here. And next to
3:11them, there is now a filter button that
3:13you can tap on and see more filter
3:15options that you can apply. With the
3:16sort button sitting beside it, that's
3:18exactly where Zomato, Swiggy, and Global
3:21put theirs. And there is account now 640
3:25places. You know how much you are
3:27looking through, which changes how you
3:29approach it. And then the layout switch,
3:31cards, or a compact list. Big photos
3:34make you want food. A list lets you
3:36compare quickly. And some people might
3:38prefer the second one. So instead of
3:40choosing for everybody, the senior lets
3:42you choose. When there is no correct
3:45default for everybody, give people the
3:47control, which leaves B, the staff
3:50screen, which takes all of that further.
3:52The search placeholder says what you can
3:54actually search for, places, dishes, or
3:57cuisines. The icons and their
3:59backgrounds are cleaner and quieter, so
4:01the row stays out of the way of the
4:03food. The top card carries a best match
4:05label based on what we know about the
4:07user. and the main one, the name and the
4:09numbers come off the photo, which means
4:11the card looks the same whatever the
4:13restaurant uploads as its photo. Uber
4:15Eats builds its cards the same way.
4:17Photo on top and the details underneath.
4:20Small caveat, [music] none of these is
4:22finished. With more time, you could
4:24improve every one of them, including the
4:25staff screen. We cannot get into every
4:28detail in one video, but in our UX Peak
4:30Plus platform, we go through every one
4:32of these decisions properly. why each
4:34one was made, the pros and cons on both
4:36sides, and real apps pulled apart to
4:39show you how they solve the same
4:40problems. And we take the staff screen
4:42further than it goes here, so you can
4:44see what the next round of improvements
4:45actually looks like. Because [music]
4:47copying a screen you like gets you that
4:49one screen. Understanding why a senior
4:51or a staff designer chose what they
4:53chose is what you can use everywhere
4:55else. That is what moves a career, and
4:58it's how you end up building apps and
5:00websites people actually love. Link is
5:02in the description. So, tell us in the
5:04comments which one you picked and
5:06whether anything here changed your mind.
5:08Let's move to another awesome tip. It's
5:108:00 at night. You're on the sofa
5:12looking for a new place to live. You
5:14open the app and there are more than
5:161,500 homes for sale in Portland.
5:18Obviously, you're not going to look
5:20through all of them. You already have a
5:22rough idea of what you want. Something
5:24within your budget, at least three
5:25bedrooms, and two bathrooms. Luckily,
5:28there's a filter button right at the
5:30top. You open it, choose what you're
5:31looking for, and a minute later, those
5:331500 homes are down to just 41. Sounds
5:36pretty simple, but this is where filters
5:38get interesting because those
5:40requirements usually aren't as fixed as
5:42they sound. Maybe you want three
5:44bedrooms, but if that leaves you with
5:46almost nothing, you'd probably consider
5:48two. Maybe you have a budget in mind.
5:50But if another 50,000 suddenly gives you
5:52much better options, you might be
5:54willing to stretch it. So the job of a
5:56filter isn't just to ask the user for a
5:58bunch of values and hide everything that
6:00doesn't match. It has to help them
6:02narrow down a huge set of options while
6:04they're still figuring out what they
6:06actually want. And this problem is
6:08everywhere. Shopping, flights, jobs,
6:11food delivery. You start with hundreds
6:13of thousands of options and somehow the
6:16interface has to help you get down to
6:17the few that are actually worth your
6:19time. That's what makes filters
6:21surprisingly difficult to design. And
6:23when you're designing something like
6:24this, a really useful starting point is
6:27looking at how strong products already
6:28solve the same problem. Whether you're
6:30designing filters, an onboarding flow,
6:33settings page, or homepage, having good
6:35references can save you a lot of
6:37guessing. That's one of the reasons we
6:38use Mobin. It gives you a huge library
6:40of real screens and flows from products
6:43that have actually shipped. So you can
6:44see how different companies approach
6:46similar design problems. And now Mobin
6:49has taken that a step further with Mobin
6:51MCP which is a gamecher. You can connect
6:54Mobin directly to tools like Claude code
6:56cursor or codecs and essentially make
6:59all of that research part of your
7:00existing workflow. So instead of
7:02manually searching through hundreds of
7:04screens, collecting screenshots and
7:06trying to compare everything yourself,
7:08you could ask Claude something like
7:10using Mobin, show me how leading
7:11developer tools handle onboarding. find
7:13the most relevant examples, identify the
7:15patterns they have in common, compare
7:17the different approaches, and create a
7:19visual report for me. And it can
7:21actually search mobin screens, flows,
7:23and sections for you, pull together the
7:25relevant references, and help you
7:27understand where products follow similar
7:28patterns and where they make different
7:30choices. It can even turn that research
7:32into a visual report with the actual
7:34Mobin references rather than you having
7:37to collect everything manually. We've
7:39partnered with Mobin for this video and
7:41you can get 20% off Mobin through our
7:43link below. So now you tap the filter
7:45icon. What would you actually want to
7:47see? Option A, option B, option C, or
7:51option D? All four were designed for the
7:54exact same app and the exact same user.
7:56The only difference is the level of the
7:58designer behind them. One was designed
8:00by a junior designer, one by a mid-level
8:03designer, one by a senior designer, and
8:05one by a staff designer. Before we break
8:08them down, write in the comments which
8:09one you like most and why. Version A
8:12looks clean, but most of that simplicity
8:14comes from moving the work somewhere
8:16else. The junior designer is trying to
8:18keep things simple and clean. Instead of
8:20putting every control on one screen,
8:22each filter gets its own page. So, you
8:25have price, bedrooms, bathrooms, and
8:27home type, and you deal with them one at
8:29a time. At first, that seems like a
8:31pretty sensible way to reduce clutter.
8:33But once you actually use it, you start
8:35to see the problem. Let's say I want at
8:37least three bedrooms. I tap bedrooms,
8:40choose three, then go back. Now I want
8:43two bathrooms. I open bathrooms, choose
8:46two, and go back again. Then I finally
8:48tap show homes. That's seven taps just
8:51to set two basic filters. But the taps
8:54aren't really the biggest problem. The
8:56bigger problem is what happens every
8:58time you move to another page. When I'm
9:00choosing bathrooms, I can't see the
9:02bedroom choice I just made. I can't see
9:04my price range either. So, I'm making
9:06each decision separately, even though
9:08those decisions are actually connected.
9:10Maybe I want three bedrooms, but if that
9:12gives me almost nothing, I'd happily
9:14take two. Maybe another 50,000 suddenly
9:16opens up much better homes. That's the
9:19kind of trade-off you want to understand
9:21while you're filtering, not after you've
9:23finished. And the full page approach
9:25makes that harder, too. As soon as I
9:27open the filter, the homes I was just
9:28looking at disappear completely. There's
9:30also no feedback on the main action. The
9:33button just says show homes. I could
9:35have 41 matches. I could have four. I
9:38could have none. I only find out after I
9:40tap it. So, the junior designer has
9:42focused on making the interface feel
9:45simple by showing us less at once. But
9:48there's an important difference between
9:49making the interface look simpler and
9:52making the decision easier. And that's
9:54what the next designer starts to
9:56improve. Version B fixes the biggest
9:58problem with version A. It brings the
10:00decisions back together. The filter no
10:03longer takes over the whole screen.
10:05Instead, it opens as a sheet over the
10:07results. So, you still have some sense
10:09of the page you came from and what
10:10you're filtering. And instead of hiding
10:12bedrooms and bathrooms on separate
10:14pages, everything now lives in one
10:16scroll. That makes it much easier to
10:18balance the choices against each other.
10:20Maybe I start with three bedrooms, then
10:22adjust the budget, or I drop to two
10:25bedrooms and see whether that gives me
10:26much better options. Price is also
10:29easier to adjust. Instead of relying
10:31only on manual inputs, we now have a
10:34slider. A slider is useful when you want
10:36to quickly move through a range and get
10:38roughly where you want to be without
10:40having to type a new number every time.
10:42And if you already know your exact
10:44budget, the manual inputs are still
10:45there, so you get both quick exploration
10:48with the slider and precision when you
10:50need it. There's one choice I wouldn't
10:52make, though. Bedrooms and bathrooms use
10:54steppers. Plus and minus works well when
10:57you're nudging a number you already
10:58have, like the quantity in your basket
11:01or the temperature on a thermostat. But
11:03if I already know I want three bedrooms,
11:05making me tap my way up to three is
11:07slower and it hides the other options
11:09from me. And finally, the button is much
11:12more useful. Instead of just saying show
11:15homes, it tells me exactly what my
11:17current filters will return. Show 41
11:20homes. So before I apply anything, I
11:22already know whether I've narrowed the
11:24search too much or not enough. Version C
11:27goes beyond making the filter easier to
11:29use. It starts helping you make the
11:31decision. The first thing you'll notice
11:33is the price filter. We still have the
11:35slider and manual inputs from the mid
11:36version, but now there's also a
11:38histogram behind the slider. That
11:40histogram shows the distribution of the
11:42available homes across different prices.
11:45So before $700,000 and $750,000
11:50were just two numbers on a range. Now I
11:52can actually see whether most homes are
11:54clustered around that price, whether I'm
11:56already near the edge of the market, or
11:58whether stretching my budget a little
12:00would suddenly open up a lot more
12:02options. So instead of blindly moving
12:04the slider and waiting to see what
12:06happens, I can understand the market
12:08while I'm adjusting it. The control
12:10isn't just asking me for a price
12:11anymore. It's showing me what's actually
12:13available, so I can make a more informed
12:15trade-off. Then we get to bedrooms and
12:18bathrooms. The steppers are gone, and
12:20now all the options are visible at once.
12:23So, if I want three bedrooms, I can just
12:25tap three plus instead of tapping my way
12:27up to it. And the plus is important. We
12:30said at the beginning that we want at
12:31least three bedrooms, so choosing three
12:34shouldn't accidentally remove every
12:36four-bedroom home from the results. If I
12:38really do want exactly three, I can
12:40still choose that separately. That's a
12:42small detail, but it matches the way
12:44people actually think about this kind of
12:46search. Home type gets a smaller visual
12:49upgrade, too. Instead of textoly
12:51options, each property type now has an
12:53icon, making the choices easier to
12:55recognize and scan. Version D doesn't
12:57just show you the market. It starts
12:59connecting that market to your search
13:01and your own budget. You can see that
13:03immediately in the price section. We
13:05still have the histogram from the senior
13:07version, but now there's even more
13:08context around it. If I've selected
13:11three plus bedrooms, I can see that I'm
13:13looking at 3 plusbedroom homes, their
13:15median price, and on the right that 459
13:18out of 1,557
13:21homes currently fit my filters. So, I'm
13:23not looking at price in isolation
13:25anymore. I can immediately understand
13:27how much of the market actually fits
13:29what I'm looking for. And then there's
13:31the bigger change underneath. Because
13:33when someone asks, "What's your maximum
13:35price?" You might not actually know.
13:37What you may know is, "I have $65,000
13:40for a deposit, [music]
13:42and I'd be comfortable spending around
13:44$5,000 a month." So, instead of forcing
13:46me to somehow turn those numbers into a
13:49house price myself, the product does
13:50that work for me. I enter my deposit, my
13:53comfortable monthly payment, and the
13:55interest rate, and it works out roughly
13:57what price I can shop at. Then, it
13:58places that limit directly onto the
14:00histogram. Now I can see the market, the
14:02homes that match my filters and where my
14:04own budget cuts through all of it in the
14:06same place. That's much more useful than
14:09asking the user to guess a maximum price
14:11and then discover later whether it was
14:13realistic. Then we get to bedrooms and
14:15bathrooms. And there's another important
14:17change here. Each option now shows how
14:19many homes I'd get before I choose it.
14:21Maybe three bedrooms leaves me with 459
14:24homes, while four leaves me with 229. So
14:28I can see what making the filter
14:30stricter will cost me before I make the
14:32decision. Instead of choose something,
14:35see what happened, go back, try
14:37something else, the interface gives me
14:39that information upfront. And we can
14:41push the bedroom control one step
14:43further. So far, we've assumed that if I
14:46choose three bedrooms, I mean three or
14:48more, but maybe I genuinely want
14:50somewhere between two and four bedrooms.
14:52This version lets me select two then
14:54four and creates a range between them
14:56that gives us more flexibility and more
14:59control. The trade-off is that all this
15:01extra content makes the interface
15:03busier. So, the challenge is knowing
15:05what information genuinely helps the
15:06decision and what just adds noise. And
15:09that's it for today's video. Let us know
15:11which version you preferred, what you
15:12would have done differently, or anything
15:14you completely disagree with. We want to
15:16hear it all. Oh, and one last thing.
15:19Unfortunately, I did catch a cold
15:21halfway through recording this video, so
15:23apologies if you noticed. I should be
15:26back to 100% by the end of the month.
15:28Hope you enjoyed this video, and we'll
15:30see you in the next one.

About this transcript

This page contains the full transcript of 4 levels of UI/UX Design (the gap is INSANE) by uxpeak, generated from the public captions YouTube serves with the video. The transcript has 2,952 words across 433 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.