I Redesigned Amazon App | UI/UX Design Tutorial (Step-by-Step) | Saptarshi Prakash

[@PatnaikRohan]

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. 😊

[@DhirajKyawal]

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.

[@ManOnRoad]

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!

[@DhirajKyawal]

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.

[@sameerhussain2579]

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.

[@johnjose6564]

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.

[@ramtube]

We want more videos like this, In depth detailed videos

[@admiralsherlock8403]

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!

[@PatnaikRohan]

Totally agreed. EMI and Buy Now both might have some business metrics for amazon. Removing them might not be a good option.

[@bhavikjain4990]

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.

[@DhirajKyawal]

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.

[@okishan]

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.

[@saptarshipr]

Ah that makes sense. But for SEO, the details could also be mentioned as hidden text, right? Is it necessary to have them as readable text?

[@kartikgupta4355]

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.

[@VisualDesignerSojib]

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?

[@aj-lan284]

original design had so much information which is i feel important but I enjoyed and learnt many things in this video.

[@livelykid]

The original UI was giving me "information overload bias", bombarding with so much of information all at once. However, the redesigned version looks so much better, super clean, visually appealing. Thereby would enable users to make their decisions faster and more effectively. Totally blown away with your ideas, problem-solving skills and design tutorial. Looking forward to learning more from you. :)

[@sameerhussain2579]

Was kya matlb, amazon ka ui abhi bhi wo hi hai 😂

[@altamashkhan5870]

This is where design peak , Sapta i love your content

[@pramodmali-h5t]

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.

[@pranavjoshi3554]

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.

[@arvindwee4634]

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.

[@IsmaVisionn]

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.

[@SudeepSD]

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?

[@saptarshipr]

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.

[@SudeepSD]

@@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

[@pushpaaji]

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.

[@saptarshipr]

Now that you say, that makes a lot of sense! Thanks for letting us know 😀

[@bhavikjain4990]

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.

[@mahitejaneeli]

And I think on a sale day that would become useful.

[@mrhari9249]

like button aligh left side you can change to right because most people are using Instagram,KZbin and that is the user-friendly and new trend

[@adik7121]

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.

[@rahulrs4597]

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

[@ReachBrains]

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.

[@anshikhadesignco]

Okay, so the title of a product is crucial for SEO because it helps the product listing appear in relevant search results. Using "Apple iPhone...." instead of just "iPhone 15" helps the listing show up when someone searches for a specific brand or model. And all the points related to listing like EMI option etc is important for visibility and reaching potential buyers. As a buyer or designer, it might seem like a small or unnecessary details, but it's significant for ensuring the product gets noticed in a crowded MARKETPLACE, even if you're a brand like APPLE. Love your content 🌟

[@sandeeprana1247]

As per my knowledge SEO is applicable on web search and this is an app.

[@anshikhadesignco]

@@sandeeprana1247 SEO works on marketplace apps as well, especially given the high competition resulting from a large number of listings for similar products. It becomes necessary to outperform other listings to ensure the visibility and success of your product.

[@ChintanJain-e8x]

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

[@alkesh482]

Nice thought sapta, yes agreed with you that the current Amazon app is full of information.

[@muhmderfan1171]

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 💜

[@hadilchechu]

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.

[@saptarshipr]

That could be the reason. Another person had also mentioned about SEO

[@ReachBrains]

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.

[@ayushgarg2285]

Amazing Tutorial. Loved the way you explain and loved your setup!!

[@ritwikpuri5313]

Stunning Redesign. Loved it

[@hariveerendra3753]

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

[@TheDesignCorner]

So fun to watch your design tutorials & your product thinking behind them!! How can we work on our product thinking skills?

[@gamebitetvog]

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.

[@rahulghosh5400]

Good video ❤

[@sagarsingh5571]

The names are big with all the information because it helps them to be searched easily by users

[@poojanarula4634]

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.

[@AMITSINGH-bt7bs]

Very cool, user friendly ❤🎉

[@Kunalalal]

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.

[@ReachBrains]

53:20 bro I always use buy now button if i really want to buy , if not and when I do just wondering on Amazon then I use add to cart button for later.

[@mohammaddawood1442]

Amazing 🤩 First Comment

[@mrhari9249]

like button aligh left side you can change to right because most people are using Instagram,KZbin and that is the user-friendly and new trend

[@_haru_san_pie]

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.

[@binfahadhkb9860]

I believe that when redesigning any prominent brand's UI/UX, you must maintain the placement of each element. Sudden changes in the design can negatively affect both the business and the user experience.

