Ecommerce Page Redesign: UX/UI Tips to 3.5x Conversion — Transcript

Full transcript

1. 0:00Same product, same price,
2. 0:04same traffic.
3. 0:06One of these pages converts at 2%, the
4. 0:09other converts at 7%. That's not a small
5. 0:12difference. That's three and a half
6. 0:15times more revenue from the exact same
7. 0:17visitors.
8. 0:19So, what's different? [music]
9. 0:20It's not the product. It's not even the
10. 0:22offer. One page shows a product, the
11. 0:25other one sells it. It's guiding someone
12. 0:28from this looks interesting all the way
13. 0:30to I need this. Answering questions
14. 0:33before they're asked, removing doubts
15. 0:35before they form, building trust at
16. 0:37every single step. And every single
17. 0:40decision that creates that difference,
18. 0:43we're going to go through it right now.
19. 0:46Before the user even reads the product
20. 0:48name, their eyes hit a visual anchor. We
21. 0:51added a subtle but clear best-seller
22. 0:53badge right above the product title.
23. 0:55This uses the halo effect. By
24. 0:58immediately crowning the product with a
25. 0:59status badge, whether you choose
26. 1:01best-seller, new arrival, or top-rated,
27. 1:05you frame the user's entire perception
28. 1:07[music] of the product before they've
29. 1:09read a single detail. It instantly
30. 1:12elevates the item's perceived value.
31. 1:15Right next to that, we fixed a massive
32. 1:17missed opportunity with the imagery. The
33. 1:19original design features an isolated
34. 1:21product tub sitting on a plain empty
35. 1:23background. When you sell a physical
36. 1:25product online, the user can't pick it
37. 1:28up. They have to mentally bridge the gap
38. 1:30between that raw powder and the actual
39. 1:32experience of consuming it.
40. 1:34>> [music]
41. 1:34>> We call this the imagination gap. The
42. 1:37solution?
43. 1:38We updated the hero image to show the
44. 1:40tub right next to a freshly mixed icy
45. 1:43glass of the greens and some sliced
46. 1:45pineapple. The human brain processes
47. 1:47images infinitely faster than text.
48. 1:49We're answering the question, "What does
49. 1:51this actually look like?" instantly. By
50. 1:54making the product feel refreshing and
51. 1:56appetizing, we lower the cognitive
52. 1:58effort required to understand [music]
53. 1:59its value. Perfectly round numbers like
54. 2:01100, 200, or 500 subconsciously feel
55. 2:05like an estimate, a placeholder, or
56. 2:08worse, fake. We updated this to a highly
57. 2:11specific 4.9 stars and 221
58. 2:15reviews.
59. 2:16Specific numbers feel much more
60. 2:18authentic and believable to a shopper.
61. 2:21We also added a subtle fire icon with
62. 2:23the text 500 plus sold this week.
63. 2:26Instead of the user thinking, "Should I
64. 2:28be the first person to risk trying
65. 2:30this?" they think, "Wow, hundreds of
66. 2:32people are buying this right now. It
67. 2:34must be great." It's a powerful trust
68. 2:36anchor that naturally encourages them to
69. 2:38join the crowd. Next, let's look at how
70. 2:41users interact with the page [music] to
71. 2:42pick their flavor. The old design hid
72. 2:45the options inside a standard drop-down
73. 2:47menu. Drop-downs are often considered
74. 2:49lazy design because they force the user
75. 2:51to click, scroll, and read just [music]
76. 2:53to see what their basic options are. We
77. 2:55brought these options out into the open
78. 2:57using clear visual swatches with little
79. 3:00fruit icons. The user can [music]
80. 3:02instantly see their three choices
81. 3:04without doing any work. But we pushed
82. 3:06the UI further to solve a very specific
83. 3:08user fear. When buying a health drink,
84. 3:11the biggest question is, "What if this
85. 3:12tastes awful?" To ease [music] this
86. 3:14worry without cluttering our clean
87. 3:16layout, we added a helpful
88. 3:18micro-interaction.
89. 3:19>> [music]
90. 3:20>> When a user hovers over a flavor like
91. 3:22kiwi, a small tooltip smoothly appears
92. 3:25saying, "Light, [music] tart, and not
93. 3:27overly sweet." Good UX anticipates
94. 3:31questions and delivers reassuring
95. 3:32information at the exact moment of
96. 3:35hesitation.
97. 3:36At this point, you might be wondering,
98. 3:38"How do you know the best way to
99. 3:40actually improve a specific part of
100. 3:42design? How do you know which layouts
101. 3:44will get people to buy? [music] And
102. 3:46where do you even look for that
103. 3:47inspiration?"
104. 3:49The reality is, top designers don't rely
105. 3:51on gut feeling or try to reinvent the
106. 3:53wheel. We study what is already proven
107. 3:56to work at the highest level. And the
108. 3:58fastest way we do that is with Mobbin,
109. 4:00the sponsor of this video. Mobbin is our
110. 4:02ultimate design cheat code. It's a
111. 4:04massive library of the most successful
112. 4:06sites and apps on the planet. You can
113. 4:08search for shopping or health [music]
114. 4:09and instantly get inspired by top brands
115. 4:11like Seed or Hims. You get to see
116. 4:13exactly how they structure the pricing
117. 4:15cards, hero images, and trust elements
118. 4:18pixel by pixel. It basically hands you
119. 4:21the proven blueprint of what's
120. 4:23converting instead of having to guess.
121. 4:25If you want to stop designing in the
122. 4:27dark, design with absolute confidence,
123. 4:29and save hours on every project, hit the
124. 4:32first link in the description to check
125. 4:33out Mobbin and grab 20% off. Let's move
126. 4:36to the next section. This is the most
127. 4:38critical area of the entire screen. This
128. 4:41is where a great UX designer stops just
129. 4:43making things look nice and actively
130. 4:46increases a brand's average order value.
131. 4:49The original UI used standard stacked
132. 4:52radio buttons for one-time purchase
133. 4:54versus subscribe and save. Radio buttons
134. 4:57present two visually equal choices,
135. 4:59which usually causes users to default to
136. 5:01the lowest immediate risk, the one-time
137. 5:04purchase. We completely rebuilt this
138. 5:06using dynamic side-by-side selection
139. 5:09cards to create a much smoother flow. By
140. 5:11default, the subscribe card is selected.
141. 5:15It has a gently tinted background and
142. 5:16features a green most popular tag.
143. 5:19>> [music]
144. 5:19>> We are visually guiding the user toward
145. 5:22the best value option. To handle their
146. 5:25fear of getting locked into a contract,
147. 5:27we brought the reassuring details
148. 5:29directly inside the box. Save 15%,
149. 5:33cancel anytime, and priority dispatch.
150. 5:36We calm their financial worries at the
151. 5:38exact second they're making the
152. 5:40decision.
153. 5:41But what happens when the user does
154. 5:43click one-time purchase? We don't just
155. 5:46give up. The UI smoothly expands to
156. 5:49reveal tiered bundle options. A
157. 5:51one-month supply, a two-month supply
158. 5:53with 10% discount, and a three-month
159. 5:56supply with 20% discount. By using
160. 5:59progressive disclosure, we keep the
161. 6:01initial interface clean, but reward the
162. 6:03user's click with new money-saving
163. 6:05options. This gives the user total
164. 6:08autonomy while intelligently
165. 6:09incentivizing a larger upfront purchase.
166. 6:12If you enjoy this kind of thinking
167. 6:14behind UI design, the psychology, the
168. 6:16small interaction details, the way tiny
169. 6:19changes can completely change how people
170. 6:21[music] view your designs. This is
171. 6:23exactly what we break down inside the UI
172. 6:25UX Playbook. It's a practical guide
173. 6:27where we walk through real UI patterns
174. 6:29and explain why they work, how they
175. 6:31influence user decisions, and how you
176. 6:33can apply them in your own designs.
177. 6:35Because good design is rarely about
178. 6:37making something just look nice. It's
179. 6:39about understanding what the user is
180. 6:41thinking, [music]
181. 6:42where they might hesitate, and how small
182. 6:44design choices can guide them smoothly
183. 6:46through [music] an experience. If you
184. 6:48want to get better at spotting these
185. 6:49opportunities in your own work, you can
186. 6:51check out the UI UX Playbook at
187. 6:53uxpeak.com.
188. 6:54And as a small thank you for watching
189. 6:56the channel, you can use the code
190. 6:58playbook50 for a 15% discount. The link
191. 7:01is in the description if you'd like to
192. 7:02explore [music] it.
193. 7:03Finally, let's look at the button and
194. 7:05the trust badges underneath it. The
195. 7:07[music] original button simply says,
196. 7:09"Add to cart." followed by generic text
197. 7:12points. Free shipping, money back, made
198. 7:15in USA. Add to cart is purely
199. 7:17transactional language. It reminds the
200. 7:19user that they're about to spend money.
201. 7:21And generic badges like free shipping
202. 7:23don't build deep trust anymore because
203. 7:25shoppers expect [music] them. The
204. 7:27solution? We softened the primary button
205. 7:29copy to add to cart start my journey.
206. 7:33This subtle shift makes clicking feel
207. 7:35less like a purchase and more like a
208. 7:37positive step in their health routine.
209. 7:40Beneath that, we replaced the generic
210. 7:43text with custom illustrated icons
211. 7:45tailored to what a health-conscious
212. 7:47shopper actually cares about. 100%
213. 7:50vegan, a 60-day guarantee, and most
214. 7:53importantly, third-party tested for
215. 7:56heavy metals. We are actively answering
216. 7:59their unspoken questions about safety
217. 8:01and quality.
218. 8:02Now, let's take one last look at where
219. 8:05we started
220. 8:07and where we ended up.
221. 8:09It's a night and day difference, right?
222. 8:11>> [music]
223. 8:11>> I'm really curious to hear from you all.
224. 8:13Which of these changes do you think
225. 8:14moves the needle the most? Drop a
226. 8:16comment down below and let me know your
227. 8:18thoughts.