Hubspot UX Teardown

Hey guys.

Simon here, And today we're going to be taking a look at HubSpot.

So as usual with these UX teardowns, we're going to be taking a look at the sign up, the onboarding, and that first use experience.

Without further ado, let's dive in.

So we'll go up here and we'll click get started for free.

So the sign up page is startlingly different from the website itself, but not necessarily a bad thing.

there's not too much to distract us here.

We've got the option to sign back in if we go up here, top right and we're just reminded that we are creating a free account, no credit card needed and we're either going to sign up with our social account or we're going to use a, email address.

Always good to have the option of the two.

So in this case let's add our email in here.

Interestingly, it didn't let me copy and paste my email so I needed to type it in.

Let's hope I've not made a mistake again.

And we'll click Verify email.

Aha.

Uh-huh.

This obviously keen to make sure that those who do sign up for HubSpot have their own verified email address.

So it looks like that's something we'll have to do before we can go any further.

We've got a new progress bar at the top here.

so it looks like we've got quite a way to go before we get into the product.

I'll go and grab this verification code and come back.

So I find these things are double edged sword really.

Whilst you may be able to verify that the person signing up is indeed who they say they are, there's a good chance that if you force users to verify that email before they can get into the product then you may lose them at this point.

So I've just copied our verification code.

Let's hope we can paste it in here.

We can.

Awesome.

And if we didn't get an email, I like the fact that they are able to resend or we can edit the email address.

You can if we have typed that wrong.

So it's just nice for users to be able to resolve these minor issues themselves.

Okay, let's click next.

And it looks like HubSpot are encouraging users to create a secure password here because they have listed out some rules.

So this is really well laid out and easy to follow but it can be a Bit of a pain to create a password that does fulfill all of these rules.

So it looks like the password we've pulled in from 1Password meets all of their criteria.

So we'll click next.

what is your name?

Let's add this in here again.

I mean it looks like we've got quite a long way to go here before we get into the product.

Click next.

What industry are we in?

I love the fact that they're giving us an option to search.

So let's type in design and click next.

Getting there.

Founder, like, I mean the questions are pretty straightforward.

So we are, we are rattling through it.

I mean it's not necessarily the number of steps that indicates the difficulty of the onboarding experience, but more so the weight of each step.

but as you can see we are rattling through these steps pretty quickly in fairness.

Next.

How many people work at your company?

What is your company website?

Where would you like your data to be hosted?

based on your location, we recommend EU or us.

So there's two options here.

I don't know how they know that I'm based in, based in the eu.

I didn't get asked to share my location or anything.

Let's create account.

So we've got a funky little animation here which is quite nice.

Tells us what's going on, we're preparing, we're personalizing the experience.

Even if you aren't going to keep users waiting, it's nice to keep them informed about what's going on.

So which of these sound most like me?

I'm new to HubSpot, but I have used a CRM before.

And what would we like to do first, let's track the deals in one place.

What I like about this is as we are selecting each option, it's given me a few more details on the right hand side here of what I can expect.

So if I'm tracking deals, then they're going to help me customize pipelines, create deal records and map milestones as well.

So just gives me a little bit of context, which is really nice.

Okay, let's get started.

So I think given the option I selected previously, it's now asking me to create a new pipeline, which I guess is understandable.

Although I would love to skip this step and get into the product unless I click cancel down here.

Cool.

so I think I might be in.

So it's taken us to the getting started page and it looks like we have a onboarding checklist here that's based on my previous Selection.

So in order to track my track all the deals in one place, we could go through this checklist one by one.

And it's also showing me what other things I can do here so I can send marketing emails and quickly connect with leads one to one.

So this is a really nice breakdown of how the product can meet my specific needs here.

Go through the checklist, the six items left.

It's going to take roughly 15 minutes.

So that's pretty cool.

And then if there was other things we want to do, then we could also use the other checklists underneath here.

So because we didn't complete checklists as part of the onboarding, I'm not too sure how much more we can do.

Let's use the navigation at the top here to click Sales and deals and let's create our first deal.

so this looks pretty exhausting.

there are some main consistencies here within the design, the visual design and I wonder why they haven't selected the Deal name form field by default.

So every time I click Create Deal I can simply type in here without needing to select the field itself.

but at least they're clear on which of these fields are mandatory.

So it looks like in order to create a deal we need the name, we need the pipeline, and we need the deal stage as well.

And once we've completed those three things, we can see the Create button down here comes into play.

So let's click Create.

Nice.

So every time we create a deal, then we're taken to the breakdown of that specific deal where we can learn about the deal on the left hand side here and edit and change any details.

Looks like we can change these on the fly as well.

So there's no need for users to go into a separate window.

We can make the changes and we can click Save bottom left, which is nice and convenient.

Confirmation message at the top here could be a little bit more clear.

It's really easily missed.

In the middle here we've got the overview screen.

But because we've just created this deal, there's not a lot of communication or contacts, companies etc, etc like the way they're using some tooltips here.

Just to explain a little bit more about what these are, let's click in activities.

Okay, so I'm guessing this is like a timeline.

It's nice to be able to collapse all of the items or expand them all at once without needing to select each individual one.

And then we can tab across the navigation here to view the different types of communication and activities over on the right.

We've got something else here.

I'm not too sure what this is.

I mean it looks like we can dismiss it using this little icon here.

So we've got the show toolbar and hide toolbar here.

We can also reorder these items just by hovering over them and using this little grabber.

There's some shortcut links on the right here to be able to add various items.

Overall, I mean I think there's a lot going on here.

The UI is a little cluttered.

It can be a little bit overwhelming for users, especially those who haven't used CRMs before.

HubSpot is clearly a powerful CRM here, but I think the learning curve for new users is quite high.

But they do a pretty good job of supporting and guiding users through that first use experience.

So I think we'll leave it there.

If you want your own teardown, just click in the links below.