Level up your UI design skills in 7 minutes! | EP1

[@neelshah3235]

The redesign was awesome rachel ! We would love more redesign videos just like this.

[@rachelhow]

Yayy! Glad to hear coz this was fun :)

[@DanielHarrisCodes]

@@rachelhow yes I thought it was awesome. Can you explain or do a video about how you created the animation at the end? How did you animated the card sliding over for example

[@sanjanasoudamini2205]

Yes Rachel! Keep them coming!!

[@rachelhow]

Did you enjoy this video? Should I make more vids like this? 🥺 -------- UPDATE (27/6/2023) -------- My redesign of this is nowhere perfect, so let's learn how to improve it further, together! Below are the feedback/suggestions from all of you. ---- Important Fixes ----- 1. In the 'Add card' page, it should be a card name & card number field. 2. Payment methods that are NOT selected should NOT be disabled (greyed out)! This would confuse users, thinking that there are errors. Instead, the selected payment method should be prominent (ie. a checkmark to indicate that it is selected). 3. Keep the checkout process straightforward and simple. In my redesign, there are different scroll directions/interaction patterns, while it looks better, it may not be user-friendly. 4. When designing, ensure all text meets the WCAG Contrast Ratio standards. There are free plugins on Figma that do this. ---- Suggestions / Notes ----- 1. To consider how to set 'Card' payment method as default when user doesn't want to save card. 2. 'Scan card' feature should be discussed across the team and evaluate if this is worthwhile. (thank you @edumazieri) 3. I placed the 'close' button on the top left corner because that's where users are accustomed to tap on when they exit/go back. For example, Spotify and Expedia app places their close button on the top left corner. There is no right/wrong placement as this is subjective to the product you're designing. 4. When designing GPay/PayPal/Apple buttons, check the payments company's brand guidelines. (thanks @jesusenrique2349) Thank YOU for these, they're super helpful! And together, we'll improve! :)

[@shimwamanahilaire2416]

Greate video🥰 Save it !!!

[@irinavadan8604]

Yes! You should make more videos like this :)

[@Filippahop]

Yes definitely!!!

[@yuvrajsinhvaghela8020]

Yes, please make more of such videos. It helps a lot.

[@benj7483]

Yes!

[@arunsp767]

I kept thinking something is very crowded and noisy but wasn't able to tell what it is. As soon as you changed the shadow to gradient, I went "Aah! There it is"

[@kavyapradeep4471]

Please continue doing the redesign series!! As a beginner in UI/UX, seeing the process in helping me grow as designer.

[@arun_prakash_007]

hi kavya

[@nyme2349]

Seeing you design in "real time" helps to know how a proffessional thinks. I'm still learning ux ui so this is pretty useful❤

[@JayneCJX]

I learned a lot from this, especially when you show your ux thinking process by explaning the reasons you make those choices, it is so pleasant and inspiring to watch the whole video.

[@rachelhow]

Aww thank you, Jayne! Glad to hear that. I hope to make more of these :)

[@MuhammadIhsan390]

I just had a breakthrough with my Figma design and stumbled upon your channel-it's truly mesmerizing! Your production value surpasses any other Interface Designer out there, and your design taste is impeccable. I must say, subscribing is definitely worth it! Keep up the fantastic work!

[@permafrost93]

The final output made me dance in my seat, lol. Great Job. This kind of content is pure gold these days. Thank you very much for making it and yes please do make more :)

[@rachelhow]

I'm really glad you enjoyed it! Thank you :)

[@whatifuniverse00]

OMG, that End Result was such a great one... Wanda, too, had done a great job... I like the way you still refer to other people's designs too still learn, even though you are a great designer. We are all people learning everyday. Please continue this as a series I would love to watch more video of this kind...

[@rachelhow]

Thank you so much! 💕

[@bhavanat2429]

The way you show your design process is amazing, this helps a lot for junior designers of how to go through things and redesign them. Thank you so much for creating such amazing content. Please make more videos on design process and how you implement it to design.

[@rachelhow]

Thanks for watching! ☺️ I'll be making more :)

[@dianasandess]

First and foremost, I appreciate the concept of exploring design enhancements. I've reviewed the comments to ensure I'm not being repetitive, and I couldn't find a similar one. I apologize if this point has already been addressed. One thing that caught my attention, and I'd like to inquire about, is the decision to keep the logos on the right and the full names on the left. Just a thought, these three companies are well-established in the market, where their brands speak for themselves. By simply looking at the icons, we can easily identify them. I believe it might be worth considering to maintain the initial concept.

