Hey, my personal opinion: original design’s price display with size options might work better as it saves clicks and loading to check price of each variant separately. User’s decision making becomes faster when he sees all the variants with price all at once. Maybe UI changes can save more space but ux wise it seems fine. 😊
1. Search bar has no signifier apart from just text which may confuse new users 2. Seller info in the first fold may be important cz many people decide on not purchasing if they see a third party seller 3. The GB variant tab could also act as a comparison tool as the seller can use it to anchor one specific product and drive most sales to it I loved the redesign, It less overwhelming to look at. l hope to see more such videos and learn. Thank You!
That emi price which shows up above the price is actually the ‘Anchoring bias’ which is used purposely to remind us that the product is VERY cheap if buy in instalments compared to the overall price. Also, the stats shows the amount of users purchasing products online through EMIs has significantly grown in India.
Nicely done! Just a few points that were in my mind: - An average user might not realize that the search bar is clickable. Maybe because the 'Search on Amazon' text looks like a heading. I wonder if it's because the text and logo withing the search bar are so prominent. Also, users are conditioned to see the Glass Lens search icon, so adding it back would help. - Sorry if you already answered in the video, but I feel the separation between the back button and the search bar was for a good reason. Combining it might add to the confusion as there is not divider between the hit boxes. - There might be some good metrics to suggest that showing an EMI in a bigger text than the total price was driving more sales to that product. Again, we have to balance out customer and business goals. Just some critique. Great fan of your work at Swiggy!
We need "buy now" button, sometime the cart is already filled with too many items in that case, and it becomes easier for the user to buy item individually. Anyway liked the new redesign.
Correct @pushpaaji I find this issue in many apps which does not have ‘Buy Now’ action button. Its very useful as many times user tend to add products in cart which they don’t need immediately.
Lovely to see you you designing and how you come to all your design decisions. Must be a superb learning experience working with you. Please do more videos like these.
I think we should keep the price with the storage as in the new design the user will have to click on each storage option and then check and calculate the price difference which increases the cognitive load on the user's working memory, so i think from a cognitive ergonomics point of view, that should still be there.
Great video Sapta😍. 10:00 I assume that the extensive product name assists users in locating the product through Amazon's search function, as it enhances visibility by incorporating more keywords. Also, this may facilitate more users arriving at this product detail page (PDP) from various pages or external websites by clicking on ads, links, etc.
3:00 I feel showing EMI instead of price for costlier products helps amazon in increasing their sales. Even I never buy things on EMI, but I too have thought of buying products, that are not in my budget yet, after looking at the EMI thing. So, I feel it's strategically placed there with extra emphasis, and has definitely increased their conversions.
Exactly, and with the Indian market it makes even more sense. It's a big market but Amazon will have to adjust themselves to be still relevant to people with purchasing power not as good as an average American household.
The more I see Saptarshi's work, the more I remember many of Swiggy's design decisions. He definitely has an immense hands-on contribution to their design for sure.
the naming of the product is particularly set in the format because even you type one specification of the product, you will definitely find it ex : it will help customers to find laptop with i5 processor just by seeing the name of the product rather going to the specifications tab of each product individually
1. actually my intention is to buy now.. but here i am searching for that option 2. Amazon choice tag is little bit odd while comparing to overall design 3. Same for offer tag - design is not blending with the whole layout 4. existing search bar is kind of skeuomorphism which it feels like a clickable area.. now current ui is lacking it doesn't feel like a clickable overall i loved the concept and approach...
Great video sapta ! Your attempt is like a breath of freshness amidst amazon's info frenzy I feel 😂 It's focuses on the good stuff without drowning the user in a sea of details - a laid-back approach that just clicks I guess haha?
Ha ha thank you!! 😀 Amazon, just like any other e-commerce, is a very complex product. This wasn’t an easy redesign for me. I spent a lot of time, analysing, trying out and thinking. In spite of all this, I am pretty sure I might have violated many of the must-haves of Amazon.
@@saptarshipr truly yeah. I presume a designer from amazon looking at this video would find it absolutely jarring because like you yourself told multiple times, they've done all this cluttering and choices for a reason, a reason only they know to ensure they put everything upfront inspite of the end product getting complex
Nice! But So you removed " Visit the Apple Store " option. I agree with the container which has price, colors, storage and delivery info. Other than that, Amazon's Present Design doesnt have any issues with its User Experience. That was a good try though 🥳.
Flipkart & Myntra are better than amazon design aesthetic wise and Amazon really needs to get rid of those greens, cause its very unrelated to Amazon's Brand colours. Even a prime blue would be good along with that Orange used for selectors. I am so happy that someone finally decided to address the clutter and not justify its requirement.
It is not typical to include a back button icon within a search bar frame. The purpose of a search bar is to allow users to input their search query, and including a back button within the search bar may cause confusion or clutter the interface. It's best to keep the back button separate from the search bar, typically in the navigation or header area of the app or website. If you have specific design considerations, it's always good to test different options with your users to see what works best for them.
At 10:00, I think the reason why the product name is given as "Apple Iphone 14 - 128 GB Titanium Black" is because the user arrived at the product detail page from the product listing page. On the product listing page, there are a lot of iPhone 14s, such as the iPhone 14 - 64 GB Green, iPhone 14 - 256GB Titanium black etc. So the text provided at the top of the product detail page tells the user again which model they have chosen.
I think putting back icon in search bar and removing search icon from search bar is not a great idea. Back icon is more of a page level action, but now it seems related to search bar, and it'll be more complicated when user starts typing in search bar. Cosidering Amazon is highly search driven, having visual cues is better as for many users visual cues works better then text. For example I don't go and read the text in search bar, I know how search bar looks like or search icon looks like, and start searching. Removing search icon also eliminate the future possibility is Amazon ever tries to experiment with the real state search bar taking. Currently they could have switched it with an icon, but if you remove the icon, then possibility goes away.
sir plz make a tutorial about redesigning what we change in apps/landing page/dashboard. i am facing so much issues about redesigning if you create a short tutorial about these i'm so thankfull of you sir and last love from pakistan.
Hi Sapta, here are a few things I noted. Can you let me know whether these are relevant or not? 1. "In stock" text missing. 2. EMI options. I'm from a middle class family, my friends too. For expensive purchases, we always look at the EMI options available. But I think based on user data and previous purchases, amazon app can priorotize EMI amount or actual amount for respective users. 3. Buy now option. If I'm swiggying, the items are mostly less expensive and I can add a few items to the cart and buy at the end. But in case of amazon, purchases are comparatively expensive and they might only buy one thing at a time. So I believe buy now is much needed. 4. Empty space to the right of "Amazon's choice" badge. We can either - put the favourite and share buttons there - put the star rating there and lift the other elements more to the top
Kudos on the design decisions; they're truly outstanding and informative. Additionally, I'd recommend integrating a dark mode design for enhanced user experience. Animated button effects can also help draw users' attention and encourage interaction. Lastly, ensuring compatibility with the Landscape mode view would further optimize usability.
50+ bought in the past month is a strategic and intentional text that is a kind of psychology used to convince users to buy a product and show its popularity. For example, when I buy beauty products and gadgets and see that 1500+ or more people bought the product in the last month, I mostly end up buying the product. (Sometimes Amazon even shows 5000+ or 7000+ people bought in the last month, Which directly influences the decision of purchasing the product, and I mostly end up buying the product, if the product has a good rating.) Why its powerful maybe works Because: 1) First thought I have is that the product is certainly on sale and believe that the 5% sale offer is true and kind of have a scare mindset, even though it might not be true. 2) I feel like the product must be good that's why so many people bought it since the last month.
9:50 important for SEO and Ranking. I designed the dashboard for NittyGritti (content audit platform for brands on amazon) thats when I realised how much weightage the slightest of changes in title, description, rich text, etc matters.
Although you could use hidden text for SEO, it's not recommended and could lead to penalties from search engines. Good SEO ranking pages suggest to make your details visible and readable for both users and search engines.
Why use excessive SEO keywords when users primarily search within the Amazon app? Wouldn't focusing on simplicity and ease of understanding be more beneficial for the UI/UX redesign?
@saptarshipr Great video sir! I feel "Amazon's Choice" label prominently at the top, you ensure that users' first impression of the product is influenced by the endorsement of the label. By positioning the label near the product image, users can quickly recognize that the item is an "Amazon's Choice" product. This immediate recognition can influence their perception of the product's quality and desirability even before they delve into other details like pricing. This are my UX perspective please correct me if i'm wrong, I welcome your thoughts on this perspective
actually, the amazon choice label is shown on the product listing page itself, that is before user clicking on the product & moving towards the buy now page. So, basically users end up on the amazon choice products because they know it is an amazon choice product.
9:40 One reason why the product name shows the sSize and color on top could be that these items are registered as different products instead of different variants of a single product, which could be tied to an archaic backend which the company may not be able to change on the fly. (due to a huge number or seller being used to an old system and resisting new change) Edit: The modifiers may just be change the product itself on selection instead of changing the variant, due to the way data has been stored since forever.
I think the reason that the title includes all details of the current variant is because Amazon avoids in-page sectional loading. Usually, it performs a full-page content reload when you check or uncheck a filter option, or in this case, select a different variant.
I'm assuming the colour and size are mentioned in the title cuz Amazon shows them all as different products in the list view, so that users don't have to come to a product page and realise the specs they want are not available.
Perhaps. But if Amazon has already aggregating all the variance of a particular particular product as one listing, they need not have done it, perhaps.
I too am a stickler to clean and focused UI. Which led me to do a small poll on Amazons design vs your design preference. Results came out quite interesting. However I guess someone at Amazon saw your video and moved the 'share' and 'like' button in proximity
20:05 is it only me or anyone else thinks that the orange colour doesn't match with the colour combination of the amazon app?? And one thing i would like to add is that while we are taking a look on other photos of the mobile , the image that we are currently viewing in the circle ( under the image)should be larger compared to which we are not viewing currently. Feel free to correct me.
I don't get it! Why is he using groups? 17:15 Is there something I'm missing because I never use groups and it just way messy when I start using groups if someone can help me understand the right use of groups that would be great, Thanks!
Hi I noted one thing, at 5:40 I think the seller was listed at Top that is Apple store and the information is redundant in the size section like you said. So there is a redundancy, right??? Let me know if my observation is incorrect. Thanks
Great video, minor suggestion - Storage size needs to have price with it. as people will need to click and know the price for each variant. Otherwise amazing design sense. loved the video.
Sapta, you ios frame but used google sans font, Why not inter. Doesn’t matter alot but this font giving vibe of android device you know, Google pixel or Stock android like.
Text that says "100+ bought in the last month" in my opinion should be of different color than "Apply Now", because "Apply now" is clickable and first one isn't. Should be given the same color as the primary text color.
Hi Sapta, your video was really engaging and informative. I love the new redesign! I have a suggestion regarding your point about why there's a Prime option for each variant. I believe it's to allow users to quickly identify which variants are eligible for Prime. Having it on each option saves users from the extra step of clicking through each variant to check eligibility.
9:54 In my openion, adding size and color variants will make me understand what variant currently I am looking at. If they didn’t put the 128gb and Titanium Black in name itself. It would be hard for me determine what variant is this. Also putting sizes and colors options will be easier for me as a user to explore other options as well.
Gotta say , disagree with the your design , amazon has nearly perfect product page except the emi price text which is deceiving at first glance and the real price appears way too smaller in comparison , yours in a way is minimal but i would prefer amazon version over yours anyday .
Hey Saptarshi, Thank you for this tutorial, it was really good. This inspires us to do such activity within our team and improve our skills. Being a designer myself I could not resist but note down some feedback and questions for your design. - Back icon looks balanced inside the search bar visually. Assuming that click on Back icon will lead to the previous screen of the app, do you think it is right to keep it inside the search bar? Because Back to previous screen and Search are completely different components with different actions. What are your thoughts on this? - The promotional text of icici credit card in teal color, with appy now as bold and a chevron icon looks forced considering the space. Do you think the whole text needs to be in teal color especially if apply now is bold and has a color? May be the text and be grey or black and only Apply Now can be a link with teal color. And because its a color the chevron icon also seems redundant. Let me know what are thoughts on this. Thank You
Though the redesign comes out good but too many usage of groups can’t really help the developers to convert this design into a functional one easily. I think Auto layout could have been an improvement as well.
I feel there should be a button of the Cart in the corner of every page. so one can go to the cart without going back..... What's your take on this point.
Really liked the redesign, just few things we can be made better ( in my opinion ) It would be better to put like and share button beside the the iphone name ( on right hand side ) since the user can easily reach those icons as in with original design, i would have to stretch my finger a bit 😅....
Hi Sapta, loved the video! One request - could you please mention the shortcut keys on the screen as you design? It would be very helpful for beginners to learn. Thanks.
56:29 bro in the seller central app or website seller can select the picture with pure FFFFFF white if it may slightly be any other colour looks white but not proper FFFFFF then the product having errors while listing.
Cool, Amazon avoid to display pdp add to cart button in bottom bar mostly to encourage users to scroll down and see other stuff like product recommendations, ads, etc
The corollary version I don’t think the EMI option would be necessary to put in the screen itself because the buy now button is removed and if they want to buy the product they would have to put the product in the cart and then buy it which would probably have it own separate page and there we can show the payment option available to the customer.
I liked the way you redesigned but i would like to mention something regarding the "apply now' CTA . I think we can change it to different where the target user can actually engage on that one without making any dilemma on finding it since the font colour of the accompanying text is also same which can lead upto unnoticed. Also one more point on the right side empty space of the Amazon choice badge and price can also be used for something else so that we can get more visibility on other details . Just a simple observation bud. Loved your work 💜
Hey sapta the redesign concept is too good but if we remove the buy now button will that thing does not make the user journey more complex and it might lead to frustration of the user.
9:50 because it is so important for seo and , the seller decide the title so that can do any thing there but we know seo really important for business.
38:39 bro if you open any product page and in the variation like colours or the the storage (size - is the variable name that seller can select as the storage at the backend of seller account) in the selected products every thing is related to 1 seller itself. So obviously it shows the mention time that seller given in backend of seller account.
The final result was good and much better than original design. I would want to know why stars with sharp edges was not preferred instead of stars with curved edges? But in users point of view the design is comfortable. Original one had too many text. Anyways learnt more from you sapta!
