Top 3 UX/UI Redesigns That Make You Design Like a Pro — Transcript

Full transcript

1. 0:01Today, we're breaking down three AB
2. 0:03tests from apps.
3. 0:04Paywalls,
4. 0:06ride-hailing,
5. 0:08bookings,
6. 0:10that will completely change how you
7. 0:11think about interface design. You're
8. 0:13going to love it. For each one, we're
9. 0:15going to show you two screens, A and B.
10. 0:19They look really similar. Both look
11. 0:20fine, but one of them performs
12. 0:22dramatically better.
13. 0:24Pause the video on each one and see if
14. 0:26you can spot which one won before we
15. 0:28explain it. If you want, keep track of
16. 0:31how many you guess right and let us know
17. 0:32in the comments at the end.
18. 0:36Look at these two screens. Same app,
19. 0:39same price, same $19 a month, same free
20. 0:42trial.
21. 0:43One of them converts much better than
22. 0:45the other. Pause the video and tell me
23. 0:48which one you think is better.
24. 0:50Okay, let's go. It's B. And here's the
25. 0:53crazy part. B doesn't even try to sell
26. 0:55you. That's exactly why it wins. Let me
27. 0:57show you what's happening. Screen A is a
28. 0:59classic paywall. Big hero image with
29. 1:02some space art, a bold headline, "Get
30. 1:04access to 1,000 plus futuristic and fun
31. 1:08games." Then the price, $19 per month.
32. 1:11Then three feature bullets with icons.
33. 1:14Instant unlimited access, new games
34. 1:16added weekly, members-only rewards. And
35. 1:20at the bottom, a big purple button that
36. 1:22says, "Subscribe and start 7 days for
37. 1:25free." It's a perfectly reasonable
38. 1:27screen. You've seen this layout a
39. 1:28hundred times. And that's the problem.
40. 1:32Because the moment a user sees this
41. 1:33screen, the brain asks one question. Is
42. 1:36this worth $19 a month? And that is a
43. 1:39brutal question to land on someone who
44. 1:42opened your app 30 seconds ago. They
45. 1:44haven't played a single game. They
46. 1:46haven't felt any value. And now you're
47. 1:48asking them to evaluate three bullet
48. 1:50points and decide if that's worth $19
49. 1:52every month for the foreseeable future.
50. 1:55That's not a decision. That's homework.
51. 1:57And the easiest answer to homework is
52. 1:59I'll think about it later, which means
53. 2:01never.
54. 2:03Now, look at screen B. Same price, same
55. 2:05trial, but a completely different
56. 2:07question. The headline says, "How your
57. 2:09free trial works." Not, "Here's what you
58. 2:11get." Not, "Here's why you should pay."
59. 2:13Just, [music] "Here's how the free thing
60. 2:15works." And the user's brain immediately
61. 2:17shifts from, "Is this worth $19?" to
62. 2:20"Can I try this for free?" And the
63. 2:22answer to that question is obviously
64. 2:24yes. You've gone from a hard question to
65. 2:26an easy one. That's the entire game.
66. 2:29But the way B delivers this is where it
67. 2:31gets really smart.
68. 2:33There's a timeline. Three steps. Today,
69. 2:36day five, day seven. And each one tells
70. 2:38you exactly what happens. Today, you
71. 2:41unlock the full library. Day five, we
72. 2:43send you a reminder that your trial is
73. 2:45ending soon. Day seven, your first
74. 2:47charge begins. Cancel anytime before.
75. 2:50Now, that day five line, that single
76. 2:53line is doing more psychological work
77. 2:55than all three feature bullets on screen
78. 2:57A combined. Because it says, "We will
79. 2:59warn you before we charge you." Think
80. 3:01about what that communicates. It says,
81. 3:04"We're not trying to trap you. We're
82. 3:06actually going to remind you so you can
83. 3:08make an informed decision." This
84. 3:09triggers something called transparency
85. 3:11bias. When a company proactively reveals
86. 3:14a potential downside, users trust them
87. 3:16more, not less. It feels like the
88. 3:18company is on your side. And a user who
89. 3:20trusts you is a user who converts. Now,
90. 3:23look at the buttons. This seems like a
91. 3:25tiny difference, but it's massive. The
92. 3:27word subscribe carries commitment's
93. 3:29weight. Your brain hears subscribe and
94. 3:31thinks recurring payment, hard to
95. 3:34cancel, I'm locked in. And then the
96. 3:36button tries to soften it with, "And
97. 3:38start 7 days for free." But it's too
98. 3:40late. Screen B uses start. Start is
99. 3:43light. Start implies a beginning, not a
100. 3:46commitment. [music] And notice it says,
101. 3:47"My free trial." Not, "Your free trial."
102. 3:51My. That one word creates a sense of
103. 3:53ownership before you've even tapped the
104. 3:55button. And then underneath, start in
105. 3:57two taps. This is brilliant because your
106. 4:00brain hates uncertainty. Will there be a
107. 4:02form? Do I need my credit card? How many
108. 4:05steps? Start in two taps kills every
109. 4:07single one of those questions with a
110. 4:09number. Not quick setup, not easy setup.
111. 4:12The number does the convincing. It's the
112. 4:14same reason delivery in 23 minutes
113. 4:16converts better than fast delivery.
114. 4:19Specificity is trust. Look at the hero
115. 4:22images. Screen A has this beautiful
116. 4:24space illustration with planets and
117. 4:26meteors. It's gorgeous, but it's
118. 4:28decorative. It does not answer the
119. 4:30question, what am I actually getting?
120. 4:33Screen B shows actual game characters.
121. 4:36Different games, different styles, all
122. 4:38visible. The user can immediately see
123. 4:40what they're subscribing to, and you
124. 4:42can't commit to something you can't
125. 4:43visualize. So, here's the full picture.
126. 4:46Screen A asks a hard question. Screen B
127. 4:49asks an easy one. Screen A lists
128. 4:51features. Screen B shows a timeline.
129. 4:54Screen A says subscribe. Screen B says
130. 4:57start. Screen A hopes you'll trust them.
131. 5:01Screen B proves they're trustworthy by
132. 5:03promising to remind you before they
133. 5:05charge you. Same app, same price, same
134. 5:08offer. The one feels like a sales pitch
135. 5:11and the other feels like a safety net.
136. 5:13And users don't buy from sales pitches.
137. 5:15They buy from safety nets. The best
138. 5:17paywall is the one that makes the user
139. 5:19feel safe, not sold. Today, we have
140. 5:22something exciting to share. We are
141. 5:23launching UX Peak Plus, a new design
142. 5:26learning platform that teaches the
143. 5:28advanced UX and UI skills designers
144. 5:31actually need today. Most design
145. 5:33education still teaches the same basics.
146. 5:35How to pick a typeface, how to space
147. 5:37your buttons, and how to use Figma. And
148. 5:39those things matter, but they're not
149. 5:40what's actually holding designers back.
150. 5:43You don't need another lesson on
151. 5:44typography. You need to understand how
152. 5:46top e-commerce sites design product
153. 5:49pages that actually convert.
154. 5:51How the best apps onboard new users so
155. 5:54they stick around past day one.
156. 5:56The pricing psychology top SaaS
157. 5:58companies use to drive conversion.
158. 6:01And how to use AI the way top designers
159. 6:04use it to move faster, design better,
160. 6:07and stay ahead. The real advanced stuff
161. 6:09designers need to know in 2026 that
162. 6:12nobody else is teaching. That's what UX
163. 6:14Peak Plus is. We break down how top
164. 6:17companies like Spotify, Notion, Airbnb,
165. 6:20and Duolingo actually design their
166. 6:21products. It's the kind of learning that
167. 6:23makes you genuinely better. The kind
168. 6:25that gets you promoted, makes your
169. 6:26designs convert, and gets people to
170. 6:28actually use what you built. We're also
171. 6:30releasing a new course every week. So,
172. 6:32for every month you're a member, you get
173. 6:34four new courses added to your library.
174. 6:36But, you don't have to decide blindly.
175. 6:38You can start for free at uxpeak.com
176. 6:40with free course and no credit card
177. 6:42required. And if you decide to join, use
178. 6:44code UX Peak 20 to get 20% off with our
179. 6:47launch offer. You'll also have a 7-day
180. 6:49money-back guarantee. So, if it's not
181. 6:51for you, there's no risk. Now, let's get
182. 6:53back into the second example. Okay, so
183. 6:55in the last tip, we talked about how the
184. 6:57words on your paywall change whether
185. 6:59someone subscribes or bounces. But, what
186. 7:02happens when the problem isn't the
187. 7:03words? It's the number. Not how much you
188. 7:06charge, how you show it. Look at these
189. 7:08two ride-hailing screens. Same ride,
190. 7:12same route,
191. 7:13same Tuesday afternoon. One of them gets
192. 7:16significantly more bookings. The other
193. 7:18one was actually losing the company
194. 7:20money. And this time it's tricky because
195. 7:22the one that looks more honest is the
196. 7:24one that fails. Pause the video and tell
197. 7:26me which one you think won.
198. 7:30It's B. And no, it's not because it's
199. 7:32cheaper. The average fare is almost
200. 7:35identical. The difference is entirely in
201. 7:37how the price is presented. Version A
202. 7:40shows price ranges. Go X $13 to $17.
203. 7:44Comfort $17 to $22. Go XL $16 to $21.
204. 7:49Feels honest, right? Except your brain
205. 7:51doesn't process ranges the way you think
206. 7:53it does.
207. 7:55When you see 13 to 17, you don't think
208. 7:57probably 15. You grab the high number,
209. 8:0017. That's called anchoring. Now Go X
210. 8:03feels like a $17 ride you might get
211. 8:06lucky and pay 13 for. And you're doing
212. 8:08that mental negotiation on three options
213. 8:11simultaneously. Go X could be 17,
214. 8:13Comfort could be 22, Go XL could be 21.
215. 8:17Too many unknowns, too many what ifs.
216. 8:19And the easiest decision becomes no
217. 8:21decision. Close the app, just walk.
218. 8:23Version A asks, "How much are you
219. 8:25willing to risk?" Version B asks, "Which
220. 8:28one do you want?" Easy questions get
221. 8:30fast answers. One number per ride. No
222. 8:32range, no negotiation. Your brain
223. 8:35compares three clear prices in about 2
224. 8:37seconds. Researchers call this
225. 8:39evaluative ease. The less work a
226. 8:41decision requires, the more likely
227. 8:43someone is to make it. But B does more.
228. 8:45Under Go X, it says 12:53 p.m., 2
229. 8:49minutes away. This reframes a cost
230. 8:51decision into a convenience decision.
231. 8:53You're not evaluating a price anymore. A
232. 8:55car is 2 minutes away and it costs less
233. 8:58than lunch.
234. 8:59Then there's a tiny green badge that
235. 9:01says cheaper. One word. Doesn't say
236. 9:03cheaper than what. Your brain reads it
237. 9:05and immediately categorizes this as the
238. 9:07smart choice. A single green word did
239. 9:09the thinking for you. And one more.
240. 9:11There's a destination card on the map
241. 9:13before you even see the ride options.
242. 9:16The Westin St. Francis, San Francisco.
243. 9:19That's commitment consistency. You
244. 9:21already decided where you're going. The
245. 9:24only question left is which car. And
246. 9:26that's a much smaller decision than
247. 9:27should I take a ride at all. If you're
248. 9:30showing users a range when you could
249. 9:31[music] show them a number, you're not
250. 9:33being transparent. You're creating
251. 9:34doubt. And doubt is the most expensive
252. 9:37thing in your interface. You probably
253. 9:39know this feeling. You need to design
254. 9:41something, maybe a paywall, checkout
255. 9:43flow, onboarding screen, booking flow.
256. 9:45So, you go looking for inspiration.
257. 9:47Maybe you open Dribbble and everything
258. 9:49looks beautiful, but the problem is you
259. 9:51don't know if it was actually shipped,
260. 9:52tested, or used in the real world.
261. 9:55Pretty UI can inspire how something
262. 9:56looks, but real product screens can
263. 9:58teach you if something really works.
264. 10:01That's why we used Mobbin for creating
265. 10:02this video. We've looked at hundreds of
266. 10:04different paywall screens and booking
267. 10:06screens to give you the best tips.
268. 10:08Mobbin gives you a huge library of real
269. 10:10mobile and web app screens. You can
270. 10:12search for paywalls, onboarding,
271. 10:14checkout flows, cancellation flows, and
272. 10:16compare how different apps structure the
273. 10:18same moment. So, if you're a designer,
274. 10:20founder, or product person, Mobbin is
275. 10:23genuinely one of the best tools for
276. 10:24that. We use it ourselves, and that's
277. 10:26why we partnered with Mobbin to give you
278. 10:28an exclusive 20% discount on your first
279. 10:30year. You can get 20% off simply by
280. 10:32clicking the link in the description.
281. 10:37So far we've talked about how the words
282. 10:39on your screen change behavior and how
283. 10:41the way you show a number changes
284. 10:43whether someone buys or bounces.
285. 10:46But, what happens when the words are
286. 10:47fine and the numbers are fine, and it
287. 10:50still doesn't convert?
288. 10:51>> [music]
289. 10:51>> That's when the problem isn't what
290. 10:53you're showing, it's how it makes them
291. 10:55feel. Look at these two booking screens.
292. 10:57Same villa, same price, 89 euros a
293. 11:00night, same dates,
294. 11:02same beds, same bathroom.
295. 11:05One of these gets dramatically more
296. 11:07bookings than the other. Pause the video
297. 11:08and tell us which one.
298. 11:12Got it? It's B. And this one is
299. 11:14important because screen A does
300. 11:15absolutely nothing wrong.
301. 11:18The title is clear, the rating is
302. 11:19visible, the price is big, the dates are
303. 11:21there, the reserve button works. If you
304. 11:23showed this to a designer, they'd say,
305. 11:25"Yeah, that's fine." And that's exactly
306. 11:27the problem. Fine doesn't book villas.
307. 11:30Look at what screen A actually gives
308. 11:32you. A nice photo of the villa but
309. 11:34tucked into a small thumbnail at the
310. 11:36top, almost like it's afraid to take up
311. 11:38space. Beach house with garden, 4.82
312. 11:41stars, 89 euros per night, check in
313. 11:44March 28, check out April 2, two guests,
314. 11:47reserve. That's a form. You're filling
315. 11:49out a form and nobody has ever felt
316. 11:51excited about filling out a form. Now
317. 11:54look at screen B. Same exact photo, but
318. 11:56the photo isn't squeezed into a small
319. 11:58thumbnail anymore, taking over the top
320. 12:00half of the screen. You're not looking
321. 12:02at a listing card, you're looking at a
322. 12:03place you might actually go. There are
323. 12:05navigation badges, super host,
324. 12:08guest favorite,
325. 12:10one of 24 photos.
326. 12:12You haven't read a single word and you
327. 12:14already feel something. [music] That's
328. 12:16the difference. Screen A informs you,
329. 12:18screen B transports you.
330. 12:21Then the title. Screen A says, "Beach
331. 12:23house with garden." Screen B says,
332. 12:25"Beachside escape steps from the sand."
333. 12:28Same place, but beachside escape
334. 12:30activates emotional imagination. Steps
335. 12:33from the sand gives you a specific
336. 12:35spatial detail. You don't have to walk
337. 12:37for 10 minutes to reach the beach. This
338. 12:39is sensory language. It makes you feel
339. 12:41like you're already on holiday before
340. 12:43you've even checked the price. Now the
341. 12:45price. Screen A just shows 89 euros.
342. 12:49There's no reference point. Screen B
343. 12:51shows 129 euros crossed out, then 89
344. 12:54with a green minus 31% [music] badge.
345. 12:57Same price, but now it feels like a
346. 12:59deal. That's anchoring working for you
347. 13:02instead of against you, which is exactly
348. 13:04what we talked about in the last tip.
349. 13:06The dates. Screen A shows two input
350. 13:08fields, March 28 and April 2. Screen B
351. 13:12shows Friday, March 28 to Wednesday,
352. 13:15April 2 with the purple badge that says
353. 13:17five nights. Day names make the trip
354. 13:19feel real. You're already planning your
355. 13:21Friday arrival and the night count saves
356. 13:23you the mental math. Every piece of
357. 13:25friction you remove is a reason to keep
358. 13:28going.
359. 13:29The button, screen A [music] says
360. 13:30reserve. Reserve what? For how much
361. 13:32total? Screen B says reserve 445 euros
362. 13:36total. The total is right there. No
363. 13:38anxiety about hidden fees on the next
364. 13:40screen. And underneath, a green shield
365. 13:43that says free cancellation before March
366. 13:4526. The number one booking objection is
367. 13:48what if my plans change? That single
368. 13:51line answers it before the user even
369. 13:53asks. Three tips in and the pattern is
370. 13:55the same every time. That is all for
371. 13:57today.
372. 13:58If you take one thing from this video,
373. 14:00take this. Every element on your screen
374. 14:03is asking the user a question. And the
375. 14:05question you're asking determines
376. 14:06whether they act or hesitate. That's the
377. 14:09whole thing. Once you start seeing it,
378. 14:11you can't unsee it. And your designs get
379. 14:12better immediately.
380. 14:14If one of these tips surprised you, we'd
381. 14:16love to hear which one. Also, let us
382. 14:18know in the comments if you'd like to
383. 14:19see more of these. Thanks for watching.