Basecamp UX Teardown

Hey, Simon here with another UX teardown.

And this time we're going to check out Basecamp.

So we'll take a look at their signup, their onboarding, that first use experience, and maybe we can create a project or two as well.

Let's see how we go.

Okay, so I'm going to sign up here.

Clicking, on this link up here.

And we're just going to sign up for the standard plan.

We're going to try it for free.

So the first thing I like about this is, UI has changed completely.

It feels like the start of something and there's just zero distractions here.

Secondly, they're obviously reminding us that this is a free trial.

they don't need a credit card, which is awesome.

And another really cool quick win here is they've already selected the first form field that I need to fill in in order to continue with the process.

So all I need to do is type in my name, email and my organization's name and then we can get to the next step.

I also like the fact that we've got, Quick Link here to support, so if we've got any questions, we can just reach out to them directly.

Let's fill our details in here.

we'll go through this process as quickly as we can.

See if we can get into the product email in there.

Cool.

That looks about right.

now they're asking me to create a password.

The last step in the process.

Nice.

So it looks like they've got some password rules on here.

at least 12 characters seems kind of excessive to me, but at least, there is only one password rule here.

So let's put a password in.

Hopefully that one will get accepted.

Let's create our new account.

Cool.

Okay, so it looks like I'm just going to wait a moment.

this is interesting.

Like, just teasing us with the product and boom, just like that, we are in.

so it looks like we're greeted with a note from Jason, the CEO here, which is a nice touch.

you don't see this very often, but I think it's, a really nice way of just putting users at ease.

And if we ever need to contact him, we've got his personal email address as well.

So let's, see my account click off this.

So I love the fact that we're in the product already.

Like that.

Signup process is fairly straightforward.

Minimal onboarding here, and we're in the product, we can start experiencing what it's like to use Basecamp without Needing to go through a 10, 15 minute onboarding process.

The first thing that strikes you, about the UI here is it's very clean, it's very minimal.

There are very few distractions here.

I'm guessing, we're in dark mode here, which has just been pulled through from one of my settings in, my Mac.

But it's super simple.

So we got some, sample projects at the top here.

We've got our schedule with a calendar on the left and then things that we have been assigned on the right.

I think it's a nice way of just easing users into the product.

And the other thing just catching, my eye up here is this tooltip.

So it looks like, we've got a message from basecamp and we'll get that message.

So we'll do that.

So it looks like we got a message from Ashley here, from the basecamp team.

let's open it up.

Cool.

So it's just fairly standard, welcome email here and it looks like we've got a welcome video if you want to view that as well.

But I'd rather explore the product.

So let's have a little look, see what else we've got going on here.

We'll click out of this one.

okay.

Maybe we'll go back to the home.

Cool.

Let's just explore these sample projects up here then.

I think having some sample templates in this case to help users experience the value of the product sooner rather than later, is a huge win.

So let's click in customer support.

Okay.

So you start to get a feel for how this works.

And they've just got these tool tips at the bottom here just to help guide us through this process.

So this is a sample project.

this is what the team would use to get aligned on things.

And it's just encouraging us to look around and explore.

So we'll close that down.

This is interesting because if I do get stuck, I'm assuming we can just pull this back in, which is cool.

So we got like the title of the project at the top.

Description.

We can see who's in here.

we can't hover over and see the names or anything.

We can can set up people.

we've got a message board.

Looks like we've got some unread messages here as well.

We've got some to do's, some documents and files.

We've got a campfire going on and a schedule.

So I think in order to do anything, we need to go into, each of these cards.

I am curious to know why they didn't make better use of this space.

So there's a lot of white space down here.

And when you're looking at, like, the TO DOS and the schedule, where there's lots of small details in here, you could have pulled these out a little bit more.

If you just made better use of this space, you could expand the size of these cards and then we'd be able to see a little bit more about what's going on.

It'll be cool if these were a little bit more interactive as well.

Right, so clearly our TO dos, we've got Melissa's tasks and we've got, tasks that still need to be scheduled.

But.

But I can't scroll inside this card.

I can't scroll down and see what else is in there.

It's not live, as it were.

So we click in one of the TO dos.

Now we can see the full to do list here.

I really like these, bubbles that are persistent down here.

It's just a really nice way of helping users understand what's going on without it being too intrusive.

The other thing that strikes me here is it seems like Basecamp have avoided using a conventional breadcrumb and instead they are letting users know where they are within the product, by overlaying these tiles on top of the previous page.

So we're obviously introduced here.

We started in the customer support project, which we can see in the background here in this tile.