[@skoopic197]

ngl, i like the amazon design

[@satyampundhir08]

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.

[@ReachBrains]

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.

[@GamalielBibleCollege]

if you remove the top blue gradient it would look really good. btw great work

[@naikrupak]

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

[@pchoudhary]

Nice video. Saw this on KZbin recommendation and saw your name. You were Engineering Manager in Cerner and we briefly worked together :)

[@saptarshipr]

Hey Prashanth, how are you doing? I was a project manager at Cerner 😀 long time

[@mahmudulhasantamim]

nice video i want to more videos redesign case study

[@saptarshipr]

I will try my best

[@AshwaniAnand444]

Hello Sapta.. you are master in design, but can you tell me is it right to keep back button (Icon) in the search bar frame.?

[@tanvirahassan]

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.

[@prashanthkumar6593]

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 🥳.

[@Saissh7]

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!

[@medgor245]

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.

[@zatchcodm9944]

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 😅....

[@dheerajrpissay6133]

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.

[@roml3n]

Hey Sapta, cool vide. Question: any reason you use Groups instead of Frames?

[@ramtube]

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.

[@bagchi_sagnik]

lovely video. 1 question, why do you prefer/use groups over frames?

[@nikkk_live]

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.

[@shethutsav]

Next video on Apple iPhone page redesign or Swiggy App redesign 😄 or my fav topic design system...

[@poojashetti8259]

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

[@pragyasuman8856]

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

[@shwetajainhehe]

Can you put the figma files in description so that its easier to analyze the redesigned elements. That would be really helpful.

[@rishabsrikanth8993]

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.

[@saptarshipr]

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.

[@streetdiaries]

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.

[@ASArmyGamer]

Why you haven't utilized Auto layout?

[@ashutoshnavkar7358]

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!

[@MotivationMinute224]

Hey Sapta Can You Make A Redesign Of Amazon Rufus

[@erikaannetrinidad4387]

How do you show the 16 pixels while you're moving an element?

[@RayanBaig-m3w]

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.

[@naveenm489]

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...

[@aditiarya8004]

Just curious to know why you removed the search icon. Would users really understand the CTA along with branding as a search option?

[@vsnv1]

'Buy later' option is missing, since the product is expensive yet will want to on arrangement.

[@sonalijaiswal-qh3lo]

Hey Sapta, But why are u not using Auto-layout for your designs?

[@saptarshipr]

Because Auto Layout isnt mandatory 😅

[@RobiulIslam-l9r]

Nice

[@bhagyashrimalviya3580]

@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

[@girishsalunkhe857]

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.

[@Iamawfy]

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.

[@rxhulgautamm]

I can only say that the search got complicated by adding a back arrow ... The gradient is not matching properly ,like it is giving a camouflage effect to the product ...the amazon choice looks like it is giving the vibe of some moving thing in forward direct eg metro train .

[@JayPatel-ou2ud]

great

[@yogeshknaik5850]

Can you redesign swiggy..!?😅

[@saptarshipr]

I do it every day. Guess what I get paid for it. 😅

[@prathameshsawant3290]

​@@saptarshipr Nice reply sapta 😂

[@phaneeshcherry9690]

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.

[@aahiljunaidnext]

whats wrong with the KZbin UI now????

[@karthikrao3595]

Curious what's inside 'dump' page. Bcz I feel that is where ideas were born?

[@krushang933]

Really need

[@saptarshipr]

Thank you 🤩

[@Designblink6103]

hi, I have doubt that how you imported that amazon design into figma?

[@TheSAMRIDH]

How about a Live Session ?

[@manasmishra2663]

Why can't we just go with Emi available with drop down menu ?

[@ravikumargantla7998]

Next review and rating by customers page

[@SAIKRISHNA-iv2ff]

How to change the screenshot to editable design

[@BANARASIDESIGNER]

Sir, what about your Mercedes Benz?

[@randomness3582]

Frames and Autolayout left the chat

[@beglam3833]

🎉🎉🎉

[@rishab-qw3qs]

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.

[@pran2053]

I will do one variant and mail you. Post it if you feel it is better

[@Shivakumar-fz6kx]

Rectangles ❌ Frames ✅

[@NibirImtiaz-k8j]

Back button inside the search bar is more confusing

[@jhonsnow534]

im a fresher and i dont want product designer I just want ux UI designer so what projects I put in resume ??

[@stienogamez8296]

Please use auto-layout...

[@siddharthshikhar4210]

You successfully made Amazon look like Ali Baba☕