Level up your UI design skills in 7 minutes! | EP1
ฝัง
- เผยแพร่เมื่อ 19 พ.ค. 2024
- This UI is good, but let’s make it great ✨ free roadmap to becoming a UI/UX Designer in 2023: • Become a UI/UX designe...
Thank you Wanda for the original designs: / csnmiq_osdi
P/S: The last screen should be Name on Card and Card Number. Apologies for the mistake as this was all done under 1 hour :)
The result showcase is made with Rotato. After prototyping with Figma, I use Rotato for the 3D animations.
| Links
Resources, desk setup, gear: rachelhow.com/resources
Manage your freelance business using The Creative Freelancer Kit: shop.rachelhow.com/l/notion-f...
My go-to design tool is Figma: psxid.figma.com/5z53qsuotr5n
My website is built using Webflow: webflow.grsm.io/rachel
Music in my videos: artlist.io/Rachel-2623692
| Let's be fwens!
Newsletter: rachelhow.com/newsletter
Instagram: / rachelhxw
Twitter: / rachelhxw
Request a video here: airtable.com/shrAWb7oXtqb8s302
| Watch next
Episode 2: • Level up your UI desig...
Episode 3: • Level up your UX desig...
How to find freelance clients: • How I’d get freelance ...
My home office / desk setup: • Designer's Desk Setup ...
My 9 income streams: • I Built 9 Income Strea...
Why I quit my high-paying job: • Why I quit my high-pay...
10 side income ideas for UI/UX designers: • 10 ways to earn side i...
My freelance process: • The 7-step freelance p...
| Chapters
00:00 The Redesign Challenge
00:40 Critique (Payment method screen)
02:15 Critique (Add card screen)
03:00 Thought process
05:50 Final touch up
06:20 The result
| Disclaimer
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!
![🔴 [TRỰC TIẾP] U20 VIỆT NAM - U20 THÁI LAN | Cúp VTV9 - Bình Điền 2024 | JET STUDIO](http://i.ytimg.com/vi/HxN2G6YpB-U/mqdefault.jpg)
The redesign was awesome rachel ! We would love more redesign videos just like this.
Yayy! Glad to hear coz this was fun :)
@@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
Yes Rachel! Keep them coming!!
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! :)
Greate video🥰 Save it !!!
Yes! You should make more videos like this :)
Yes definitely!!!
Yes, please make more of such videos. It helps a lot.
Yes!
Please continue doing the redesign series!! As a beginner in UI/UX, seeing the process in helping me grow as designer.
hi kavya
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"
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.
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
@@rachelhow
Thank you 🤗
Seeing you design in "real time" helps to know how a proffessional thinks. I'm still learning ux ui so this is pretty useful❤
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!
Please make more, this was really helpful
I love this redesign series, please make more!!
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!
Sure thing! More to come :) thanks for watching too!
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! 😊
Great work on the redesign! Love this series❤! Please do more of such videos. They are extremely useful. 😊
Wow, your humble and a professional at the same time 🙌🙌
Please do more of these! You have such an effective way of showing us your design thinking
Thanks for watching! ☺️ more to come ;)
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.
Thanks for watching! ☺️ I'll be making more :)
Really fantastic. The way you explained about the older design is good. Keep post related videos.
Thank you.
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!
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.
Aww thank you, Jayne! Glad to hear that. I hope to make more of these :)
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!!!
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 :)
I'm really glad you enjoyed it! Thank you :)
Wow, i admire how you can see these little details, loved it!
Awesome, would appreciate more videos like this 😊
Love that short video at the end! Would love to see how you created something like that.
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...
Thank you so much! 💕
Love how you explain your design decision "Whys" 🥳
So awesome, very inspiring!
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!
Thank you very much!
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.
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.
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!
Fire you do great at explaining and I love the amount of details!
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 🙂
Thank you for watching! It was a fun and intense 1 hour haha.
We need more videos like this 😍 it help us how design decisions are made also how to develop ideas
Absolutely please continue making this stuffs!
🙌🏻🙌🏻🙌🏻
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
Thank you for watching! Ahh I'm super glad to be able to help :) Keep going!
thank you Rachel, good videos. I learn more about ui ux design.
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 !🔥❤
Thanks for watching! And I appreciate the feedback as well. Will add this idea to my notes! :)
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! :)
Glad you enjoyed it! Thanks for watching! ☺️
Thank you Rachel, I love this series so much, can't wait for more practices💜
Love this kind of video! ❤ looking forward to more contents like this
Loved the result as well as the explanation.
I love how you also express the reasoning behind each decision the ux and the ui.
Thank you!!
Really like the final result 🔥 Would be great to see the similar redesign process for a website!
Feedback noted! I’ll look into this 👀
@@rachelhow If i may ask, how did you create that final result presentation? Did you create that 3D prototype through after effects?
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. ☺️
i LOVE these redesigns!!
Thanks for watching! ☺️
Perfect job Rachel 🎉
Thank you :')
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! 👏🎨
Thank you! Cheers!
This redesign video is great Rachel ! Thanks a lot for this~🥰
Thank you for watching :)
Thank you Rechel ❤ this really gives me a lot insights! It really brings my design to the next level! Truly appreciate your effort ❤❤❤
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 💛
Do you which apps she used to make this? ☺️
Great work in explaining the process! Thank you 🙌🏻
Thanks for watching! ☺️
this redesign is super helpful! would love to watch more redesign videos from you (:
Yay! I’m glad to hear this. Will make more :)
Awesome redesign Rachel! Thank you
You're so welcome!
Really loved it rachel. Please continue this series
🙌🏻
Wow, need more videos like this!!
Amazing! Watching you break it down really is an eye opener❤
Thanks for watching :)
Rachel, love your video on UI designs. Cant wait to venture into this career someday based on your tips and tutorials you shared.
Start this weekend! 🙈
That's amazing I really enjoyed it, please do more 🧡
More to come!
Loved it!, Everything was clear and on point.
Awesome, thank you!
Love this kind of videos, it's really useful. Thanks Rachel.
Thank you!
Thank you, I really enjoyed this redesign!
Yay! Happy to hear this :)
That redesign looks beautiful!!
Thank youu!
This was really great! As a new designer I found this to be quite helpful. I'd love to see more content like this :)
This was very helpful Rachel. Would love to see more redesign process videos!
More to come!
Thank you so much for this! This was really useful.
Your content is amazing, thank you!
Thank you, Max!
The redesign was so good, we would love more cool videos like this ❤️
Thanks for watching! ☺️
You are amazing. I've learned alot from this. Thanks for sharing your proces.
Thanks for watching! It really means a lot.
This was so helpful.
Thank you! Glad it is useful :)
Loved it! Please keep doing more videos like this ❤
Thank you for watching 🙌🏻
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 .
Please continue doing this!! It's really good! And how you do that the presentation at the end of the video??
I loved this, please do more!
Thank you!!
I love this, I want to see more!!
would love more of these for sure, thanks.
More to come!
love the UI redesign series🔥 really inspiring for beginners
Glad you like them! I'll be making more :)
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 😊
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.
Thank you so much! Redesign is a good way for me to learn UI design.
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!
Thank you, D! Appreciate the kind words 🙌🏻
would definitely like more of this designs
More to come!
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.
🥰🥰🥰🥰
Glad it helped! More to come :)
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.
Thanks for watching! ☺️ Appreciate the feedback.
This is really enjoyable! Would love to see more.
Thank you for watching :)
It is a very useful video. Thank you! I also like your choice of gradient instead of shadow - it looks smooth.
Glad you like it!
This is amazing. You should do more of these.
Thanks for watching! I’m looking forward to making more :)
Excellent re design and i loved the critique part and the animation of the app made it more attractive thanks for sharing
Yay! Thanks for watching :)
Totally enjoyed watching this ❤
The redesign is awesome
It would be amazing to see more redesign content from you! ❤
Working on it! Super excited, and thanks for watching!
Amazing video, would really love more videos like this.❤
❤️ thank you for watching and I'll definitely make more!
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.
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
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 ☺️
I love this re-design series!
Thanks for watching! ☺️
very usefull video, hoping for more videos like this. Colors, text and all are very eye-soothing.
Fantastic work!
Your videos have been helping me a lot, thank you
🙏🏻🙏🏻 thank you for watching too!
Yes, more redesign videos please. I'm learning so much from them. thx.
Really useful content for any level of experience. Would like to see more videos like this. You are doing great :)
More to come! 😄
This is really good. Looking forward for more.🎉
Thank you so much, John!
need more like this!
we need more videos like this.😍😍 please make a redesign series
Thankyou for creating this video, I have learned a lot by observing. Keep posting such videos. 😊
Thank you for watching too! 🙏🏻
you are so great at this. I am so jealous.