Refactoring UI: WP Pusher Checkout Page

0:00hey guys for this edition of refactoring UI we're going to be taking a look at a design submitted by our new friend from denmark peter zoom it's a tool called WP pusher and it's basically a tool that lets you deploy wordpress plug-ins and themes directly from sites like github bitbucket or git lab instead of copying files from an ftp it's pretty cool and the page are gonna be refactoring is this checkout page at first glance this page may seem like a pretty simple design with not a lot to improve on but we think there's a lot of quick wins in this that could improve both the

0:28hierarchy in the overall emotional experience so I went ahead and made a pixel perfect version of the current design in sketch so we can go through the changes step by step so let's get started so the first thing we're gonna do is add labels outside of the input right now each input use using placeholder text for the labels and although this may clean things up a bit it can be a little confusing all modern forms like this when users are quickly tapping through the form placeholder text labels might work on something smaller like a sign-in form with just like a username and password field but for longer forms it's always a good idea

1:00to have labels outside of the input that makes things a bit clearer and now that we've removed the labels from the inputs it allows us to use example placeholder text within the input as seen here so the form is still looking a little bit crammed now one way to make forms look a little more digestible is to divide it into multiple sections so with this form we can divide it into three sections first would be the plans then we have some basic user information like their name and email and finally we have the payment information which already has a label on it so we're gonna divide this

1:35by using liberal spacing and we're gonna use a very light two pixel border between each section and this just gives the entire form a little more room to breathe and since we already have a label for the payment information we're just gonna go ahead and add labels to the other sections and now that we have comfortable spacing in just a clear hierarchy being made with all the labels in all the sections some of these additional borders are no longer necessary so we're gonna go ahead and remove those just to tighten things up in now one thing I like to do to make input stand out a bit more on a white background is

2:09to make them off white or gray this is nice because it eliminates the need for borders that make the form look sort of busy it's just a nice clean treatment and it also helps the input stand out much more while they still manage to look clickable and because we made the background color gray now we're going to make the placeholder text a bit darker just so it's a bit more legible okay moving on we're gonna reduce the size of this email and put as it's a little longer than it needs to be you should use input lengths as an affordance you want to create an expectation of how

2:39many characters should go into the field before the user starts typing we're also going to tighten up this checkout form right now it's using stripe integration to collect credit card information and if you check out these stripe elements examples page they have examples where you can use a single input to collect all the credit card information this cleans things up a bit and simplifies the form a little bit more so we're gonna apply that to the design as well [Music] now we're just gonna move down to this support alert that you can see below the button right now it stands out a little too much it's almost interfering with

3:15the purchase button itself so we want to DM ffice eyes that a bit and we're gonna do that by removing the light blue background and making the text a darker gray and just to balance things that we're gonna Center the text below the button so it's aligned with the button text and just to give it a little more visual interest we're going to add an icon to the left of the text this icon comes from my aura cons UI set that you can get for free on my website at Steve sugar calm and we're just gonna add some colors the icon by sampling the blue from the WP pusher website okay now to

3:52get to this page you need to come from the marketing site by selecting a plan on the pricing section but once you get here you get completely removed from the rest of the site as there's no longer any navigation so if you come to this page through a sales channel I got promotional link you don't have any context so instead of just having the logo at the top of the form we're going to add the navigation bar to the top of the UI [Music] okay so we've made a lot of changes and it's already looking much cleaner and organized but it's still looking a little bit uninspiring so we're gonna

4:29see what we can do to make it a little bit more interesting so one site I like to check out is pages XYZ this is a gallery of well-designed websites organized by pricing pages app pages store pages product pages and check-out pages and when I went to the checkout pages section one of the first examples I saw was this example by an app called Wingo where they have this sidebar to showcase all of the plans details although they don't use this design on their current checkout page it's enough to inspire me to bring it back to the design we're working on so what we're gonna do is add our own sidebar but in

5:05this case we're gonna add it on the rights of the focus of the pages and entirely taking away from the form and we're just gonna make it blue sort of lines with the home pages primary color and this is going to house all the plan details that can be seen on the pricing section as it's always nice to be able to review your full plan when going through the checkout process which is something the current design doesn't really offer and this sidebar really puts a nice emphasis on [Music] we're also going to add a section that allows users to switch their plan this will allow us to remove the plan section