[@justafrenchkidtryingtospea9462]

I agree

[@illynH6]

AGREEEEEE thought it was useless repeating the name

[@johnotor439]

The final result is dope 💯💥. I love the redesign. The use of gradients to make the UI more appealing. Also I want to assume you're trying to keep the videos short so they don't get too long and boring. But can you take them a little slower, so some of those silent points can be gotten as well.

[@rachelhow]

Hey, thank you for watching :) Yeah, I was concerned that the video gets long and boring, but feedback like yours reassure me that it's okay to pause a bit and let silence takeover once a while :) I'll slow down in future videos! haha

[@johnotor439]

@@rachelhow Thank you 🤗

[@alexandrabulac]

LOVED this! I wish UX design courses would be this quick and packed with information! I feel like I learned so much from this vider, thank you! More! More! :)

[@rachelhow]

Glad you enjoyed it! Thanks for watching! ☺️

[@Bamberbella]

wow, this is one of the best UX design videos i've seen. You explain things perfectly and its so easy to understand. A lot of what you did were things that make so much sense that i didn't know i could do in Figma since i haven't seen that in any other video iv watched in my journey of UX design. Thank you so much for this! This inspired me to work harder and improve my skills so i can do this full time, i am really passionate about UX even though i just started in the last 2 months

[@rachelhow]

Thank you for watching! Ahh I'm super glad to be able to help :) Keep going!

[@sangeethababu0915]

Omg! This is great Rachel. I really wanted to improve my visual design skills. Keep making a series like this so that we can follow along and learn together!

[@rachelhow]

Sure thing! More to come :) thanks for watching too!

[@ahmed51988]

I love how you also express the reasoning behind each decision the ux and the ui.

[@rachelhow]

Thank you!!

[@suvetar]

Thank you for this! One might think this should be obvious, but I am a programmer, not a UI designer so I am very grateful for your steps and checks, even the disclaimer gave me a better mental context in which to stage my needs! Thank you again, and happy new year Rachel!

[@dont_deletethat4595]

probably the best ui educational video i've seen on youtube, thank you

[@alexuqt]

Wow, i admire how you can see these little details, loved it!

[@notorioustofu3482]

Interesting to see the process behind improving designs. The final design looks fresh and modern. I do wish there was an actual side-by-side at the end of the video. I found myself needing to scan around to compare the final result to original. Also (and maybe out of scope for this), I'd like to see design videos that also consider WACG guidelines as things like the main CTA color contrast would probably get flagged for improvement

[@rachelhow]

Thanks for watching! Yes, definitely need to check the contrast to adhere to WCAG Guidelines, the design was done in under 1 hour so I overlooked a few things. I'll keep in mind to have the before/after side by side comparison in future! Thanks for the feedback, super helpful ☺️

[@aemmlt]

Love your redesign ! As a young designer, it was also interesting to see the way you structure your notes, how you set priorities and reflect on the task at hand. It's a bummer we're not focusing enough on this at school bc it's an important step since it's at the early stage of the process. Also, I would love to see a video that shows like a step by step guide of a project hand off to engineers/developers ! Thanks for the amazing content Rachel !🔥❤

[@rachelhow]

Thanks for watching! And I appreciate the feedback as well. Will add this idea to my notes! :)

[@adityanithariya]

Added scan my card button like it's just a button. Think from a programmer's view, it's a fucking new feature 🥲

[@letsstudy5619]

And a hard one to implement as well…

[@MariusUrbelis]

At the end of the day you should think from a user's perspective. Design, product and engineering teams can then decide what's difficult to implement.

[@Redheadtama1]

Great stuff! I am a programmer but find UI/UX fun and love great design. Thanks for the quick and insightful video. Just a note, it would be great to see a before and after. I would have loved to see the two designs side-by-side. Thanks! :D

[@rachelhow]

Thanks for the feedback! I'll include it in the next video :)

[@dianadalessandro4232]

Please do more of these! You have such an effective way of showing us your design thinking

[@rachelhow]

Thanks for watching! ☺️ more to come ;)

[@the_infinity_channel]

As a junior in this field I can say you are such a great designer. This was verry helpful, thank you so much

[@alexeytretina]

Really like the final result 🔥 Would be great to see the similar redesign process for a website!

[@rachelhow]

Feedback noted! I’ll look into this 👀

[@guitarshredder920]

@@rachelhow If i may ask, how did you create that final result presentation? Did you create that 3D prototype through after effects?

[@rachelhow]

