Trello UX Teardown

Hey guys, Simon here with another UX teardown and this time we're taking a look at Trello.

So as with the other videos, we'll take a look at the sign up, the onboarding process and we'll also take a look at that first use experience.

So I imagine once we've gone through that we'll get into the product, we'll maybe create a board, add a task or two.

Right.

Without further ado, let's dive in.

So I'm going to click up here where it says get Trello for free.

And it looks like we're taken straight to a sign up page here and we're then able to either send them email or we can use a social account.

Looks like they've also got an option to use Slack as well which is interesting.

So I think the design of this page works pretty well.

not meant too many distractions here, although there are some illustrations at the bottom which I think in this case just give the page a little bit of personality here.

And they also allude to what's going on in the product as well.

So you can see there's a Kanban board.

Let's put our email address in and we'll sign up for the product.

Okay, so we're now taken to the first step in the process here.

But you can see the design is very different from the website.

We've got some illustrations over here on the right again alluding to the product and then we've got a quick welcome message over here on the left hand side.

I'll just quickly explain here about organizing our projects and I think this is our first introduction to building our first board.

So let's do that now.

Okay, the next step in the process here is to create a board name.

This is where we'll add our cards, our lists, our due dates, etc.

Etc.

So we'll just add a board name in here.

So you can see as I type the name of the board here on the left, the name of the board in the illustration has updated as well.

So I think that's a really nice touch.

Okay, let's click next and it looks like now we've got to figure out how we're going to organize the board with various lists and we've got a really brief explanation of what lists are here and we've got some examples on the right so we can have a to do a doing and a done.

So I think it's fairly standard.

I like this approach but I like the fact they're giving us examples as well.

Right.

So if you're going to get stuck at this stage, you can always just revert to the examples.

And you can see here in the placeholder they've also added the same list names as well.

So we'll just use those for the purpose of this teardown.

So we've got a to do list, we've got a doing and we've got a done.

So again, as we're entering in the names of our list, the illustration on the right is updating and we can now start to see how things are coming together.

We've got the name, we've got the Kanban board and we've got our lists in here as well.

So this just works really well I think.

it helps manage users expectations as well.

Right.

I'm not in the product yet but I know what to expect when I get there.

So let's hit next, see what the next step of the process is.

So it looks like we need to add some cards.

Trello describes cards as the building blocks here for our project and they tell us we'll be able to organize these and share them with teammates and add due dates for each of the different cards as well.

So again we've got some placeholders here so I'm just going to use these for the purpose of this demo.

So we've got some project planning in here and we'll kick off the meeting.

It doesn't look like it gives us an option to add any more than two.

then that would have been quite nice but I guess at this stage you don't want to overwhelm users with creating too many cards.

We can always do that when we get into the product.

Anyway.

One thing that did strike me was I don't know whether I need to fill in two cards here.

if we just remove one of these and then we'll have one card.

Let's see if we can click next.

We can.

Okay, cool.

So I'm guessing we're almost there now.

if we did make a mistake, we've also got this back button top left here so we can go back to the previous step in the process.

So now Trello wants us to add our teammates.

I always appreciate that Trello is a project management tool and there is a significant value, and benefit to adding your colleagues or your clients to these boards.

But from my perspective, if I haven't used Trello before then I want to get into the product.

I want to explore a little bit more before I take that step.

I feel like this is a little premature at this stage and I'm guessing the majority of people just skip this step, and get straight into the product, get comfortable with it and then when they know everything is set up, then they can start adding their teammates, their colleagues and their clients.

So let's see if we can just click, one last thing here and ignore this step in the process.

Okay, so it looks like now Trello is trying to push their premium plan again.

I don't feel like this is appropriate at this stage of the process.

Yes, we've created a board, we've added some cards, we are getting familiar with the product, but, this again feels quite premature.

they do seem to be pushing this hard though, into the table on the right, comparing the free plan with the premium plan.

But I think most people at this stage are going to skip this step, get into the product, figure out if it's right for them, and if it is, then they're going to upgrade to the premium plan.

so that's what I'm going to do here.

I'm just going to skip this.

so it looks like Trello has dropped us straight into the board that we've just created as part of the onboarding experience.

I think this works really well.

much better than, dropping users into a home screen or a dashboard of some sort of, and letting them figure things out themselves.

I don't know where it's adopted the color for the board itself from.

that definitely wasn't something as part of the onboarding process, although it may have been nice, just to allow users to personalize that a little bit more.

So you can see we have our to dos and we have the cards that we created.

