Mastering Mobile UI Design: Before and After 2

I’ve prepared for you an example of mobile app design screens prepared by novice UX and UI designer (from an online store mobile app, representing different stages of shopping experience) with the intention of improving them.
Watching experienced designers reworking designs and providing feedback behind their decisions is one of the best ways of developing your own skills faster.
Get started with Figma for Free: psxid.figma.com/52h3iuj6s0bk
Watch other videos from the Before & After series here: • Before & After Design ...
Watch more of my UI/UX design tutorials here: • Figma Tutorials
Chapters:
00:00 Mobile App Presentation
00:26 First Screen
03:12 Second Screen
04:03 Final Screen
Disclamer:
Some of the above are affiliate links-I make a small commission when you purchase through my link, at no extra cost to you. Thank you for supporting an independent creator!
#uidesign #uxdesign #uxtutorial #designtutorial #graphicdesign #mobiledesign #productdesign #ui #ux

[@KerevDesign]

What do you think about the reasons behind “one” button, do you agree with me?

[@brunalizandoemlondres1724]

Yes I agree. It's less cognitive load/choices/clicks for the user

[@trixie625]

Yes

[@feelcollins4358]

Honestly, it would be better to give 2 options. If I just wanted to buy that particular item it would just annoy me if I had to click add to cart and then look around again in order to checkout. However, if I had a "Buy now" and a small "Add to cart" option (it doesn't even have to be text, could just be a cart icon with the emphasis still being on the Buy now button) that would make my life easier.

[@KerevDesign]

Typically in a real-world application, we would organise user testing sessions or quantitative methods and validate what approach is the best.

[@danusdragonfly6640]

I agree with you. Cleaner design is better - especially for smaller screens like mobile phones. You are also correct that *most* users like to add things to their cart whilst they shop around and then can compare/remove items before checking out. Of course if you have the ability to test this with end users/target audience then great. If not, then cleaner and encouraging further browsing is better for the client.

[@nazerdogan7045]

Thank you so much for making these videos. Not only they are well-explained, they are extremely helpful for my journey on UI/UX Design. I started to gain more insight about design, please do not ever leave the KZbin Community! ❤

[@KerevDesign]

Thank you, you don't know how much encouragement you have provided me right now! In recent weeks I really struggled with making new videos due to some personal problems. Now I'm kinda trying to get back on track with my usual publishing schedule. Thank you so much!

[@rhysfinley5772]

5:11 The buy now button speeds up the process of buying product. However, the primary goal of e-commerce is to reach maximum customers at the right time to increase sales and profitability of the business. The secondary goal is selling products as soon as possible, so we need to have buy now button but it shouldn't be the primary one. In every top level e-commerce app buy now button is secondary cta. I'm just working on shopping fashion mobile app and I got 140+ screenshots of e-commerce applications' pages. I have screenshots of all pages.

[@KerevDesign]

As I said, I predicted it may be controversial and most likely require testing with the users. I believe also that your argument is very much valid and on point, especially that you went for a lot of examples from e-commerce market. I’m glad for your comment :)

[@indiamarispereira6944]

As a UX researcher I found exactly what he said in my results. But, of course, I was in European context

[@nadyart9225]

I LOVE these videos! they're very helpful for beginners such as myself, it'll help me avoid all mistakes when designing, THANK YOU 💜

[@KerevDesign]

Awesome, I'm really glad it was useful for you! You can check out other videos from the series :)

[@williewooh]

Before and After is a great way to learn for beginners. I appreciate you making these. Looking forward to many more. Also I am working with designers so would love to run by you when we are done in mid August. Thanks Kerev. -From Tokyo

[@KerevDesign]

Glad you like them! Tomorrow I will publish 4th video from this series :)

[@marcinskalski6326]

Jak na nie native-speakera to angielski Ci się w tych tutorialach mocno wyostrzył w czasie🙂

[@KerevDesign]

Szczerze to nie spodziewałem się, że będziesz tu zaglądał, miło mi :) Chyba jesteś pierwszą osobą, która skomentowała w innym języku :D

[@galkalifa594]

Hey, I have to say that you're videos help me a lot! That is exactly what I was looking for! Thank you very much! I hope you keep on posting more videos like this on!

[@KerevDesign]

Thank you, that means a lot to me. As for the series I will definitely be publishing more videos in the future :)

[@kirtigrover4915]

On Product Detail Page, another change that I have noticed is line height in description paragraph. From UI design point of view, white spacing is also important.

[@KerevDesign]

Points for being very observant! Obviously I can't point all of the details in those videos because they would be to long/boring, but I'm glad you were able to catch things that I didn't mention :)

[@BijoyExclusive]

Great Tutorial. Thanks for it

[@KerevDesign]

Glad it was helpful!

[@BettyBoo1015]

Super helpful series! I've watched them all and would love to see more! Can you please critique my design(s) when I finish them?

[@KerevDesign]

Sure thing! You can even share them with me for potential redesign in one of the videos (you will find contact to me in the "about" tab).

[@indiamarispereira6944]

That was brilliant ! Now... How to convincing old project managers that are used to ugly and outdated stuff?

[@KerevDesign]

Well, good design sells, the most convincing is always data, so always try to measure and validate old/new designs through usability, A/B or other ways of testing.

[@rudradhoundiyal8783]

Very helpful video thanks a lot🙏

[@KerevDesign]

Glad it was helpful! :)

[@trixie625]

Hermosos videos más así me encanta 😍

[@KerevDesign]

¡gracias! :)

[@alonalukianenko]

Great video! After looks really better. But what about the final screen or product page? It isn't necessary to use arrows for images. There are circles showing you can swipe to see more pictures.

[@KerevDesign]

Thank you! There are many ways to suggest a certain action or gesture, you are right, I just went with that particular pattern :)

[@_icaruss__]

That add to Chart 😂

[@KerevDesign]

Glad you liked it ;)

[@KerevDesign]

Glad you liked it ;)

[@KerevDesign]

Glad you liked it ;)

[@crakgaming9854]

sir ive a doubt. Could we add a cart button aligned to the back button horizontally on the product page. So the user have the direct access to the cart by not going to the home page

[@KerevDesign]

Absolutely - we could have whatever, typically ideas are subject of user studies (project is tested against target group of users)

[@eizimanezmel2490]

how did you make the opening (3d phone ) stuff?

[@KerevDesign]

Adobe After Effects

[@regwsx]

Removal of unnecessary elements... ...There's no need for dedicated buttons which would add a product to the shop cart I see bold moves, all caps

[@KerevDesign]

Well, normally it would be a subject of user testing ;)