5:37on the Left containing the selection drop-down all together making the form a little shorter in a bit easier to digest [Music] okay now I put the information on here with very little thought and with no attempt at creating a hierarchy so we're gonna tidy this up a bit and we're gonna start with the price we want to structure this so the value can be taken in at a glance the currency and billing cycle are important but we don't want them competing with the value which is going to grab the users attention not only is this treatment attention-grabbing but visually it's just a bit more interesting we're also

6:13going to italicize the renewal information to give it a subtle emphasis as well as bold the values as they're the main differentiator between the plans and instead of making these plan details just a simple bulleted list we're going to give it some generic icons just to give make it a bit more interesting I'm gonna use a check mark but something generic like an arrow would also work with this and finally we're going to make this link actually look like a link so we're going to bold it and underline it but I'm going to make the underline a little more stylized than the standard text decoration you can achieve this look in

6:50CSS by giving a thicker bottom border with a negative margin okay now earlier when I was skimming through some of the examples on pages X Y Z I also saw this example from envision with a testimonial look on the checkout and I thought this was nice as it provides a little more reassurance to the user that they're making the right choice so what we're gonna do is grab one of the quotes found on the home page and add it to the check out and we're just gonna style it by making it a bit larger than the normal body text and italicizing now there's just something about containing profile

7:25pictures in a circle that just makes it look good and if you're working with images that clash with the rest of the design a great way to make them blend in and look a little bit more cohesive is to desaturate them another thing that caught my eye when browsing pages de XYZ is the numbers seen on this treehouse example it's just a nice way to make these titles look a little bit more interesting and bring a sense of order to the design and I'm also going to bold these titles so they're a little more balanced and just a little more prominent on the page so we've already

7:59added a lot of extra vertical spacing giving the form much more room to breathe but we did it without touching the horizontal spacing resulting in the left and right padding looking overly narrow so we're going to increase that making it a bit larger than the top and bottom padding of these sections another thing we should take a closer look at is the contrast ratios when I made the blue sidebar earlier I simply sampled a blue used on the website with coke considering the contrast ratios when used with white text now this is a nifty little menu bar app I like to use made by Mattie Smith and Sam sauce that

8:33allows you to quickly check contrast ratios and it appears that this does not be the requirements for small text so we're gonna make this blue just a bit darker [Music] and while we're at this we're going to double check back green and it looks like it fails completely so we're going to make this a bit darker and we're going to change the hue so it's a bit bluer so it blends in a bit with the brand colour and while we're on the subject of colour one thing I like to do when working with cool colours like this is to saturate my grays with a bit of blue just to make

9:11the page feel a little more glued together and in this case what we're gonna do is take the brand q and just saturate the current graze with it so on an HSB color picker the saturation intensity might look something like this so as the grays get darker I'm going to increase the intensity of the saturation and what this does is sort of changes the temperature of the whole page making it a bit cooler now I like that this design is contained in this card design to help to pop off the page a bit but I just want to give it a little more depth so instead of surrounding it with a

9:44border we're going to introduce a box shadow now I've always admired stripes design and I especially like the way they use box shadows there's just something about them that feels natural and if you take a closer look at how they achieve this you'll see that they have two layered shadows one that's a bit saturated with a larger blur and a dark one that's shorter so we're going to give this design a similar treatment and finally we're going to update the typeface right now the design is using a phone called railway which is great font but since the logo is using Gotham by Hoefler fonts I thought it would be

10:19appropriate to use it everywhere else as it's a much more premium typeface now typefaces aren't necessarily transferrable meaning you may need to adjust the size and weights depending on the phone for switching do okay so that pretty much wraps everything up so let's just compare our new design with the one we started with if you want to check out this design in sketch I've included a link to download the sketch files in the description you can also check out the product WP pusher at WP pusher com and if you enjoy this video and want to receive updates when more content like this is published be sure to sign up at

11:03refactoring UI calm [Music]