Btw, I reached out to the Rotato team and I was able to get a 25% off discount. From now till 12 July 2023, go to rotato.app, apply code ‘RACHEL’ when you checkout for 25% off. Rotato is one-time payment, no monthly subscription. ☺️

[@Jarreddesigns]

I like this video. I've been in the UI industry for a couple years now and what you outlined right at the start is what I see so many people miss "Keeping the identity".

[@rachelhow]

Wow, Thank you J! Yeah redesigns that totally change the brand identity makes me anxious 😩

[@jaivignesh9171]

The design was super cool and elegant. There's a thing I noticed on the card details filling page, where you mentioned "Name on Card" for the card number and kinda missed separate field for "Name on Card". Thank you and Your works are always good.

[@rachelhow]

hey J, thanks for pointing it out! Yup after publishing this video, I realised the 'name on card' is a mistake - It's supposed to be 2 fields: Name on card and Card number. Thank you for pointing it out though!

[@wiilwaal258]

While the blacksmith sharpens, the warrior bleeds. A designer's better idea is a programmer's worst headache.

[@adelinebaah7214]

Beautiful 🤩

[@rachelhow]

Thanks 🤗

[@personalquests]

Wow, this is absolutely amazing! I'm really loving the redesign. Personally, I've always had difficulty with designing my own applications, but it seems like I've finally found the perfect resource for that. Thanks for sharing this!

[@rachelhow]

Thank you very much!

[@benjamindimalanta8320]

Day 1 of pursuing my journey as UX Designer. I will surely watch all your yt to learn thanks for this. I will get back here.

[@Gokuderka]

Really enjoyed watching this video! Great idea to start not from references or inspiration/ideas but rather from analysis. *takes notes* Redesign has very thought-through UX, also loved the whole process step-by-step. Would love to see more videos like that! 😊

[@sanjanasoudamini2205]

I just started my UX bootcamp. This video is very useful to see how I can use the fundamentals to create a better UI.

[@herbertpimentel]

This is absolutely amazing... I remember about some presentation called "extreme make over" that did the same thing on some Windows UIs. I never found it again. is good to see that we always have room for improvements.

[@Fábio-u8u]

It was amazing. The principles you explained, fantastic!! Just one tip, at the end put the new design side by side with the old, so we can see with more details how thing got different.

[@rachelhow]

Thanks for the feedback! The newer episodes all have side by side comparisons in the end! 🥰

[@Thonia_Roi]

would definitely like more of this designs

[@rachelhow]

More to come!

[@farisofar]

please continue this redesign series! love to learn while getting into real projects real time!!

[@rachelhow]

Thank you, Faris! Means a lot 🥺

[@mdptg1990]

Genuinely such a big improvement from a UX standpoint too. Everything is super clear whilst maintaining the pretty looking aesthetic

[@rachelhow]

Ahhh thank you! Also you’re the first!

[@cw_chandlerwong]

Absolutely loved your redesign! Awesome video, please continue making videos like this! I am not a professional, but I have a few suggestions for this redesign: 1. Add visual indicators to show the number of cards 2. Make the card that the user's currently selecting more obvious, such as adding a border, shadow or a tick

[@emmakun7544]

I am also not professional but I will also say what I think so someone/you will also correct me if I'm wrong 1. I don't think it is really that necessary to add indicators to show the number of cards since most likely user's will only add 1-3 cards on the app but I think it would be a great idea to add it when the cards added is greater than 5. 2. I think her redesign is already fine but I also think adding border/shadow is nice.

[@nehalhamim10]

Excellent re design and i loved the critique part and the animation of the app made it more attractive thanks for sharing

[@rachelhow]

Yay! Thanks for watching :)

[@Michel2003g]

one suggestion, put the add card button on the -1 spot. so the user only has to swipe right to add a card. instead of x amount of carts they already have. and still showing the main on the first spot.

[@IbtessamulHassan]

without disturbing the UX, UI can be improved. wow this is I was looking for

[@77AlexS]

This was really great! As a new designer I found this to be quite helpful. I'd love to see more content like this :)

[@vishnubalachandran3834]

we can learn more and more from these type of videos... please continue this redesign series...

[@zacastic_1]

Hi Rachel, I'm a UX designer. I'm working on a redesign project and the tips in this video have really helped me out with my creative blockers. I hope that you would make more of these videos, I bet there are tons of designers like me who would benefit form this content .

[@fattymessiah]