We've got our doing and our done list as well.

So let's have a little explore around here, see what we've got and figure a few things out.

So we have an icon, top left here, which I assume will show us different products from Atlassian.

Looks like we may need to verify our account before we can explore.

That seems a little harsh.

We do have the message up here, that asks us to confirm our email address within the next 14 days.

It has let us into the product and I assume we can explore it without confirming our email immediately.

At the very top here we've got workspaces, not too sure what they are.

We've Got recent.

So I'm guessing this is a shortcut to our recent boards.

super handy, really convenient for users.

Starred, I assume is going to be our favorite boards.

You'll notice as I'm clicking through these menus, even though we don't have any recent or any starred boards, Trello is doing a really good job here of telling us what this means, educating us as we're going through this first user experience.

So start important boards to access them quickly and easily.

And then fourth on the list here is clicks.

Again.

these are really useful.

We See Dozens of SaaS products use templates as a way to get new users up and running really quickly.

And it looks like they've got a really nice collection here of different templates for different use cases.

and they've also got hundreds of different templates from the Trello community as well.

So I think that's a really nice way for new users to get started, without starting from scratch.

And then we've also got the create button here which I assume is going to create a new board.

Yes, or we can get started with a template as we've just discussed, or we can create a new workspace as well.

Again, I think it's really nice that Trello just don't assume that we understand what these things are.

They're clearly going out their way to explain them, which I think is crucial for any new user.

Over here on the top right, looks like we've got a search which expands when we click into it and we can also see some of the recent results and we have an option to do some kind of advanced search as well.

So that will be really useful if you want to search within a specific board.

So maybe you're looking for a specific card.

I assume it would be able to resurface.

that next to that, looks like we've got some notifications, got some information, probably around help so we can get up and running much quicker with Trello Playbooks next to that we can change the theme.

And then we've got our profile and our account stuff top right which is fairly standard.

Nothing too hectic going on here.

So over here on the left, we know what workspace we're in.

we have the boards in that workspace.

We can add some team members.

we've got some settings here as well.

looks like we can also change the view from the table to the calendar.

And then these are a list of our boards down here on the left hand side.

So I think this menu is really well thought out here.

and there's plenty of scope to introduce new boards and new workspace views in future.

An option here in the bottom left we have an option to upgrade to Premium, which we've seen as part of our onboarding process.

And then we've got the board itself, so the name of the board, the option here to start board, change the workspace, visibility.

we can also change the different views which we can see on the left as well.

And then we have the lists themselves which we created as part of the onboarding process.

Looks like we've got a few other options over here on the right.

So we've got some power ups.

so these can bring additional features to the boards themselves.

I assume these are limited or paid as part of the free plan.

And then we've got automations, which again is something looks like we can't do until we verify our email address.

And we can do some fairly advanced filtering as well.

which is great when we've got a lot going on in the board itself we can see who's part of the board and then we can share the board with a teammate or a colleague.

And there's various other options that sit in here as well.

So you can see we can change the background color, custom fields, add some stickers, etc.

Etc.

So all very straightforward.

a couple of notes on the UI itself.

What I would say is it feels like it lacks polish.

All of the components themselves feel like they're quite close together, so it feels quite cluttered and it seems like there's a lack of continuity between the website and the design of the product itself.

Again that might come back to the fact that maybe a couple of different teams have worked on this, but that doesn't feel like there's a cohesive design language.

Let's quickly click into one of these cards and we'll see what we can find in here.

So in order to do this we'll click on Project Planning.

Okay so we've got the title at the top and we've got the option to watch.

So it looks like we can customize the notifications we get on an individual card, which is super helpful.

we can watch what's important to us and then we can add a description as well and we can see the activity feed.

So who was posted what when, etcetera, etcetera.

On the right hand side here we have an option to customize the card itself.

So we can add various members, we can add some labels, introduce a checklist, add some dates, attachment, change the buffer, add some custom fields, etc.

Etc.

Like, all of these feel like secondary options.

The things you need to add to your card and certainly the actions themselves.

I feel like these would distract users from the activity that's going on, albeit it is quite convenient to have them on the right hand side.

But I think there's got to be a better way of presenting some of these options here.

There's also a lot for users to take in, especially new users.

I'd also like to be able to maybe minimize one of these cards or at least go full screen.

Certainly when I'm looking at attachments and things, I think that would be really useful.

but they've obviously limited it to this modal window here.

so let's close this down and I think that'll do.

That is Trill in a nutshell.

If you want your own UX Terran, then just click the link below.

Cheers.