I Redesigned Amazon App | UI/UX Design Tutorial (Step-by-Step) | Saptarshi Prakash
HTML-код
- Опубликовано: 9 июл 2024
- You order so many products from Amazon so frequently, but have you ever taken a closer look at its design?
Why are things designed the way they are and can it be made better?
I've answered all these questions in this video!
I’ve redesigned a section of the Amazon App and tried to make it better!
Do watch the video till the end to see what I’ve come up with, and don’t forget to subscribe if you found this useful!
Chapters:
00:00 - Intro
01:14 - Amazon Product Page Walkthrough
10:33 - Amazon Product Page Redesign
56:17 - Outro
Learn Figma from Scratch: • Figma UI Design for Be...
12 UI/UX Laws You MUST KNOW: • 12 UI/UX Laws You MUST...
UI/UX Design Roadmap 2024: • If I Started UI/UX Des...
FREE AI Tools: • Top AI TOOLS You MUST ...
FREE Graphic Design Courses 2024: • BEST FREE Graphic Desi...
UI/UX Design Trends 2024: • 2024 UI/UX DESIGN TREN...
UI/UX Designer Roadmap 2024: • How to Become a UI/UX ...
First ₹ 50,000 from UI/UX Design: • Make Your FIRST ₹50,00...
How I Got A HIGH PAYING UI/UX Design Job: • How I Got A HIGH PAYIN...
Upskill as a UI/UX Designer:
10 Easy Figma Animations: • 10 EASY Figma Animatio...
UI/UX Laws & Principles: • 10 UI/UX Laws & Design...
Become UI/UX Designer in 2024: • How to Become a UI/UX ...
My First UI/UX Case Study: • My first UX Design cas...
Write E-mails with ChatGPT: • Write Email asking for...
Become a PRO UI/UX Designer in 2024: • How To Become a PRO UI...
Best Figma AI Plugins: • BEST FIGMA AI TOOLS fo...
Sapta Reviews: • Sapta Reviews
How to Become a UX Designer in 2024:
• How To Become a UI/UX ...
-----------------------------------------------
😃 ABOUT ME
This is Saptarshi (a.k.a. Sapta), an engineer turned self-taught Product Designer based out of Bangalore, India. I have worked with some of the very well known startups of India and learned anything and everything that is needed to create amazing experiences for the users. I'm also an active speaker, teacher and community builder, and have delivered over 60 talks, workshops and webinars on design. In this channel, I post videos with tips, strategies, tutorials and general gyaan to scale your career in Design. If you are into it, you may want to subscribe and hit the bell icon to that you don't miss out :)
-----------------------------------------------
💻 📷 🎤 MY GEAR
My Desk: bengaluru.featherlitestore.co...
Sony A7iv: amzn.to/3KQZ0LM (Primary camera)
Samyang 24-70mm F2.8 lens: amzn.to/3qDYHx0
Sony a6300: amzn.to/3gIx0v1 (Secondary Camera)
Sigma 16mm F1.4 lens: amzn.to/38DFPRR
Sony 50mm F1.8 lens: amzn.to/3rufcaB
Samson G-Track Pro condenser mic: amzn.to/37Rixsw
Rode Wireless Go 2 : amzn.to/3KQXBU0
Boya Lavalier Mic: amzn.to/2M0MZI7
Godox SL60w light : amzn.to/3HgSU3O
Godox SB-UE 80cm softbox : amzn.to/3GdNq8h
DIGITEK DTR 500 BH (60 Inch) Tripod: amzn.to/39d1m48
-----------------------------------------------
📲 SOCIALS
Instagram: / saptarshiux
Twitter: / saptarshipr
Dribbble: dribbble.com/saptarshipr
LinkedIn: / saptarshipr
Medium: / saptarshipr
-----------------------------------------------
🎶 MUSIC
The jingles and the background score is composed by Sargam Prakash, an awesome designer and musician. Do check out his channel.
Sargam Prakash: / sargampr
-----------------------------------------------
🌟 TAGS
ui ux design,ui ux mobile app design,figma tutorial for beginners,figma full tutorial,figma tutorial,figma,ui,ux,ui ux design tutorial,ui/ux design,ux design,user experience design,ui design,ui ux design tutorial for beginners,ux design tutorial,ui design tutorial for beginners,amazon app,amazon app redesign,amazon ui ux,I Redesigned Amazon App,i redesigned popular websites,ansh mehra,sapta reviews,Mobile App UI/UX Design,Saptarshi Prakash,sapta
-----------------------------------------------
🌟 HASHTAGS
#figma #uidesign #design
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. 😊
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.
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!
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.
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.
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.
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.
Now that you say, that makes a lot of sense! Thanks for letting us know 😀
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.
And I think on a sale day that would become useful.
like button aligh left side you can change to right because most people are using Instagram,RUclips
and that is the user-friendly and new trend
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
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.
We want more videos like this, In depth detailed videos
Amazing Tutorial. Loved the way you explain and loved your setup!!
This is where design peak , Sapta i love your content
Stunning Redesign. Loved it
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.
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.
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.
Nice thought sapta, yes agreed with you that the current Amazon app is full of information.
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.
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. :)
Very cool, user friendly ❤🎉
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!
Totally agreed. EMI and Buy Now both might have some business metrics for amazon. Removing them might not be a good option.
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.
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?
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?
like button aligh left side you can change to right because most people are using Instagram,RUclips
and that is the user-friendly and new trend
So fun to watch your design tutorials & your product thinking behind them!! How can we work on our product thinking skills?
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
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
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.
Good video ❤
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 💜
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.
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.
lovely video. 1 question, why do you prefer/use groups over frames?
The names are big with all the information because it helps them to be searched easily by users
hi, I have doubt that how you imported that amazon design into figma?
Nice video. Saw this on RUclips recommendation and saw your name. You were Engineering Manager in Cerner and we briefly worked together :)
Hey Prashanth, how are you doing? I was a project manager at Cerner 😀 long time
Hey Sapta, cool vide. Question: any reason you use Groups instead of Frames?
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.
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
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.
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.
That could be the reason. Another person had also mentioned about SEO
im a fresher and i dont want product designer I just want ux UI designer so what projects I put in resume
??
Why can't we just go with Emi available with drop down menu ?
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.
Just curious to know why you removed the search icon. Would users really understand the CTA along with branding as a search option?
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.
Curious what's inside 'dump' page. Bcz I feel that is where ideas were born?
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.
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.
ngl, i like the amazon design
Amazing 🤩
First Comment
if you remove the top blue gradient it would look really good. btw great work
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.
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.
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!
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 🌟
As per my knowledge SEO is applicable on web search and this is an app.
@@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.
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.
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.?
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.
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!
great
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
whats wrong with the RUclips UI now????
nice video i want to more videos redesign case study
I will try my best
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.
Nice
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 🥳.
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.
Really need
Thank you 🤩
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.
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 😅....
🎉🎉🎉
Sir can you share your redesigned file please?
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
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...
No dark mode?
Next video on Apple iPhone page redesign or Swiggy App redesign 😄 or my fav topic design system...
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.
i was really researching tis from how much time because i dont like amazon app
Hey Sapta, But why are u not using Auto-layout for your designs?
Because Auto Layout isnt mandatory 😅
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.
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.
@saptarshipr
The amazon logo is a vector asset which is difficult or near to impossible to implement for a normal app developer
Back button inside the search bar is more confusing
@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.
Can you put the figma files in description so that its easier to analyze the redesigned elements. That would be really helpful.
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.
Sir, what about your Mercedes Benz?
I will do one variant and mail you. Post it if you feel it is better
Frames and Autolayout left the chat
How about a Live Session ?
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.
Can you redesign swiggy..!?😅
I do it every day. Guess what I get paid for it. 😅
@@saptarshipr Nice reply sapta 😂
Rectangles ❌ Frames ✅
Hoy you not use auto layout
Sir, I have emailed you regarding one lil request, could you please check the same
First comment...
I really thought you'll follow some ux design process but all you did was do a critique and redesigned
But this doesn't help to land a job.
You successfully made Amazon look like Ali Baba☕
Anudeep, you seeing this?👀
No Matter How Good the Design is " MARKETING TEAM " is going to butcher that design.
YOU know why they used all that information ( eg:- A long Product Name Sometime With All Specification), Its because they want their product to be searchable instantly in any search option. At the End of the day they want lead NO MATTER HOW.