Design Challenge Reviews | Nov 2021

[Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] do [Music] [Music] [Music] do [Music] so [Music] well hello hello everybody and welcome to the live stream i'm your host jesse showalter and we got people who are joining us on youtube on twitch on behance on facebook hello everybody say hi in the chat i want to know who you are where you're coming from and give me the emoji that matches your weekend plans maybe it's a little hiking person maybe it's a coffee mug i don't know maybe you're gonna hang out and watch a movie i'd love to say hello and say hello in that chat also make sure that you're signing up uh and joining us in the discord server because today that's right today we are doing uh we are reviewing the work that was submitted for the november challenge the design challenge inside of that hey creative discord server the challenge was to design and prototype a checkout experience for the legend that's right my favorite spicy nootropic ginger drink the legend uh performance drink this challenge was sponsored by legend and adobe you know why thank you very much adobe legend for sponsoring this challenge because the winner the first place winner of this challenge is gonna receive a case of legend and one free year to the adobe creative cloud a subscription to the cloud service over there in adobe second and third place they're gonna get a case of legend and then everybody is gonna have a good time and and have had the opportunity to join a cool community over there on discord talk with me chat with me uh do some cool design challenges have fun all that kind of fun stuff so really excited about that we got paula and fells and james raymond papa sado we got people from coming from senegal and colombia and india and malaysia hey hey what's up everybody i'm so glad that you guys are here all right we're going to jump right in let me give you a quick taste of what we're doing here this is the file that if you would have gone over and joined if you are a member of the hey creative discord server here we are the hey creative discord uh community and scroll your way down to the submission the challenges uh tab you'll see there's last month's there's this month's and you had some great links we had let me see the winners and the instructions and you got a little video that gave you some overview you got a figma file to start with you got some starting files some logos and different assets there was a whole brief and this is what the brief said we are designing and prototyping a checkout experience um and so we want to see you know at least a couple interactions right and here's what here's what the challenge was get these starting files you must use the starting assets in your design okay that means the cans the logos you have to okay the prototype must have at least three interactions you got to choose what those were maybe it was a add to cart interaction maybe it was a swiping and switching of what thing you want to add maybe it's a toggling the quantity in the in the checkout flow i don't know but you must have at least three interactions it must have an add to cart and purchase functionality so that's probably two of those three i'd love to see more than three but choose any design software you feel most comfortable with and submit and get it reviewed for the opportunity to win stuff here on the live stream today all right so i'm really excited about that and i've gone ahead and i've looked at everything that's in the uh challenges submission tab and right around here let's see november 9th was i think oh that's we're going back to october there here we go hold on november 19th or so was our first submission by anestho okay so we got like we got like eight or nine submissions today really really excited about that before we go too far uh if you want to join this hey creative discord server it's free to do but maybe you want access to some of the premier kind of exclusive channels inside of there as well as a bunch of other cool fun resources you might be considering becoming one of my members joining my design champions members club and find out more about that link in the description learn.just learn.justshowalter.commembers and then you maybe become one of my design champs or supporter um and there's all sorts of fun goodies that you get uh you get live video hangouts with me every single month you get uh you get behind the scenes early access exclusive posts all that kind of fun stuff so maybe check that out but in the meantime let's check out some of this amazing work throughout this stream we'll also be stopping and taking questions we'll do some question and answer stuff but let's look at a nestlo's submission here that was submitted on november 19th okay so we're going to tap that boom open it up and we have a figma file we got a figma prototype that has multiple flows we're going to stay with this first flow okay so we can kind of click in figma and see the different options there got a got a nice website kind of like uh probably the shop page right not the home page but the shop page like this so we've gone over into shop just kind of curious what these other things are okay yeah they're different areas of the flow but let's click on one of these let's say i like the black i like the original because it's a little bit more spicy i'm gonna click there and we get a nice simple fade transition we're able to go back and shop again okay i'd call that an interaction that's fine with me we can swap out these things right here very nice but we should be able to add the cart i hope we can add the cart if we can't we might explore the other flows okay why can't we add the cart that's okay okay well all right okay let's we're gonna click around here and see what we got anything allow me to add it to cart that's okay well you kind of you're not you're not succeeding in the brief so much so but that's okay we will navigate around and see if we can make it work okay let's see maybe this one has the added card there we go white the white label the silk label had to add to card all right so let's do add to cart boom okay we see the notification bubble go off on the cart top right pretty standard ecommerce stuff it's a good pattern if you're doing e-commerce okay um let's see let's see somebody's saying they're having trouble with the discord link that should not be the case should be able to just click on the click on the the link that's in the chat go to the chat inside of youtube and click on that link okay so back to it here we go we're able to you know add something to the cart and proceed to checkout okay all right very good so far we're hitting all the all the areas we want we see the credit card it's already been pre-filled and that's kind of hit the end of our flow okay all right okay pretty cool that's good all right let's let's review this a little bit i think the experience is good i'm wondering what this would look like on mobile right um you know i i think you use the assets well branded it's very on brand very very nice i like that i would have liked to have seen some experimentation in more than just like simple fades right we had we had some decent amount of time like this uh slide out could have actually like animated and slid out now the reason you we use animation the reason you would ever use animation inside of your web design application design mobile design whatever it is is to trace the progress of the user's actions okay that's really at its core what we're not using animation sometimes you can use it for fun sometimes you can use it for possess i'm not against that but really at its core what we should be using animation for if you're going to is to trace the user's flow from one place to another so if they've added to cart the motion actually directs the users like view where they're looking their attention right to the next place which would be hopefully this next call to action of hey you've added it to the cart it slides out now do you want to keep shopping or do you want to proceed to the checkout so that's why we would use some animation or motion in this case okay again it's like just a fade so not bad i'd like to have seen a little bit more the layout here is very very nice i think because this challenge was design and prototype for me i'm missing a little bit of that prototype magic right so maybe just a little it's it it's really well done though right the the the form field uh like design hard to do very well done not sure if i love this dark panel over here for like the checkout stuff so maybe you know exploring what it looks like to create contrast without having to use harsh black and white like this because it's kind of tugging my eye over um when maybe i shouldn't maybe i should be highly focused here and this should be evenly weighted as far as it being secondary or tertiary or you know primary so you know we have to be careful how we use color and layout that's all i'm saying here but i think nicely done this challenge was submitted by anestho you are in the running my friend all right let's look at wolfram uh very excited to see the submission uh let's see here's what i have so far where we have a link and we have a figma file so i'm gonna click on both okay so here's it looks like maybe okay here's the full file and here's the link okay and all right so we're kind of clicking through this looks a little bit more like a presentation i'm interested i'm very very interested okay so what is what i can click do we got a little scrolling action okay okay here we go here we go now we're talking it's kind of like immersive full frame i'm digging it here we go case of 12 the details are very nice i think to be really successful with this challenge you probably would have had to do a little bit of research as well you would have had to have gone to the current legend um you know website and see what they're doing how they're doing it research other e-commerce experiences and interactions and prototypes you probably would have wanted to do a little bit of that for it to be really successful let's add to cart that's here's a little micro interaction do we see that can we go back because that was beautimus i really want to go back okay it should the little micro interaction of the hovers is always something nice and we can really do that using figma interactive components or states inside of adobe xd right so very very nice i like that let's add the cart and we see pink we just got a nice subtle we've got nice hovers on a lot of these but we got a nice subtle little notification bubble that went up there okay so really cool we could even show more very nice little interaction of exposing more or less information i dig that okay we we also like the silk we could add that to cart look it even popped to two i'm highly impressed highly impressed of that that's very nice let's see what happens when we go to the cart okay nice fade we're in the cart we look like we're not in the cart like we're actually more in the checkout experience right which is nowadays there's a difference isn't there like the cart is usually like hey i just want to peek at what's in think of this and like okay when we think of e-commerce this is a good e-commerce like a moment right what's the difference between a cart and a checkout anytime we are creating mental models of digital products we have to think about physical models of that same experience so physically in the real world you're shopping in the store right what's in my cart it's usually right here at the glance of my eyes and the movement of my hands that's the cart right then i take that cart and i push it up to the register to check out i don't necessarily have to go all the way to the register to look at what's in my cart this is why that mental model is there because it's the physical model of what we actually do when we shop in brick and mortar physical locations okay so the fact that when i go to the cart what i'm actually going into is a full checkout experience might not be what we want maybe it is maybe this is a maybe some research could be done and shown that this is a great way to get people to immediately buy i don't know but it feels a little bit more like a checkout experience to me okay let's keep going here let's fill in our information we have all the different states you know it's really subtle it's very very nice i would have liked to seen some uh some maybe like state changes for the oh look the discount code's my name isn't that nice um you know so some changes to the form fields the input fields depending on current status active not filled error that would have been nice i'm not saying it's mandatory but look ready for a nice little interaction let's add more quantity oh i like it all right and the price is even changing look down here folks i like that i'm seeing all the interactions we need to qualify this for the challenge proceed to check out that one's not quite working but let's just say that that did work okay cool we're good we're good and bingo we've moved on we're now in the payment section the stepping stone method up here giving me steps to completion very nice i'm into it we add the card stuff here great very detailed prototype i'm into it okay and we please wait while we're processing your payment nice confirmation you know what i'll say this uh who who submitted this this one for me this is wolfram wolfram right now you are in the running i really i dig this visually it maybe is not my favorite experience because it started kind of looking a little bit like a presentation although i do like the full framed nature of what you've got going on here but the checkout experience the prototype was very clean nice nice slide out navigation i didn't even see you have a changing icon really clean really nice i like this this is one of so far i'm really digging this one let's move on to the next one this is trey uh let's see we're gonna open up the legend design challenge from trey okay now you would have been able to submit the only way you can submit is by being a design challenge is by making sure that you're part of the hey creative discord server right okay so we got kind of a fun experience here all right and we have one option here to see the cart which uh oh your card is empty i really like that let's talk about tone and language here um super duper fun okay okay oh yeah let's go back here we haven't shopped yet i want to shop okay yep the animation was okay i'm gonna i'm gonna comment on it okay because you gave it to me to comment on i think the animation's a bit much but i'm not opposed to it okay i but i do like the attempt it does show me that there my interaction is taking place not against it it might just it feels a little old school right also just this layout in general it's falling a little bit flat for me um and there's not proximity wise it's hard to tell the relationship of aries because everything's on this black kind of plate or platform so it would have been nice to to kind of carve out areas here black is hard dark websites are hard so i get your i feel the struggle i struggle with them as well um so we see the different kind but see that the contrast there going down to this big white section it's a little tough but let's check out the interaction here let's add the cart i like this interaction back to the mental model of adding something to my cart it's as simple as going i want that pop pop it right into my cart i can now identify and confirm that it's in the cart right we can take it out of the cart go back here and add it to the cart again it's in the cart let's remove that can we change quantities at all we can look at that i love it all right super good let's go to buy it now we move into the buy flow okay which is a common term in e-commerce the buy flow all right so again i might encourage you to work on your form field design just a little bit to maybe mature them a little bit okay it's very stark when we work on dark interfaces to have light input feels it can work it may not just be the best approach in my opinion okay let's fill in our form field everyone's doing that which i think is great it gives you the experience just as a a tester or or experiencing a prototype um it's nice to see the empty state filled state just just a good note right uh people want to see that it's one thing to be like okay i'm clicking from screen to screen i see now we've completed this but to actually go through and fill form fields it's nice it's a nice addition to your presentation of your prototype let's save and deliver here okay we're using a little bit of this uh of the accordion kind of like model which i dig let's check out with credit card fill the credit card info save and review okay not sure about buttons kind of whizzing around and flying just let the button or the confirmation kind of collapse inside of the accordion quick tip it's a little bit nicer okay and now we place the order you don't need to keep the main call to action like this um always exposed and dancing from section to section that's a little jarring okay okay and we thank you for your purchase all right good you know what i loved about uh wolfram's design back here was when we checked out we got like a little loading it felt very realistic this was like a quick swipe and you're done i get it super fun um i'm into it i love it it was it was a really good really good example here okay um but yes okay great so trey thank you for your submission it's in the running we love it all right this one is from umami 310 hi everyone new to the community first challenge let's go yuya may yuya ma310 maybe i said that wrong okay we got our ourselves a yang excuse me on behance and we have a beautiful hero image up here gorgeous layout okay we got a video and it looks like we also have the interactive prototype with a lot of animation crack and let's go to the prototype because that's what we want to experience while we do that quickly uh while we're while we're letting it load i'm going to take a sip of my legend spicy nootropic ginger drink real good real tasty all right let's get in to this prototype okay the looping animation maybe a little much the layout's actually pretty nice it's a little bare okay but what's getting my attention more than anything is this looping animation so i would stay away from looping animations like this although i respect the heck out of it for for you know making it happen like that okay oh that was an interesting rollover oh interesting you roll over it you get a little dialogue like a tool tip of the can okay so this this might be for me what i would consider maybe a slight overuse of animation right and also the length think of okay when we talk about animation um we are creating a tone a look and a feel through motion all right so first you're creating that look and tone through content then you're creating that that tone that feel through visual or aesthetic then the next step that third kind of layer of exploration for tone and feel would be motion right so the the tone that we're creating here is one that's kind of slow i use i tend to describe uh like motion with sounds that i make it feels lumbering right it feels a little slow like a mammoth charging right whereas sometimes i want things to be personally i would take legend as a little bit more of a snappy kind of like modern uh kind of uh tone just in in brand in copy in motion in animation as well so think about that we're going to learn more a little bit it takes us back okay we got a oh a clicker and a swiper lots of okay scroll down lots of information about legend okay we got all the ingredients kind of oh yes okay that's interesting all right let's go oh mama okay bye now yes that was that was interesting okay let's let's just try to add to the cart okay we get a swipe up i get it i like it immediate kind of access to the confirmation and we also have some nice like uh quantity picker which is nice so i'm getting all of the um are we adding to cart again we already this should be our card so that's a little confusing right we add to cart we add to cart again no we add the cart we're looking at our cart we check out but that's okay i'm into it okay uh we can take one away would have been nice to see this kind of like slide up condensed do something a little bit kind of like amazon check out you can imagine we fill in very good we choose the master card okay uh sure wow save payment information okay that was interesting and we confirm right like another great thing keep in mind very common e-commerce process cart check out confirm make sure everything's okay before you buy right because you break it you buy it kind of thing and then and then we confirm order thank you for your purchase oh i think we might have just used a little lotty animation whoa something happened without ice okay yep all right so here's here's my thoughts here's my opinion on this prototype i think it's a little misuse of animation i think it's a little overboard i don't think you have to try that hard i think you need to focus a little bit more on micro interactions on kind of clean animations and refine and mature that tone of animation very important to do but really well done i love it let's move on to the next submission this is from mila shumelina who mila schumelina is one of my members she's a design champion in the house so i'm expecting really good things from mila shimolina right now because she's one of the homies she's one of the crew let's we have the design file and the prototype i'm just going to check the prototype file for mila shumalino right now okay clean very nice gray is a hard color to work with as a background and i know this brand is very like aesthetically this brand is very black and white so we had to find some sort of in between i would go for a darker tone of gray or off black not pure black like maybe some have tried but gray can be just in general a hard tone to work with okay so let's scroll down see what we got nice layout clean love the big typography oh hello hello i think mila shumalina did some some box design because i don't believe this box design exists for this brand or this company right so she went she's like i'm going big i'm going above and beyond here beautiful beautiful beautiful layout i like this approach i like using these illustrations and assets we're part of the starting assets and she actually took this water splash probably did a little bit of photoshop work a little manipulation like that oh my goodness oh my goodness that's really really nice okay so let's go let's go and i'm not seeing any interactions yet in the prototype ah that's a picture of me doing this okay that's so funny no no uh partiality for that but it is funny okay i love the i love the uh the addition there okay kind of an interesting exploration of shapes okay awesome i'm into it i'm into it do we have okay so we don't have any like working prototype as far as like things linking from one to another but we do have multiples i just press left or right on my keyboard i'm able to get in between them that's okay i'll we'll we'll we'll click through like this okay so the users here i'm assuming they click on you know shop they go here they look at it uh they see the beautiful overview this is very cool very modern kind of like um you know like nutritional facts ingredient stuff like very cool very cool so we press add to cart and we get this is a much nicer now here's here's what's interesting a much more mature slide out uh cart it's clean it's simple it's not as bubbly and cartoony it's a little bit more on the mature side right when we when we read logistical information uh product information checkout information in a biflow or e-commerce experience we need it to be a little bit more on the clinical side because i need to be able to read it clearly i don't need all the pizzazz and interesting things i need clearly defined uh you know information and i think this does a really good job there right it tells us what we have um now one thing i will say is that gray was not it's not my favorite for like some sort of like main background or neutral color or plate to work off of but because it's not pure black pure white it's a little less of a contrast issue it's not so harsh is it see that color wise a little color lesson for you okay so we're like filling in like putting all of our information oops we can't find this page that's interesting okay um and she's doing all of the checkout experience in this slide out which i'm not opposed to hurrah i like that okay i'm not opposed to doing the checkout there but she does have all the multiple states rightly sorry we can't find this page payment failed return to payment page she's she's kind of like handling all the bases so i like this uh i i wish it was a working prototype but i'm not gonna ding you for it because you you put in the extra effort and work of really forming out the layouts and you have all i think the appropriate screen so i like this i like the color of this i like the flow of this the simplicity and the maturity of this i think is pretty on point so good job mila shumalina uh let's go down to the next submission this is uh dirk bajant and i'm gonna go for the xd uh prototype from dirk okay here we go now this is a mobile which totally all about that life let's go and here's what i would say it feels a little bit already just visually a little bit on the busy side right it looks like it was going like this background was almost like a louis vuitton type pattern a repeating pattern but i think what you're really getting is a little bit of a a legibility issue or just maybe even a cognitive overload issue like heavy patterns like this in the background maybe not the best thing in my opinion okay maybe somebody else would love it maybe not not my vibe so to speak now we do have some pretty nice i know because i think i played with this one a nice drag interaction here fun super fun not the biggest fan of this little rotating tabby thing but i'm not opposed to it because technically the interaction happens so fast um i like it i think you were playful with it i think you were having fun um and i i think you were exploring like interesting things right so we're able to buy it now add to cart let's try the add to cart oh see that's what i'm talking about a little confirmation we saw a little bub a little bubble head up to the top and now we're able to click on the cart it's interesting because it feels like is it yeah okay it's just kind of sliding out is that a scalable model though is the question i have like how would this scale if you had two three four things inside i would use the full especially on mobile use the full width of the device because there's already kind of limited real estate there right so we want to use a little bit more of that real estate just to unpack it for the eye just to make it a little bit more visually understandable okay let's go ahead and buy now really clean we fill in the information again are we are we starting to see some really consistent patterns right slide outs uh steppers um you know like certain elements that are pretty consistent uh by flow ecommerce patterns take note the reason these patterns are here is because they work this button is see-through i'm gonna go ahead and say no no to the see-through button okay it would be better for it to be a stan like a standout call to action right i need to know and on that on that lesson or in that vein of critique right which all this is constructive criticism i think these are fantastic submissions great designs we're all learning and growing as creatives constructive criticism only helps us it sharpens us and when you get your work or you watch somebody else's work get critiqued you learn from it there's only two there's only two outcomes in life you win or you learn you don't lose you win or you learn okay so that's what we're doing here being helpful but in this vein i would say um we are overusing a call to action color here right our top bar is this kind of gold color we have gold in the back we have gold here we have gold underlining each one of these form fields we have gold for the button a light lighter tone of the gold where is the call to action where is my eye led it's kind of being led all over the place isn't it right i want to be led to one place this is why we simplify designs we simplify designs and we maybe i think it's the what is it the 60 30 10 rule or the yeah it's something like that it's like 60 neutral 30 or like 20 can be your like your primary color and then that 10 or 20 should be that accent color that call to action color okay i'm going to do a video on that pretty soon because that's an important kind of foundational element all right so okay we're kind of clicking through go to the element we fill in all of our card info okay great we could use paypal i'd like the options that's kind of nice thank you for your purchase no confirmation that's okay we do get a fun like map view and my order is here now okay cool that's it's a fun experience i like it i'm into it i think it has some visual issues and then also i think that the checkout experience could have been a little bit more thought through i think the layout suffered i think the prototype was great i think the visual design struggled just a little bit but really nice submission by dirk i love that okay this one is pornema and i saw this one actually happening in my design file which i shared the figma file and then i made it editable which i should not have so purnima uh uh edited it inside of my inside of my file which you should not have that's okay ah let's go let's go let's go here we go we got a little prototype let's watch the prototype okay interesting it's like that all the elements are falling into the can the layout's nice i don't love the little arrow at the right because i don't know what's going on there this is definitely done in adobe xd because we're adding fun little visual uh like uh video elements now here's the compartmentalized kind of thing i was talking about nice to have some separation from different elements real busy that that little jingle jangle animation right there is very very busy okay um but i do like that you have a switcher of the elements there okay uh that is nice add to cart nice pop of the little bubble great i got a little confirmation like that it doesn't need to animate up but just to see some change oh we did we did a shopping cart animation this is nice i don't mind a modal this is the first modal checkout that we've seen i don't need to hover and expand the image thing i don't need that that's unnecessary i would say proceed to buy let's kind of just walk it through the process for me i like that okay i love this actually let's pause okay so going to a separate screen that has the um the two panel confirmation of your cart on the right and now we have the checkout experience i think that's actually in my opinion one of the best ecommerce buy flow models is to be able to still confirm your cart the one thing i feel like this is missing is go back and continue shopping i have to go all the way i'd have to hit the logo or where do i go or hit the home button up here to go back and shop some more if i'm not ready to check out so an option for that might have been nice i don't know why uh-huh the little arrows they are they throw me a little bit i don't think you need the arrows i think you need like a segmented control in this checkout experience over here um but you're ready to pay now on both see how okay see here's a problem is two call to actions pay now there pay now here so we might need to modify the cart on the right hand side just to show and represent what's in the cart but the pay now is happening elsewhere or vice versa i don't know but like you just you only need one call to action there's too much redundancy happening there okay and it's kind of a fun gif oh okay we're using the gif we're using the video not really on brand but cute fun okay i'm into it um okay and we have i think we have the interactive prototype right here which is really fun okay so buy pay yeah the whole thing was good i thought it was okay i love the two panel like actual checkout experience i wasn't a fan of and i oh oh sorry sorry sorry let's go back down to where the the clickable prototype was i wasn't a big fan of some of the kind of superfluous or like unneeded animation stuff that was happening there i think it's a lot of attempt to add pizzazz where what i think this really needed was probably just a little bit of layout help like this button is floating in the middle but everything is left in line and we constantly have these arrows leading to the right for stuff that i don't think you need so keep that in mind right pizzazz is nice once we've conquered firm layout and kind of beautiful design so that's what i would say but really really nice uh submission here from pournima i love that great stuff this one is from ilya and we have uh mobile checkout and a desktop oh ilya what are you doing to me you did mobile and desktop i like it i'm a big fan oh this is looking very cleanly very tidy we can see the ingredients although the go back should not be here we should just have information kind of shown okay that's interesting add to cart oh love that card experience enter the promo code check out we go to a full-blown checkout everything is right about this so far i'm loving all of this i don't have time to fill in all this stuff that's okay we're just gonna go to review order maybe a little bit more active state call to action stuff happening up here but see how we've simplified this is an interface uh oh yeah uh x dirk and lisa said uh that's the 70 30 20 rule that equals 120 that's not true it has to equal 100 i think so it might be the 60 30 10 rule or the 60 20 20 or something like that i forget um but it's not 70 30 20. definitely not it's too much too many percentages um but this is an interface right this is a interface that's allowing the product and the experience to take kind of center stage not necessarily the pizzazz and the color everything's been neutralized it's really really clean confirm the order uh processing oh we got a little processing thing yeah this is a nitpicky i'm just gonna go back it's a nitpicky if we're processing i'd like to see it was very subtle for it to move to processing maybe i see a little spinner come out on the button so i see it maybe the words go away and it's just spinning or something like that but nice and then a way to go back to the homepage mobile checkout i like it i like it a lot let's go to the desktop checkout and see what ilya made for us very clean this is kind of hitting all of the things i've been talking about right we're like uh segmentation of areas or or separation of areas right here's my cart here's my information to fill in right can we open up address we're going to save this again the button is not whiz weighing like flying in between sections it is just staying within its own section save my address payment information save the payment information each of them now have an edit to go back and do which i get it in the in the prototype that's hard to do they all refresh but that's a great model right there that little that little edit button that pops up i like it then we have the order summary over here enter our promo code and shipping information great thank you but we can't check out yet and i don't know why that's okay that's all right that's okay but maybe we can click through to a checkout nope but it is a very nice layout i'm all about this ilya this is what's really this is hard you guys there's great submissions here we're almost done we got two more this is uh lydia has a figma file for us a figma prototype from lydia okay experience sustainable performance nice two column love it we have a dark mode and a light mode didn't have to do that but you did and i appreciate it you can check the cart the cart's empty beautiful we're exploring the different states let's explore the different flavors i like this i like this we can add quantity right here that's a fun functionality and we can then add add to cart i see that maybe we had a little bit of issue with uh certain elements that's fine but we can go to the page as well here i love this little segmented control little tabbed kind of like area add to cart we got confirmation beautiful we're doing all the right things just like the last one that was uh ilias lydia's i think separating areas right cart versus checkout stuff love it we could do a lot of the work over here change the shipping the only thing i would say is you know maybe expand these a little bit give a little bit more space to the it feels a little compacted right we could maybe expand these a little bit and these giant uh extra clothes elements i don't think you need those i think they could be much smaller uh to exit out right and then we continue also i'd love to see a little bit more there we go the last one was like not filled in hold on let's go to the cart here we go it was like not filled in and it went to like gray whereas this one as soon as i filled it in went to black which i love love love right so you got to pick a style pick a button style that is active inactive default hover all those kinds of things especially on desktop like this let's what does this look like in the dark mode pretty spicy actually pretty nice um let's go back through and here with clarno you got different options that's fun okay we're gonna pay beautiful i think we use a little lottie animation in here i liked that that was nice okay um really beautifully done this one is by lydia i'm liking that one as well the only thing i would say is you know working on spacing and layout maybe a little bit but really in the end the the prototype the interactions was really really nice this one is by aaron aaron rabbi and this is our final submission for the day from aaron and then we have some serious thinking to do because i have not made up my mind okay uh thank you for looking through my prototype oh that's interesting okay cool we can shop we can go to our story uh we can go back and go to contact love it okay uh probably figuring out those sections all right i'm not the biggest fan of this like gradiated kind of like kind of fading into an image i think we can figure out better ways to do it and then also contrast wise i think you're hurting yourself with this background texture any time we it really makes it busy it looks a little bit like a wallpaper right inside of like an interior design but it's not doing anything for featuring the product itself right this is a more of a critique of art direction than anything okay um and uh so i would just say you know simplify a little bit more okay um okay all the actions kind of happening up here let's click on a can but we can change here and buy now or we can go click on a can okay this is a little bit better see how we don't have that background stuff that's happening there and be careful of putting things inside of boxes that end up looking like a button also our contrast here the the pull to the call to action is not as great as it could be okay the reason being because you're over using this kind of golden or like kind of tan color see how it's here it's here it's here it's here it's down here so there's a lot of areas you're using it so therefore it doesn't really stand out notice that like the black button actually stands out a little bit more right okay you're doing one thing that nobody else has done though is once i'm on one product i'm easily able to kind of like move back and forth between the two products which i actually really love that um we can add this and now buy we can't add to cart that's okay that's all right uh let's go back here we don't have any way to get to the cart which is kind of a mandatory it's kind of a big deal for e-commerce but that's okay um we will let it go right and we'll do this we're kind of clicking in here oh that's really nice about some of the best form design i've seen today actually love that okay so we're able to fill all those in hopefully change the shipping you know update our billing um the interesting thing was you like made these active states but we can't fill it in that's okay all right i'll change this why not add that one to card that was a great not really you might be a really fantastic ux designer actually because you're thinking of ways to upsell and let the user access things they should that these are really clever solutions on a you from a ux perspective the ui i think is the thing maybe you need uh to work on just like a little bit add a discount code okay we applied it now we can complete our order order confirmed okay all right so you know there's some ux principles you're kind of missing there uh as far as like different states or um confirmation screens or getting back to certain areas quickly but there are some new and fun solutions in there like the upsell that other people have not thought of that's really great yuko says um what's this nootropic i am i'm all about it is because of the design no it's because of what's in it um so the nootropic drinks uh tend to help you cognitively so this one has a lot of like prebiotics nootropics it's vegan it's natural and it has certain elements inside of it uh that have been proven to kind of help you think and like help your brain function a little bit right so i used to drink um what are those called bulletproof coffees that have like mct oil different things inside of it they're really like hard to make it takes a lot of time this is a lot easier and it's really spicy and nice and refreshing all right so i'm going to be looking at these submissions in the background but while we're doing that let's move into a fun time of question and answer okay um so if you have a question throw it in the chat any chat that you're in and uh and we will chat about it all right um we had a couple people asking uh where is this where is this live stream playing uh right now i am streaming to facebook behance twitch and youtube all at the same time so you can find me on any of those platforms uh super fun um let me see let me see uh youtube abernail says youtube didn't notify you hey make sure that you have liked subscribed and hit that little bell notification icon so you'll know when i go live i usually go live every friday morning uh specific and central standard time morning so um yeah so make sure that you're subscribed for that okay um let's see let's see let's see let's see uh omar omar aslama says i really love the idea of the challenge i'm sad because i didn't get the time to do the challenge but there there will be another one coming up in december absolutely here's a question from abraham can you suggest me some good royalty free no copyright music tracks that i can use absolutely i have top my head i have two options for you number one just go into youtube if you have a youtube account or google account you can open up your youtube account go into youtube studio and go into the audio playlist uh and there's just tons and tons of free tracks you can use to make your videos if you want something a little bit more all my stock music comes from um what is it called i for i already forgot who who makes my who makes my music it's uh uh uh music bed gosh i just had a horrible brain fart i couldn't remember the name so i use musicbed which is like a monthly subscription and then i can use all the royalty-free music that i want which is great um so that's what i use it but i started out using the youtube stuff only and then i moved to like other options like musicbed so maybe you should check that out uh james raymond asks how do you like to hand off your designs to developer i'm actually really passionate about design development handoff this procedure um i like to do a few things number one um there's a just a philosophical principle that i tend to live by when i do design development handoff number one uh is a famous bible verse from philippians chapter two it says consider others as more important than yourself and how i would apply that to this use case is i want to consider your time more important than my time so i'm going to spend the extra time documenting making things pixel perfect making things just right making sure there's any anything that i can do to add value to you as the engineering team i'm going to do because i'm going to consider your time really valuable so that's kind of like a life principle but tactically what can you do number one you can document the heck out of things right document more than you think you should you should document states and components and animations you should document spacing and timing you should document you know where you got certain loading animations and lottie files you should document uh if you're starting to build a design system how this plays into the design system right you should use standard nomenclature that you have this is number two so number one is document number two standardize so you should work with your engineering teams to create standard kind of ways of naming things talking about things what one company refers to as a card might look very different than what another company or you know client refers to as a card okay or ui card so we have to create some standardized language and then start to build that into our design systems and our pattern libraries okay number three you want to be a part of the handoff process don't just hand things off and go fix it do it like this and then come back later and complain that the button's not right we want to be there for the process say so we've documented right we've made sure that we've standardized some things we've set pro like principles and uh operating procedures in place but they were available too to say what do you need from me can i get you more what is it okay now let's go real tactical there's some tools that are great for handoff you know a lot of the modern design tools like xd and figma and sketch have all made this really great they all have some sort of inspect mode where code is available i think figma and xd are doing that the best but you might want to have a third party software or tool that you use as the single source of truth i don't like people going in my design files i don't like developers going into my figma files unless they have to so i'd prefer to use something like zeppelin or abstract or something like that or anima that says hey that over there that's the single source of truth go there for final files not the design files that's just me personally maybe look into that so that's some thoughts on how to do design development handoff okay um uh i'm transferring from something to figma why is figma so hard i don't think it actually is i think learning any new tool is hard and getting rid of or letting go of certain ways of doing things in workflows from one space to another is difficult trust me i use all of the tools pretty much it's hard to go back and forth but sometimes i'll be using figma for like three to six months and i switch over to using xd because a client or something needs me to it's tough there's always a transition there so you know first recommendation would be stick with what you know uh but second recommendation would be uh be willing to release and relinquish workflow and learn new workflows it's only gonna make you a better designer okay i would say in figma always use frames don't use groups uh don't group things together don't draw rectangles and then text inside to make a button just use auto layout use frames it's way better okay which programming language is good to start after being a ux and ui designer i would say uh it depends on what you wanna do um if you wanna have some empathy or some skill set for mobile design you might wanna learn xcode you might wanna learn swift maybe um if you want to do good like ui design ux design for desktop or websites you might just want to learn html css and javascript those are the magic three the three wise men of front end you learn those uh sky's the limit you start building all sorts of cool stuff so that's what i would say there um okay how how do i how to sell a design and learn fast that's like kind of two questions uh learn fast let me answer that one how do you learn things about design and creativity you learn what you need when you need it i would say you get a good foundation underneath you the basics the basic principles right of design right like color typography just like basic design theory contrast repetition alignment proximity these are basic design tools if you don't know about those maybe sign up for my newsletter i might be having some design principle courses coming up but you learn those foundations and then you only learn what you need when you need it after that but you continue to grow and master these foundational elements right so maybe you really want to design websites and prototypes as a part of that do that but don't relinquish the design foundations you need those you gotta keep them hand in hand okay um and then how do you sell uh you don't sell things that people don't need you sell value that people want that's if you just do that if you just sell things that you know that people need if you solve people's problems serve them well and you sell not yourself not your services not pixels not creativity but you sell solutions to help them make more money that's the value that you actually bring is your business savvy your ability to help their business that's what you sell all right uh can you use different h1 for different pages if you want every headline to be the full width of the page um we're talking about uh the way that things look and are displayed versus the value they have to the browser right h1s h2s h3s the reason these are in web development or front-end development is because we're saying hey google or or whatever browser other is besides that hey google this is the most important look at this one first right this is your main headline okay everything else after that comes secondary or tertiary um so if you just want things to be big and fun that's a display challenge that's a visual design challenge you should do that with css okay last question and then i think uh i've been kind of looking at these designs as i run through i'm ready for my first second and third choice i believe uh to announce the winners and present some uh prizes that's what i think i'm ready for um oh my gosh but i'm gonna have to go back through and figure out the who's who all right hey we just had andrea carpent subscribe to the design champions club what's up andrea uh welcome to the club you are gonna get access to all sorts of fun stuff i just got the notification on my watch right now that you signed up so thank you for becoming a design champ and a member you're gonna get access to the exclusive channels inside of the discord as well as all sorts of other goodies resource library fun stuff make sure you join if you're interested in joining all right um okay so uh yep i'm now i'm looking at them i maybe need a few more minutes to kind of peruse as i'm answering questions okay auto layout seems really hard karan says uh it seems hard to move things around and customize any advice to learn it really really well i made a video all about auto layout that has a challenge file associated with it i would watch that video go through it a bunch of times you just got to play with it here's what i would say auto layout is great for certain use cases a lot of use cases not all use cases right so you can't use it for everything but you can use it for a lot of things so know when it's good and if you're like this just doesn't work for me it's all right it's you're no less of a designer just pull it out of the auto layout do something else that's fine do what works for you is always the uh the motto that i would i would kind of encourage everybody to okay all right let's jump back in actually i'm i'm just gonna tell you who my winners are okay um let's see let's see let's see man there's so many good so many good ones i'm gonna have to give third okay we're gonna do third place are you ready third place winner i believe let's go back up and just make sure we're looking at these in order this is where i'm gonna have to a better way to uh like organize these third place winner is sure enough gonna go to wolfram that is wolfram who is in the chat today you are the third place winner i loved like the full kind of immersive experience of this uh the look and feel was great actually you had a texture behind some people other people had textures but yours was simpler right and it was a beautiful kind of exploration of the brand and it had a great kind of interactions um it had a great cart experience i dug it i was into it you had great separation of elements like the prototype itself was pretty rocking great confirmation states um i was a really a big fan of this uh exploration and this prototype so i say good on you let's just fill a few things in and explore oh look at that let's go back boom return to the shop i loved it it was just in general wolfram i thought it was a great great exploration i just want to give you huge props you are the winner of a case of legend spicy nootropic ginger drink i will contact you in the discord and send your get your information and send it to legend and they'll be sending you a case of this bad boy you get to choose the spicy one i recommend the spicy one or uh the less spicy one if you're not as adventurous but from your design i would say you're probably the adventurous type so go with the spicy hmm you won't regret it all right so that was wool from hey give him a big round of applause give him some shout outs in the chat always cool to see a winner all right so i'm gonna go i'm gonna be looking for my third place winner there was some that i really really loved there were so many good ones but i i think i have i think i have mine in mind um oh gosh hold on i'm going back i'm going back okay let's let's answer another question where is the discord karan patel asks go all the way up it should be pinned in the chat if you're on youtube click there sign up for the free discord server jump in uh in the next 48 hours you'll get uh the next design challenge will be coming out to you should be a lot of fun so i'm just going back and making sure i know who did what oh yeah yeah that was a good one that was fun um okay okay okay okay okay okay you know there was one that i oh gosh that's a good one too hold on i'm just kind of i'm thinking through things if you have okay andrea says i'm gonna answer this question as i kind of like try to figure out who number two is andrea says uh looking for a mentor and i think you're a great person for helping me get to the next level see you around thanks andrea i appreciate that hey if you're interested i do coaching sessions you can go to my website and then jump to learn.jesse learn.jesseshowalter.com uh and i have 30 minute and 60 minute sessions if you'd like to book one we talk about anything we talk about your career we could talk about life we could talk about your designs your portfolio whatever you would like to chat about i would love to chat about with you um okay i think i think i found my second place winner uh yeah yeah i totally did um so let's i'm just going to refresh this and go to the home page oh gosh it was so good it was so good there were so many good ones uh yeah that one's definitely i think i know my winner for sure i definitely have my winner okay y'all um it's just about who is gonna get this second place and i think that i'm gonna give it to oh no i know i know i know which one well i'm getting there give me two seconds here i have it i just gotta find it in the chat yeah yeah this is the one this is gonna be our second place winner i think i think even though the prototyping aspect of it wasn't there the the completeness of the design i think goes to mila shumalina mahomey my friend my design champ goes to mila shumelina i think the design was just super clean i think the extra work you did on packaging like blew my mind i think the customization of certain elements was great this was a full-fledged website great experience but then as we went through the checkout experience or through the shopping experience i thought that that was like fantastic as well right typographies on it like call to action's good i wasn't the biggest fan of this kind of gray background but it really started to actually work once we got into this more mature um version of the cart and i love that you did hey this is in the cart not necessarily jumped immediately to the next page this was mature it was classy it was good use of common ui like design patterns that we see for e-commerce seeing all the information presented well right being able to like input everything right there in the side panel i thought it was great good confirmation multiple states provided and i just thought that this was this was a great one so second place mila shumalina you are a winner of a case of legend spicy nootropic ginger drink you're going to love it it's going to get sent your way i'm going to contact you in the discord and uh and i'll get your information send it off to the legend folks but the next winner is going to be our first place winner our first prize winner and this winner is going to get access to um one year of adobe creative cloud and also a case of the uh a case of the stuff you know and a case of the the legend and hands down i think the amount of work that this person did the fluidity of the prototype the classiness and maturity the kind of calming down of the color palette using color well it's gotta go it's gotta go to our friend ilya parleman peralman perelman i think i said that right ilya pedalman and this is ilya's design submission she had a mobile and she had a desktop submission i loved it it was just clean it was classy it just worked really really well um i'm gonna refresh it really quickly and go all the way back to the beginning so you can see it right the ability to kind of see these different sections was great there were some small changes i might have added like just being able to toggle in between these but the cart experience very classy very nice entering the code the checkout experience really really nice but still being able to go back everything about this was just good stuff like being able to continue shopping if we wanted to the use of the color the layout everything was smooth right even the motion the timing of the animation very clean not too slow not too fast not too aggressive right but everything here was well done it was it was really about the the subtleness of the interface um you know and using good like standardized patterns alignment was good like cards are good all of this stuff is good processing you know and confirmation screen back to the home page this was just beautiful beautiful stuff and then to boot she went ahead and created this gorgeous desktop experience that allowed us this is probably for me probably the thing that won it was this desktop experience where i was able to fill all these elements in and once you save we got the edit button that came back which was just it's classic it's well done this looks like a shopify theme this looks gorgeous right it looks beautiful and mature and clean you know you might want to play a little bit with the spacing here and stretch this out so we got a little bit more space for our items and our cart um but the order summary was there everything was on point um and shipping information i loved it i just thought it was a great great submission so congratulations to ilya perelman i keep saying that wrong you are the winner of one year of adobe creative cloud and one case of legend everybody else dirk and and everybody else and lydia and aaron everybody gets a participation medal you all get my huge thanks for participating you did great work i'm proud of you guys i'm so excited uh that uh that you guys participated in this challenge it's a ton of fun submit your stuff join us for the next challenge it's gonna be great i'm so thankful you guys were able to join us today uh join me today for this stream um and that is pretty much coming up on the end of the stream we've hit about an hour and you guys have hung out and watched me kind of review these beautiful work thank you again for everyone who's participated make sure that you like thumbs up subscribe to the channel hit the little bell notification icon so you know when other videos like this come out consider becoming one of my members a supporter or a design champ it helps these things happen uh it helps these challenges happen prizes to be given challenges to be made everything like that i hope you guys are having a fantastic friday i hope you have an amazing week and hope you're designing amazing things hope you're making amazing things and i hope you keep on challenging yourself to grow

Channel: Jesse Showalter

Views: 1,390

Keywords:

Id: 7QA4PMcx9SQ

Length: 66min 56sec (4016 seconds)

Published: Fri Dec 03 2021