I think that's a, I think that's a really intuitive way, of letting users know where they are in the product.

Then we've got our call to action up here to add a new item to the list.

And it looks like we've completed four of 14 of the to DOS.

So, yeah, that looks about right.

And then we've got different options to view the TO DOS as a list or as a card.

Cool.

let's see what's hidden behind this More menu here, so we can bookmark these.

set up hill chart.

Not too sure what that is.

So the TO DOS themselves, they're just a single list, but I think the team have clearly spent a lot of time on the design details here.

So we got our links or, maybe headers at the top here so we can click on Melissa's tasks and it looks like the team can then have a conversation on these tasks as well.

And then we got that more conventional breadcrumb that comes into play up here.

So we can see we're in customer support we're in TO DOS and Melissa's tasks.

So I was wondering how they'd manage pages that sit inside of the pages.

But there's our answer.

Let's go back to the list of TO DOS themselves then.

So this is really intuitive.

we use the icon on the left here to be able to drag and drop.

So we can rearrange the TO dos.

Looks like we can click on the date and we can change the date from our list here.

We can save the changes that's been updated.

We can click on somebody.

If we need to assign it to somebody else, we can save those changes.

We have the option to add new todos underneath.

Also looks like TO DOS have notifications as well.

So we click on those.

It looks like this is just a list of comments that I might have missed on this specific to do.

Anyway, let's click back on our sample project here, Customer support and we'll explore a few of the other areas of the product.

I definitely feel like they're trying to cram a lot of information inside each of these cards.

I feel like they'd be better, much better off if they just give us an overview.

Some of this information can be quite difficult to read at this point size and it's really easily missed as well.

Let's click into message board again if we need a little bit more help on this, I'm sure we can click down here and see what the message board is all about.

This is where we make announcements and we can post updates and have a discussion on specific topics.

Let's click into one of these messages then.

Looks like we've got five unread on the thank you cards.

So I think as you begin to explore the product you realize it has a very similar look and feel to it.

So we've just got a message about thank you cards here and then we've got some comments from the rest of the team and then we can also subscribe to it if we want to get updates on this particular message.

Pretty straightforward I think.

Let's go back to support again and this time we'll take a look at documents and files.

Take a look the current schedule.

Okay, so it looks like we've got some kind of embed in this one.

So we can view that full screen, we can download the file, we can replace it with a new version.

So fairly straightforward stuff as you'd expect.

Right.

Let's go back.

Customer support.

I think we've got a couple of other areas to Check out here.

Let's look at the campfire and the schedule, and then we'll wrap things up.

So, the campfire.

So I'm guessing this is probably like a group chat for everybody who's in this, example project.

So this is just typical of what you see on lots of other chat platforms.

Got an option here to notify me when people chat, so I'm guessing that's off by default, which means I'm not going to be bombarded with notifications from people who are having discussions in here.

Looks like users have also got the option to reply in line.

copy a link to a specific comment, add a reaction, delete, or don't forget.

So maybe that adds it to some kind of reminders.

Let's just add a quick comment in here.

There we go.

Cool.

All right, let's go back and we'll check out the schedule.

So is this my schedule or the team schedule?

Let's go down here, see if we get some help.

Okay.

So it looks like this is going to track events on everybody's calendar from Google and Outlook or Apple Calendar.

So those who've got them connected, we can see what's going on at all times.

This is a really nice feature.

So we look at the calendar at the top here.

We can see the indicators underneath each date, which I'm assuming allude to the number of different events going on.

Either way, it's a really neat idea and the design is pretty cool as well.

So we create a new event by clicking up here on the left.

We know the primary action is always up here because it's persistent on every page.

And then we've got a quick shortcut here to, add the schedule to my calendar.

And then as we click through on different dates, we can see the events going on.

So I think the layout works, quite well here.

When you click on an individual date, you get to see the event that's going on on that date at the top.

And then beneath that, these are the events looking forward.

But that isn't very clear to me at a glance.

So I just think there needs to be some distinction, between the date you've selected and the events that are going on that date, and then the other events that are happening in future beyond the date that you've selected.

Cool.

So I think we'll wrap things up there, then.

we've explored all of the different areas of each of our sample project here.

So we've had a really quick tour of some of the core features within, Basecamp try, to figure things out as we go.

But overall, I do think Basecamp, do a pretty awesome job of getting users into the product really quickly, then starting to get users familiar with the product using the templates.

Because we didn't have to create a project ourselves.

I think that type of value is so crucial, as part of that first use experience.

But we'll wrap things up there then.

if you want a UX teardown of your product, just click on the link below.

Cheers.