it's very impressive! I really liked the design and the process you used to analyze and arrive at that solution. I have one thing to point out (I don't know if you have taken it into account): - Gpay has a style guide to keep applications consistent, and at the development level, we usually can't control how the button appears (this is assuming we use the Gpay API). -It is practically the same with apple and paypal. Perhaps at the design level it's less consistent to have different buttons (however, the guidelines have a section of styleless buttons) but thanks to following those guidelines, we allow the user to easily recognize what he is looking for😄

[@rachelhow]

Thank you for watching! Great feedback

[@bendayhoe]

Love how you explain your design decision "Whys" 🥳

[@poooooow]

Wow, your humble and a professional at the same time 🙌🙌

[@Hanakogamingph]

New follower here! Such a blessing I found your channel! I'm planning to upskill and decided to focus on ui/ux. I'll binge watch the rest of your videos! Thank you for this!!!

[@afreenshaikh938]

pls continue with this redesign series, its very helpful and valuable

[@rachelhow]

More to come!

[@janhviraut3210]

This was very helpful Rachel. Would love to see more redesign process videos!

[@rachelhow]

More to come!

[@kunalsoni7681]

wow, such a mesmerizing payment method you have designed. Loved watching whole video🤩

[@rachelhow]

Thank you so much 🙏🏻

[@ramesh143501]

Really fantastic. The way you explained about the older design is good. Keep post related videos. Thank you.

[@heshamabdo6024]

Your design videos are absolutely fantastic! 🌟 The creativity and attention to detail you bring to each project are truly inspiring. I always look forward to your new uploads. Keep up the amazing work! 👏🎨

[@rachelhow]

Thank you! Cheers!

[@stephl4277]

Rachel, I always look forward to your videos, because I always learn so much from them! I especially love these tutorials. You do really amazing work!

[@reethikaravichandran7810]

Yes! Pls continue with redesigning videos. I learned how to evaluate a existing design and make it even more better. It’s a great resource, found it useful.

[@rachelhow]

Thanks for watching! ☺️ Appreciate the feedback.

[@wandawang3031]

Thank you Rechel ❤ this really gives me a lot insights! It really brings my design to the next level! Truly appreciate your effort ❤❤❤

[@rachelhow]

Hi Wanda! THANK YOU for the original design too :) It’s really fun doing this sort of videos! And wishing you all the best in your design journey 💛

[@Safaaa1411]

Do you which apps she used to make this? ☺️

[@Galaunicorn]

It is a very useful video. Thank you! I also like your choice of gradient instead of shadow - it looks smooth.

[@rachelhow]

Glad you like it!

[@BS-gr3bi]

Absolutely please continue making this stuffs!

[@rachelhow]

🙌🏻🙌🏻🙌🏻

[@deepdasroy8414]

Yes @Rachel How please create more videos like this its good to gain experience even by listening and watching u re-design

[@rachelhow]

Thanks for watching! I appreciate it :)

[@kheengsonuohakingsley9401]

Kudos Rachel! That was a great redesign. Guess who just gained a like and subscription to her channel. 🙂

[@rachelhow]

🥺 Yo thank you!!! Means a lot.

[@analuiza2677]

Very enlightening for us Front-End devs who need to have a design notion :)

[@djashawe88923]

Thanks for the great content, very practical and helpful! I like how all your videos are not too long and very resourceful! I have some suggestions. It'd be nice to be able to see the layer panel on the side to follow you better! Moreover, even though we can pause the video to see the size of UI elements, it'd be very awesome if you can say it out loud as you're designing, like the text size, whether you used frame or a rectangle etc. That way, it'd be easier to know your thought process and the reasoning behind the each design decision in detail. Keep up the good work!

[@matheustavares4845]

I like when you describe Design tips, im brazilian designer, wanted to enter on Design world, that part helps designers shows to recruiters, or everyone, your job and more

[@brittbrett]

That redesign looks beautiful!!

[@rachelhow]

Thank youu!

[@fredrickprecious4059]

Learnt a lot from this single video, mostly how you gave reason for every single decision. It was amazing.🎉❤

[@rachelhow]

Thank you so much 😀

[@jodys9307]

Yes, more redesign videos please. I'm learning so much from them. thx.

[@minhhawithlife]

Thank you so much. This is the first time that I have watched the tutorial about UI like that. It is easy to understand and helpful. Hope you make more video about this. 🥰🥰🥰🥰

[@rachelhow]

Glad it helped! More to come :)

[@Upscent]

the result was great. The only thing I'd change is I'd leave the radio button on the right, given that most people use their right thumb to click.

[@Etasab]

