so you own a SAS company you want to increase the number of users coming to the site and this video is hopefully going to help with that we're going to be looking at HubSpot we're going to look at their website and do a UI and ux breakdown for us to figure out how they're manage to attract so many users we're going to look at the homepage some of their internal pages and even the pricing page and try and give you some actions you can take away and add into your own SAS business so let's get invo
lved so let's start with the homepage so if we look at what's going on here actually the overall site is really easy to digest the information it's very clear what we should be reading to start with you know grow better with HubSpot quite an interesting title to start with and we've obviously got a reference with a smaller title to make it clear what it is then there's a little bit of information here you'll see from a kind of contrast point of view that our eyes are very much drawn to this gett
ing a demo and we've got a little bit of padding and space all around this to make it really clear what we should be interacting with right near thep top of the page they're doing a lot of credibility building here they're referencing the number of users they've got they're referencing the number of different countries that they have so both of these are great ways to build credibility they're also referencing some of the really well-known companies of course not all of us have these so we can't
put them always in but I would always say if you have any customers even if they're just ones that are relevant to show the sort of industries that you work in we should always be featuring them you can cycle through those as well so lots of credibility building as we go now in theory one of the big questions that the user might have if they start to scroll down the pag is well what is HubSpot you know what can it actually do for me so I think it's quite clever that one of the first things you
see straight away is a nice video that can automatically explain in a little bit of simple information exactly what they're doing as we go down they're then breaking down the different kind of parts to it so you've got marketing Hub sales Hub service Hub Etc there's some basic information here that's kind of showing and showing the fact you know A visual representation that the data going in can go through all of these systems and then come out the other side and then if you are interested what
we're doing here is we are signposting the user to look at different pieces of information so do we want to signpost and push the user to look at Marketing sales Hub or service Hub as an example I think what they're doing really well here is they're just highlighting the main features of what you might be interested in as a user so actually are you after lead generation or are you after data sync further down I'm not sure so let me have a quick look at each one it's a really nice way of doing it
we're also highlighting other information here so enrich your contact component with some extra information here via clear bit um as I've mentioned a couple of my other videos if you're not quiet to the point where you are ready to buy you're going to read a lot of information on the website so your homepage should really signpost the user to these different locations so that's what we're starting to do here which works really well we've also got this blog information down here so you can learn
learn more about these different bits of information or any new features they've got if we're still on the homepage and we're still building credibility which is quite nice we're talking about the fact that you know hubspot's got 11 million visitors coming to it all the time nearly half a million people have gone through their Academy systems these are all big credibility Builders we've also got all their awards that they've won over the years so overall a really really nice homepage now there
are a couple of interesting things that I do want to draw attention to and one of the things that when we're designing we want to make sure that there's a really nice contrast between the things that we want the user to interact with which we refer to with ctas or call to actions we want these buttons to really stand out so it's very clear what we want the user to interact with now in theory the orange does do this there is a high contrast between this orange and everything else but one thing to
just reference here is we're using a lot of orange on the website already you know orange buttons here Orange Lines orange icons Orange throughout so actually one kind of point I did I was going to make was that maybe we need to introduce a new color so that it's very clear which elements we want the user to interact with and whether that is changing the button color or whether these icons should be changed so that the orange only stands out for the thing we want to interact with and by chance
I not actually realized this when I came to do the video but they have this high contrast option up here so it's clearly something that they are testing at the moment so if I click this High cont contrast in you'll see that the buttons I interact with then become blue and they actually do stand out more there's a much higher contrast overall because we still got these nice branded orange elements but it's very clear now these stand out a lot better so interesting to see that they've run this as
a separate high contrast button almost like a toggle that you can trial so it' be interesting to see if maybe that contrast on your own website just doesn't stand out enough and this is sometimes some of the worries right that we want to make the site look incredibly aesthetic and beautiful but if we're not really highlighting the thing we want the user to interact with we could be losing sales that's definitely something that we should be considering now before we skip past the main menu I want
to really focus on that as well I'm going to keep the site in this high contrast I do quite like it but you'll see here that it's very clear what we're going to on these different elements everything is sectioned out very easy to understand and again you'll see kind of copies what's further down the page on the homepage already we're clearly signed posting the user that we want to push them into one of these individual elements maybe to look at the marketing in more detail you'll also see they
do have a free system and although that is top of the page from a hierarchy point of view so it is very clear to the user there's obviously more real estate given to these options to try push the user into some of those which is quite a nice way of doing it you'll also see just from a resources point of view this obviously doesn't look quite as nice it's almost purposely done so that our attention is being drawn to some some of those software pages instead but does work really nicely the other t
hing we're really highlighting here is this is a purchasing page pricing is a purchasing page resource although not necessarily straightway A purchasing page it's definitely going to be part of the buying Journey so we're clearly highlighting these individual elements out we then grouped these right- hand items with you know getting a demo or get started over here so we've got clear options now the abouts is clearly still fairly important but it's not as important especially to the buying Journe
y as those so they've hidden these away a little bit smaller I think that's really smart of them we all just presume that the main menu should have all of our options in here and it can actually be quite overbearing so maybe think about how you're breaking down your menu as a way to increase the likelihood of them clicking and interacting with the elements that we really want them to so let's pretend we've now clicked into one of these options and I'm going to look at the marketing Hub and again
I think really little nuances they've added into the site first off I'm just going to close that all they've got right at the top of the page is these little accordion options so accordion are as you click them they open up with additional information it means a couple of things that are then Happening Here is it doesn't take up too much visual space if the user is interested in them they can click them they can read some basic key information before they go anywhere else and the other really n
ice thing is these are obviously trackable so we can see which ones the users really wanting to interact to with and clicking open so that's a really nice option and I think just giving some basic pricing information in here is genius right I don't have to go to a different page I can see some basic starting points just to know if I should I can afford it essentially before I bother to scroll down the rest of the page that's really nice again we're making it very clear by building credibility wi
th our different options and we're ruining with this video theme and even little talking head videos like this could be a really nice way just to Showcase your SAS product a little bit more detail so they've got that there if they've not inter interacted with that let's start to pull out some of the main features so did you know we have forms did you know we have live chat did you have Salesforce integration we can click into all of these to read a little bit more we then start to go a little bi
t more benefits driven so do you want to save time and resources with some basic information that really overviews it and I like the way we're separating all these individual chunks out everything is very digestible it's very clean it's very simple to read it's it's very clear what I can interact with as well we then get further down here and we again we're very clear on our this is the free option this is what's included these are what you're included from everything else as you move up and we
also have you know additional things like did you know you get your education do you know it's 247 customer support all of these additional just tick lists are in people's heads people have this like shopping list right of items that they want to make sure included in their SAS products before they buy them and there's always going to be a fairly long educational piece before they buy so we need to make sure we're ticking off all of these items as we go I also think the overall University style
is quite nice always making use of other people's logos to build credibility really highlighting out some two key things right like this was the challenge and this is how our products solve that challenge I think that's a really nice way of doing it you can also click between these and then see more information so overall really nicely done now for anyone who has used HubSpot they will know that the Hop spot pricing is not one of their strongest points right it's a little bit confusing because t
hey have so many different products so many different options so many different variables that end up getting pulled in it can be really really confusing for the user there's a couple of nice things that they are trying to reference here and I think it's worth at least even if it is a slightly longer more convoluted uh journey I think they're done a fairly good job of trying to explain this so first off clearly for them overall large businesses enterpris are more important we automatically defau
lt to this option but we can click into a smaller tab over here so that's one thing to reference and actually even some large businesses I know are probably better suited to this smaller option but it's interesting to see they're really trying to funnel people to this place to start with you'll see here as we scroll down they are highlighting some of their key information and I think this is a nice way of doing it as well where you can compare two different options and we can click on compare fu
rther down we'll come back to that in a minute as we cycle down and I've done this in other videos where we've discussed this but we're referencing the difference between the features and you can also click them open to see them all in detail it's really easy to read they put squares around everything so it's very easy to read across on one of my other videos I referenced the fact that sometimes what people do is they make them look incredibly aesthetical but then they don't include any of these
lines so it's quite hard to actually read across and figure out these different points but at least we're covering for all of those and they do have some individual tool tips on here to highlight some of these elements as well so again some of these work really really nicely the reason they'd hidden most of this information before is obviously the differences on them is quite large so I think that they would probably a good idea to start with it a little bit smaller if we are on the pricing pag
e then this is obviously going to be a far more likely page for some we can purchase from so we really do want to hammer home some of these other options so reminding them of what it can linking with reminding them of The credibility reminding of the case studies is a really nice way of doing it and if you get this far down and we've not purchased yet then maybe they have some FAQ or maybe some more detailed questions that we might need to answer you'll also see at all times they always have thi
s open so that people can interact with it and ask questions there and then so they they clearly know that's quite a key one now again not everyone can be managing that at all times but it's nice to see that we at least have that as an option for us to run with as we get down again if you get all the way to the bottom you're not quite ready to sign up at least they are giving a phone number I wouldn't necessarily have the phone number splattered everywhere because we really want just to use that
to sign up but it's nice to have that fallback as we click over into these individual options they're very clear with what you know what's best option here best option is to pay up front it says best value and then you commit annually whereas this one is just more your commit monthly obviously from their point of view they want you to commit to an entire year because then you can't go anywhere obviously for most of the people most normal people will probably want to just pay monthly and that's
completely fine at least we've got those and we can start to buy now interestingly these internal Pages we've actually got the high contrast removed so I can't change this high contrast anymore um interesting to see but yeah we've got one of those if we also then click on these compare options I can hit compare and I get some detail on here for me to run through those a little bit so we're just trying to allow the user to I guess make their own decisions right we're trying to be really clear to
say here's absolutely everything about us we're not hiding the information away which a lot of other companies might do we're being crystal clear with all of our options and letting the user decide on what's best for them educating them as much as we can on the features and what's included and then we can progress from there now we've got lots of lovely actionable items that we can take from looking at the SAS page for HubSpot there's lots of definitely learnings that we can take I really like t
he high contrast but there's a huge breakdown of different points that we can be doing are we making sure the information is digestible are we making sure there's a decent contrast between different elements are we splitting out our I guess our homepage so we're really signposting the user and getting to navigate through the site the menu should also do that we know are we making it super clear which elements are going to be useful if you do have a lot of pricing options a bit like HubSpot does
really consider the design of that page are we separating everything out and are we allowing the user to make those decisions themselves if you want to watch more of my videos you can check out one of them just here to have a look at in your own time and if you've got any ideas of sites you'd like me to do a little bit of a breakdown of please let me know in the comments below thank you so much bye
Comments