This UI/UX Redesign Will Teach You More Than 100 Tutorials — Transcript

Full transcript

1. 0:00Take a look at this ugly product page. I
2. 0:03want you to look at it carefully. How
3. 0:05many UX and UI mistakes can you spot?
4. 0:07Pause the video. Write your number in
5. 0:08the comments. But, be honest, okay?
6. 0:13Ready? If you found at least 10
7. 0:15mistakes, congratulations, you are a
8. 0:17great designer.
9. 0:18I can see at least 15 major mistakes.
10. 0:21Some are obvious. Some are much easier
11. 0:23to miss. My goal is that by the end of
12. 0:25this video, you'll know how to design
13. 0:27the best product pages that users
14. 0:28absolutely love. So, let's apply some of
15. 0:31our UX peek magic and fix it one by one.
16. 0:34The difference will be huge, and I'll
17. 0:35reveal a few cool surprises as well.
18. 0:37Mistake one, icons lost in the image.
19. 0:40The product image goes all the way to
20. 0:42the edge, and the navigation icons sit
21. 0:44directly on top of it. At first, this
22. 0:46might seem fine. The icons are visible,
23. 0:48but they're only visible because this
24. 0:50specific image is dark enough. Now,
25. 0:52watch what happens when we switch the
26. 0:54product image to something brighter,
27. 0:55like pineapple. The icons almost
28. 0:57disappear. And this is a very common UI
29. 1:00problem. Product pages don't have one
30. 1:02image forever. They need to work with
31. 1:03dark images, bright images, busy images,
32. 1:07simple images, lifestyle photos, and
33. 1:09clean product shots. So, the fix is
34. 1:11simple. We add a subtle background
35. 1:13container behind the icons. We give the
36. 1:15icons enough contrast, and we add a thin
37. 1:17outline so they stay readable on
38. 1:19different backgrounds. Now, the icons
39. 1:21work no matter what product image is
40. 1:22used. This is the difference between
41. 1:24designing for one screen and designing
42. 1:26for a real product system. And one of
43. 1:28the best ways to do that is to study how
44. 1:30great products already solve similar
45. 1:31problems. That's why I use Mobbin. With
46. 1:33Mobbin, you can explore real product
47. 1:35flows from some of the best apps in the
48. 1:37world. So, if you are designing an
49. 1:38e-commerce experience, you can look at
50. 1:40product pages, checkout flows, order
51. 1:43confirmations,
52. 1:44saved items, and so many other patterns.
53. 1:47It helps you see how strong products
54. 1:48guide users through the full journey,
55. 1:50from discovering a product to buying it
56. 1:52and tracking the order afterwards. And
57. 1:54because we partnered with Mobbin for
58. 1:56this video, you can get 20% off your
59. 1:58first year subscription using our link
60. 1:59below.
61. 2:00Mistake two, the product image. Product
62. 2:03images are one of the most important
63. 2:05parts of any e-commerce page. They
64. 2:07create emotion. They build trust. And in
65. 2:09many cases, they take up the largest
66. 2:11part of the screen.
67. 2:13Here we have six options. A, B, C, D, E,
68. 2:18and F. Pause the video and pick the one
69. 2:21you think works best.
70. 2:23Okay, if you picked F, you're right. But
71. 2:26not just because it looks clean. Here's
72. 2:28why. Option A is too busy. The
73. 2:30strawberries filled the entire frame.
74. 2:32So, there's no clear focal point. Option
75. 2:34B has a focal point, but the focus is
76. 2:37the hands, not the product. It feels
77. 2:38more like a lifestyle photo than a clean
78. 2:41product image. Option C looks simple,
79. 2:43but it shows one strawberry while the
80. 2:45product is sold by weight. That creates
81. 2:47a small mismatch in the user's mind.
82. 2:49Option D is styled nicely, but the pink
83. 2:51background feels a bit artificial. For
84. 2:53fresh organic food, the image should
85. 2:55feel natural, honest, and real. Option E
86. 2:58is actually strong. The strawberries
87. 3:00look fresh, natural, and high-quality.
88. 3:02But there's one problem. This image will
89. 3:04not live alone. It will sit inside a
90. 3:06product grid next to many other
91. 3:08products. If every product has a
92. 3:09different background, different
93. 3:11lighting, different props, and different
94. 3:12colors, the full catalog starts to feel
95. 3:14messy. That's why F wins. It keeps the
96. 3:17natural feeling of the strawberries,
97. 3:19places them on a clean background. The
98. 3:21product becomes the focus, and the
99. 3:22entire catalog can follow the same
100. 3:24visual system. This is an important
101. 3:26principle. A good product image is not
102. 3:29just beautiful by itself. It also has to
103. 3:31work inside the full shopping
104. 3:32experience.
105. 3:34Mistake three, alignment. This one is
106. 3:36simple, but it makes a huge difference.
107. 3:38In professional UI design, text, icons,
108. 3:41prices, buttons, and sections should
109. 3:44follow a clear layout grid. Right now,
110. 3:46some elements are slightly too far left.
111. 3:48Others are slightly too far right. And
112. 3:51the spacing feels inconsistent. When
113. 3:53alignment is off, users may not
114. 3:55consciously notice it, but they feel it.
115. 3:57The screen feels less calm, less
116. 3:59structured, less trustworthy. So, we
117. 4:01clean it up. We define consistent
118. 4:03margins. For example, if the content
119. 4:05starts 24 pixels from the left, it
120. 4:07should follow the same structure across
121. 4:09the screen. Once everything snaps into
122. 4:11the same grid, the page instantly feels
123. 4:13more balanced, more intentional, and
124. 4:15more professional.
125. 4:17Mistake four, color. The colors in this
126. 4:19design are too bright, too saturated,
127. 4:22and they emphasize the wrong things.
128. 4:24That creates two problems. First, the
129. 4:26screen becomes harder to read. Second,
130. 4:28the hierarchy becomes weaker because too
131. 4:30many elements are competing for
132. 4:31attention. On a fresh organic food
133. 4:33product page, the color should support
134. 4:35the product. They should not overpower
135. 4:37it. So, we switch to a softer, more
136. 4:39natural palette. The interface now feels
137. 4:42calmer, cleaner. This is what good color
138. 4:45does. It sets the mood, supports the
139. 4:47product, and helps users focus on what
140. 4:49matters.
141. 4:51Mistake five, typography. Fonts can
142. 4:53completely change how a design feels.
143. 4:56Right now, the screen uses too many font
144. 4:58styles, and the type doesn't feel fully
145. 4:59consistent. A good product page doesn't
146. 5:02need many fonts. In most cases, one
147. 5:04strong font family is enough. You can
148. 5:07create hierarchy using size, weight,
149. 5:09color, and line height. So, we simplify
150. 5:12the typography. We use Lato, [music] a
151. 5:14cleaner font. Now, the design has a much
152. 5:17stronger foundation. Mistake six,
153. 5:20labels. Now, let's look at the labels.
154. 5:22The fruits label feels cramped because
155. 5:25the letters are too close together. For
156. 5:26small uppercase labels, adding a little
157. 5:28letter spacing usually helps the text
158. 5:30breathe. But, the bigger issue is the
159. 5:32discount badge. Right now, it says 20%
160. 5:35off discount and also includes an icon.
161. 5:37That's too much for a small label. In UI
162. 5:39design, badges should be quick to scan.
163. 5:41The user should understand them
164. 5:42instantly. Something like 20% off is
165. 5:44enough. It still communicates the offer,
166. 5:46but it's no longer stealing too much
167. 5:48attention from the product itself.
168. 5:50Mistake seven, the title. The title is
169. 5:53one of the most important pieces of
170. 5:54information on the page. It tells the
171. 5:56user what they're buying, so it needs to
172. 5:58be clear, readable, and easy to scan.
173. 6:00Right now, the title feels slightly
174. 6:02unbalanced. It's bold, but the size and
175. 6:04weight do not create the right
176. 6:05hierarchy. A product title should stand
177. 6:08out without shouting. So, we adjust the
178. 6:09size, we adjust the weight, and we make
179. 6:12it feel more natural inside the layout.
180. 6:14Now, the title is easier to read, easier
181. 6:16to scan, and much better balanced with
182. 6:18the rest of the page. Mistake eight,
183. 6:20paragraph text. Now, let's fix the
184. 6:22paragraph text. The lines are too close
185. 6:25together, which makes the description
186. 6:26feel tight and harder to read. Paragraph
187. 6:29text should not fight for attention. It
188. 6:31should help the user understand the
189. 6:32product comfortably. So, we increase the
190. 6:35line height, we slightly reduce the
191. 6:36contrast of the body text. This will
192. 6:38make the paragraph feel easier to scan.
193. 6:41A simple typography rule is this,
194. 6:43headlines attract attention, paragraphs
195. 6:45support understanding. When the
196. 6:47paragraph is easier to read, the whole
197. 6:48page feels calmer and more trustworthy.
198. 6:51Mistake nine, review placement. Now,
199. 6:54we're getting deeper into UX thinking.
200. 6:56The rating is currently too far away
201. 6:58from the product title. That's a problem
202. 6:59because reviews are one of the strongest
203. 7:01trust signals in e-commerce. When users
204. 7:03see the product name, they should also
205. 7:05quickly see how well it's rated. What is
206. 7:07it and can I trust it? So, we move the
207. 7:09rating closer to the title. Now, users
208. 7:12immediately understand three important
209. 7:14things, what the product is, how it's
210. 7:16rated, and whether other people trust
211. 7:18it. This makes the buying decision feel
212. 7:20easier. Good UI is not just about
213. 7:22arranging elements. It's about placing
214. 7:24information where the user needs it
215. 7:25most.
216. 7:26>> [music]
217. 7:27>> We're still far from a great design, but
218. 7:28if you compare it with where we started,
219. 7:30you can already see a big improvement.
220. 7:32And you'll love what's coming next. This
221. 7:34is the part of design that most
222. 7:36tutorials skip. They show you how to
223. 7:38make the screen look nicer, but they
224. 7:39don't always explain why one decision
225. 7:41makes the product easier to use, easier
226. 7:44to trust, or easier to buy from. And
227. 7:46that's really the whole idea behind the
228. 7:48UX Peak Plus platform. Inside UX Peak
229. 7:50Plus, we break down real UX and UI
230. 7:52decisions like this. Not just what looks
231. 7:54great, but why it works, how it affects
232. 7:57the user, and how you can apply the same
233. 7:59thinking to your own designs to build
234. 8:00the best websites,
235. 8:02>> [music]
236. 8:02>> apps,
237. 8:03or software application. If you want to
238. 8:05grow as a designer or product person,
239. 8:07you need to understand the thinking
240. 8:08behind strong product design. So, if you
241. 8:10want to go after this video, use code
242. 8:12redesign 25 to get 25% off UX Peak Plus.
243. 8:17You can find everything on our website.
244. 8:19Now, let's continue with the redesign.
245. 8:21Mistake 10, feature icons. At first
246. 8:24glance, this section might seem fine. It
247. 8:26communicates useful product benefits,
248. 8:28but visually, there are several
249. 8:30problems. There are too many colors. The
250. 8:32icon styles are inconsistent. Some icons
251. 8:35feel heavy, some feel light, some are
252. 8:37filled, some are outlined. In good UI
253. 8:40design, icons should share the same
254. 8:41visual logic. So, we simplify the
255. 8:44colors. We make the icon style more
256. 8:46consistent, and we tighten the spacing.
257. 8:48Now, the section still communicates the
258. 8:50benefits, but it no longer dominates the
259. 8:52screen. You can use different colors in
260. 8:54UI design, but they need to be used
261. 8:55intentionally. Mistake 11, divider
262. 8:58lines. Now, let's look at the divider
263. 9:00lines. They are extremely dark and
264. 9:02heavy. They pull too much attention.
265. 9:04Divider lines are meant to separate
266. 9:05sections. When dividers are this strong,
267. 9:08the page starts to feel divided into
268. 9:10harsh blocks instead of one smooth
269. 9:12experience. So, we soften them. Now, it
270. 9:14feels subtle, clean, and more elegant.
271. 9:17This is a small detail, but small
272. 9:19details are often what make an interface
273. 9:21feel premium. Mistake 12, spacing
274. 9:24balance. The spacing between some
275. 9:26sections is too large. White space is
276. 9:28important, but too much white space in
277. 9:30the wrong place can make the layout feel
278. 9:32disconnected. So, we tighten the spacing
279. 9:34slightly. Now, the sections sit closer
280. 9:36together, the flow is easier to scan and
281. 9:39the whole interface feels more cohesive.
282. 9:41Good spacing is not just about adding
283. 9:43more empty space. It's about creating
284. 9:44the right relationship between elements.
285. 9:47Mistake 13, redundant price label. Now
286. 9:50let's move to the price area. We can see
287. 9:52the word price before the number, but in
288. 9:53this context, it's unnecessary. When
289. 9:56users see a number with a currency
290. 9:57symbol, they already understand that
291. 9:59this is the price. And if you want to be
292. 10:01super accessible and label the price,
293. 10:04then logically we should also label the
294. 10:06quantity selector next to it. Otherwise,
295. 10:08the interface becomes inconsistent. So
296. 10:11the cleaner solution is simple. Remove
297. 10:12the label completely. Let the price
298. 10:14speak for itself.
299. 10:16Mistake 14, product quantity and price
300. 10:19placement. The product title includes 1
301. 10:21kg, but this creates a problem. Why?
302. 10:24Because the user can already change the
303. 10:25quantity using the selector. So the
304. 10:27product is no longer fixed to 1 kg. That
305. 10:29makes the title misleading. Instead, the
306. 10:31title should describe the product
307. 10:32itself. The quantity should be handled
308. 10:34separately in the buying area. There's
309. 10:36also another improvement we can make.
310. 10:38The price is currently placed quite far
311. 10:40down the screen. There are different
312. 10:41ways to handle pricing depending on the
313. 10:43product, the audience, and the buying
314. 10:45context. But in this case, users should
315. 10:48see the price much earlier. Now when
316. 10:50users see the product, they immediately
317. 10:52understand what it is, how good it is,
318. 10:55and how much it costs. Mistake 15, the
319. 10:57purchase action. The add to cart button
320. 10:59should be the most important action on
321. 11:01the screen, but right now it feels too
322. 11:03aggressive. The text is all caps, the
323. 11:06size is large, the button feels like
324. 11:07it's shouting. So, we soften it. We make
325. 11:10it feel more refined. But there's
326. 11:12another issue. The quantity selector is
327. 11:14too far away from the add to cart
328. 11:16button. When users buy something, they
329. 11:18choose how much they want, then they add
330. 11:19it to the cart. So, we place them next
331. 11:21to each other. We also add the unit,
332. 11:23kilograms, directly inside the selector.
333. 11:25And finally, we add the total price
334. 11:27inside the add to cart button. Now the
335. 11:29user knows what they're about to pay
336. 11:30before they click. That removes
337. 11:32uncertainty. But, this is where many
338. 11:34redesigns stop. The mistakes are fixed,
339. 11:36the page looks cleaner, but strong
340. 11:38product design is not just about fixing
341. 11:40what is broken. It's about making the
342. 11:41whole experience feel easier. Now, let's
343. 11:44take this redesign one step further.
344. 11:46Improvement one, turn the content into a
345. 11:48scrollable card. First, we turn the
346. 11:50content area into a soft scrollable card
347. 11:53with rounded corners and a subtle
348. 11:54shadow. The product image has its own
349. 11:56space. The product details have their
350. 11:58own space. As the user scrolls, the card
351. 12:01slides up over the product image,
352. 12:03keeping the product visible for the
353. 12:04first part of the experience. Then, once
354. 12:06the image is no longer the main focus,
355. 12:08the product title transitions into the
356. 12:10top navigation and stays sticky. So,
357. 12:12even when the user scrolls deeper into
358. 12:14the page, they never lose context.
359. 12:16Improvement two, add a sticky bottom
360. 12:18action area. Now, the quantity selector
361. 12:20and add to cart buttons stay visible
362. 12:22while the user scrolls. This is powerful
363. 12:24because users don't always decide to buy
364. 12:26at the top of the page. Sometimes, they
365. 12:28scroll. They read more details. They
366. 12:30look at related products. And when they
367. 12:32finally feel ready, they can act
368. 12:34immediately. And this is where the
369. 12:36design becomes much stronger because we
370. 12:38are no longer just making the screen
371. 12:39look better. We are making the buying
372. 12:41experience easier.
373. 12:43Improvement three, add predefined
374. 12:45quantity options.
375. 12:46For example, 500 g, 1 kg, 2 kg. Instead
376. 12:51of forcing users to tap the quantity
377. 12:53selector multiple times, they can choose
378. 12:54a common option with one tap. And these
379. 12:56options can be based on real purchase
380. 12:58data. If most customers buy 1 kg or 2
381. 13:00kg, those should be easy to select. We
382. 13:03still keep the custom quantity selector
383. 13:05for flexibility. This is a small UX
384. 13:07improvement with a real business impact.
385. 13:09And now, we have a design that scales
386. 13:10beautifully across different products.
387. 13:12The images feel consistent. The layout
388. 13:14feels predictable. The product
389. 13:16information is easy to scan. This is
390. 13:18what strong UI design looks like. So,
391. 13:20what do you think? Is this new version
392. 13:21better than the original? How many of
393. 13:23the 15 mistakes did you spot before I
394. 13:25revealed them? Let me know in the
395. 13:26comments. I'm genuinely curious to see
396. 13:28how many you found. Thank you for
397. 13:29watching, and see you in the next video.