I dont think I ever commented on youtube at all! But this concept of redesign is awesome and help me alot Rachel! Please do more of this and I don’t mind longer / slower video! 🥰🥰🥰Thank you so much.

[@trangthu7192]

Love this kind of videos, it's really useful. Thanks Rachel.

[@rachelhow]

Thank you!

[@gloriacassidy]

Yes please continue doing more videos. This helped me to thing of more quality and not quantity.

[@rachelhow]

More to come!

[@tiatangs]

Fire you do great at explaining and I love the amount of details!

[@dinaashrafjunior3327]

Rachel Thank you for this and for sharing. And we really Appreciate you for always taking your time to give us quality teachings and techniques. stay Blessed!

[@rachelhow]

Thank you, D! Appreciate the kind words 🙌🏻

[@samaypingolia2410]

very usefull video, hoping for more videos like this. Colors, text and all are very eye-soothing.

[@femidavids2018]

This is amazing. You should do more of these.

[@rachelhow]

Thanks for watching! I’m looking forward to making more :)

[@akjhdkjahskjdlf]

Love that short video at the end! Would love to see how you created something like that.

[@trayvon-x9b]

Thank you thank you thank you Thank you thank you thank you ❤❤❤❤❤ your videos are part of my morning ritual. You have literally changed my life

[@rachelhow]

Wow, thank you :')

[@riotopolis6201]

I love this redesign series, please make more!!

[@anjaligupta2305]

You're so real Rachel and not faking or hiding things ❤

[@rachelhow]

🥺

[@Shanmu_s4]

Very clean design Rachel. Can you please let us know how you did the final animation at 6:30? If anyone else know please let me know

[@lunchtimemb]

+1!!

[@rachelhow]

Thanks for watching :) So here's how the animation is done: After prototyping with Figma, I use Rotato for the cool animations. I reached out to the Rotato team and got a 25% off promo code. From now till 12 July 2023, go to rotato.app, apply code ‘RACHEL’ when you checkout for 25% off. Rotato is one-time payment, no monthly subscription. Hope it helps! ☺️

[@Shanmu_s4]

@@rachelhow thank you! I'll check it out

[@educk72]

Great work on the redesign! Love this series❤! Please do more of such videos. They are extremely useful. 😊

[@ananths8968]

Really loved it rachel. Please continue this series

[@rachelhow]

🙌🏻

[@thebram]

you are so great at this. I am so jealous.

[@hannasavostianova7155]

Really useful content for any level of experience. Would like to see more videos like this. You are doing great :)

[@rachelhow]

More to come! 😄

[@kyenderetachantelle]

Please make more, this was really helpful

[@kamilwaszewski]

Great redesign :) Such serie would be perfect! And you can slow down even a little and just show how you make particular things, it’s also fun 😊

[@rachelhow]

Thanks for the feedback, K! I'll slow down a little more :) Was worried that it's too boring/dry for viewers if I slow it down.

[@matthieuregnauld9648]

That was really interesting! I would love to see more episodes like this one!

[@rachelhow]

Glad you enjoyed it! More to come :)

[@alaminhossain1639]

Loved the result as well as the explanation.

[@ankurraj310]

Great Video, loved how u kept it so real, experimented and then finalised the best design for the UI, please bring more of these redesigns 🙂

[@rachelhow]

Thank you for watching! It was a fun and intense 1 hour haha.

[@eddsouz]

Awesome redesign Rachel! Thank you

[@rachelhow]

You're so welcome!

[@huykhieu]

I love this re-design series!

[@rachelhow]

Thanks for watching! ☺️

[@emmanuelharbor2350]

Rachel, love your video on UI designs. Cant wait to venture into this career someday based on your tips and tutorials you shared.

[@rachelhow]

Start this weekend! 🙈

[@olorunfemiayobami9745]

The redesign is awesome

[@buttercup9700]

Really enjoyed this.Please continue this series:)7 Insightful minutes:)

[@rachelhow]

Thanks for watching! ☺️ More to come :)))

[@baeyuhtrice]

this redesign is super helpful! would love to watch more redesign videos from you (:

[@rachelhow]

Yay! I’m glad to hear this. Will make more :)

[@meep9683]

I have stopped doing UX stuff but I still enjoy watching this kind of video

[@rachelhow]

Thanks for watching! ☺️

[@yishsieh]

Thank you so much! Redesign is a good way for me to learn UI design.

[@ongjoonwai1606]

OMG, this redesign is so cool, i like it so much. hope u can make more video in the future.

[@rachelhow]

Thank you! Glad to hear that :) i had a lot of fun redesigning this too.