PayPal's Website is Freaking Ugly

Key Takeaways

back in 1998 PayPal was created by far the internet's most popular way to pay for stuff even a very dorky Super Genius by the name of Elon Musk had a hand in the company now fast forward to today PayPal is still a massively successful company but there's just one problem their website sucks played with a myriad of issues that break common UI design principles we're going to see if we can refactor this into a much better more modern product and by the way if you want to see the full length refactor of this episode along with others in the past check out the top Link in the YouTube description here alright so let's get started with the navigation I actually like their navigation and I'm not going to really change it very much as you can see here we have the logo we also have the menu that's right next to it which is very consistent with the original and then also the help login and sign up buttons and the only thing I changed there is I'm not using strictly pill straight containers and as you can see if we compare them both they're very very similar now the next up part is going to be the hero section and the hero section we could leave it exactly like this or we can make it a little bit more seamless if we make this change now of course when we do this we have to fix the contrast on the type and the navigation so there we go we can just make everything pretty much white so we're going from this where we have a block up top and also a block in the middle or we could just have a single block here to make it just a bit more seamless alright so next up is going to the hero section type like the headline the sub headline and the actual call to action button now if we compare that to the original we'll see that there's a little bit squashed up in the topography just isn't quite on par with the revised version there are three columns here but we have issues with their low quality graphic and this unbalanced login card so we're going to simplify this into two columns where we have this little isometric iPhone graphic and by the way I use mid journey to generate this and I'll show you exactly how to do that in the full course and then also we have this overlay their overlay is very weak pretty much hard to see and unrecognizable so I made this a lot larger now to make this a little bit more interesting we can introduce a little bit of graphic design in this illustration so for instance we can kind of make it appear like it's coming up and out with these little lines here at the bottom we can also I kind of frame this around here to accentuate the fact that it's extending beyond the hero section background and this kind of just gives us a nice layering effect we could also do in the background here so we can see if we zoom up we have these cool little abstract blocks and we can kind of use that as a motif that can recur throughout the design for instance on the right hand side maybe perhaps balance it out we can add the same sort of thing over here very cool so without it it looks like this and again it's very simple nothing objectively wrong with it however if we go back and add it it just adds a little bit more to the design so if we compare the two against each other here is paypals and then here is mine I think we could definitely agree there's a big Improvement now let's work on the next section which is these two feature blips so I'm going to go ahead and add all mine here and you can see we have good typographic visual hierarchy between them I decided to add an icon for more visual interest and I'm going to add the second as well right underneath it so just pay attention to the difference between these two sections if we compare the original with mine you can see there's a lot more white space and there's a lot more better defined typographic visual hierarchy between the type-based elements all right so for the next section and we have find the solution product provider with PayPal built in and this part in their design is really cluttered so I'm going to space things out a lot more with better white space and better topography so we have a headline a sub headline I'm also going to bring back this little watermark on the side just to kind of continue on with the uh the little Motif that we've created and I'm also going to use mid journey to create an isometric a little storefront where I've also added the PayPal logo on top so this basically tells a story with visual interest so find a solution provider with a PayPal built in and of course right here we're basically mimicking that in the sense of a mid-journey generated asset now we can also separate the three feature columns with a line separator which the original has these as well and then finally we have our three feature blips so we have create a square space online store with a sub headline and then also a start your free trial button and then we have another one here and notice I'm keeping these aligned at the Baseline we don't want to have start your free trial up here and then get started with Magento down there it just kind of creates for an inconsistent layout finally we have the third one and there we go so if we compare this design with the original this is what you get [Music] oh all right everybody if you want to see exactly how I refactored this design in real time along with utilizing mid-journey for the assets click the talk link here in the YouTube description to get access to this refactor along with many others I've done in the past alright everybody I'll see you all soon and goodbye