Todoist UX Teardown

Hey Simon here with another UX teardown.

This time we're going to check out Todoist.

So Todoist is a really popular task management app where you can manage and create to do lists.

So as usual with these UX teardowns we'll sign up for the product, we'll go through the onboarding and then once we're in there we'll go through that first use experience which I'm assuming will be us creating a couple of tasks.

Alrighty, without further ado let's dive in.

So I'm just gonna go up here and click Start for free.

So they've clearly divided the page into two sections here.

So on the left we've got sign up via social or we can use our email and create a password.

And on the right hand side here we've got some social proof which I definitely think is warranted on a sign up page here.

so kudos to Todoist for that.

So they're quoting Matt here before using Todoist and then after everything is organized in one place.

Sounds awesome.

What I would say is whilst these illustrations are really nice I'd love to make this a bit more real.

I'd love to be able to see Matt instead of using these generic illustrations.

I think that would just help connect the customers to the product a little bit better.

And then over here on the left.

So we've got three options.

Sign up with Google, Facebook and Apple.

I'm always a big fan of the social signup.

I appreciate it maybe it's not for everybody due to privacy and security concerns but it does thing, it does make things much easier for users but much quicker to get into the product.

And if you did have any concerns then you can always use your email or password.

So I think that's what we'll do for now.

Then they've also got a link at the bottom here which is handy to go to the login screen if we've already signed up if for whatever reason we stumbled across this page by accident.

So let's put our email in here.

So go to email in and let's put a password in.

Okay so we've got an email address in here and our password.

Let's click sign up with email.

Cool.

Almost there.

So taken straight to the onboarding process now, doesn't look like there's too much for us to do.

we're being told this is step one of two up here.

Again, really clean and minimal.

I'm not sure how the screenshot on the right here is related to creating a profile.

I would have liked to see something maybe a little bit more relevant, maybe some text that tells me why we need to create a profile at this point, why we can't just get straight in there after signing up.

Okay, so let's put our name in here and we'll upload a image.

Cool.

So we just selected a picture from a desktop there.

Now once we've done this, wouldn't it be nice if we could see this over here in the right hand side?

Like that would be much better.

That'll be much more engaging and I think it'd just be a nice way to get users excited about the product anyway.

let's click continue.

Okay, so we've created a profile and previously we had it was step one of two.

Now, it looks like this may be step two of three.

So we also have the option to skip, which is handy.

if we don't want to, we don't want to answer these questions but I do think that's a little misleading and quite confusing.

So it tells me we've got a couple of questions to answer here and then we'll have a great start with todoist.

Maybe, maybe they're going to personalize the experience.

depending on what we choose.

That would be nice.

let's go with personal, and we'll click continue.

And we're on the third step now.

So what's your experience with productivity apps?

I'm going to go with Productivity Pro.

Right.

Let's launch todoist.

Cool.

So it looks like we're in so much like the onboarding, process and that sign up the design here is very, very minimal.

I mean that in a good way.

I mean they're definitely not overwhelming users with too much information here.

This is very clearly the to do list for today.

We've been asked to verify our email, bottom left down here.

But it's not mandatory so at least we can get into the product without going through that process, which is cool.

And we've got this toolbar at the top here.

So let's check this out.

we've got a menu that we can open and close.

So they've taken us to the today view by default.

inbox I'm guessing is the other to do items up and coming.

And then it looks like we can add some filters and labels to each of our to do list as well.

Then we got some separate projects.

Not too sure what they are at this point.

they haven't really explained that.

Let's see where home takes us.

Okay, so home is today.

And then we've also got an option to search.

Cool.

and then over here on the top right, we can upgrade our account to the Pro service.

This is, this is really well laid out.

We'll come back to that perhaps.

And then we can click on the plus, obviously to add a new task.

We can open the productivity so it looks like we can set some goals up and then we can work towards those.

Help is up here.

Inspiration.

Got some templates and keyboard shortcuts.

Okay, cool.

And then notifications and then some profile stuff as well over here.

But I mean that's it.

Your eye is immediately drawn to what it is they want you to do.

As soon as you get into the product, it is viewing and adding tasks.

So it looks like they've kindly added a task at the top here to the inbox, around getting started, which is handy.

So I think this is like essentially their version of a onboarding checklist.

but it does a really neat job.

so let's click on the task itself.

So it looks like tasks are opening in a modal window.

So at the top we're told, the origin of this task.

So this one sits in my inbox here.

I'm guessing this is a shortcut.

Yep.

So we can see next and previous tasks.

So we can go down and we can see all the personal tasks and back up again.

See the task we're on.

We've got a more menu here.

so we can copy links, duplicate, etc, etc, delete the task if we need to close the task out.

I assume we can do that by clicking outside of the model as well.

On the right we have some details around the task.

Task.

It's interesting that they hint at, pro features over here on the right as well for reminders.

This is really subtle, but a nice way of encouraging users and educating them around some of the Pro features you can get if you upgrade.

So in this case they're clearly highlighting the benefits of upgrading to Pro.

Where we can see reminders, we can set reminders and they even have some stats to back this up as well.

So, this is really encouraging.

I really like this and how they've implemented the Pro features seamlessly into the product.

We can add a description up here as well.

So you click next to description and then it opens the text box up so we can add One of those in there, looks like it doesn't autosave, so we'll click save manually.

Let's see where the Getting Started guide takes us to.

Okay, so it's taken us to the todoist help.

Cool.

So lots of information here to help us get started on getting our head around things and creating our first task.

Lots of videos.

These look great.

let's close this down and go back to the app itself.

So I just want to get a feel for how we're creating tasks.

So I'm going to close out of this and we'll create our own first task.

So we'll go up here, click on Add Task.

So it definitely feels, really responsive.

And you'll notice as soon as we've clicked that our cursor is in the task name.

So there's no need to click in a text, field or anything.

We can just start typing the name of our first task.

So I presume all we need is a name here, but let's explore what else we've got.

the description that we saw earlier, this looks like a due date.

So we can click here.

And there's a really, really smart way of displaying the calendar.

So you've got your typical months laid out, as a calendar that you can scroll through vertically.

Each of the dates themselves that have a dot underneath them already have a task or two that are due.

But what I love about this is they're giving users the option to quickly select, tomorrow, later this week, this weekend and next week.

Or you can remove the date completely and you've got the option to add, the time as well.

So, so much flexibility here.

It's really, really, intuitive, well thought out.

And I guess it needs to be because when you're creating a task, you don't want to spend too long on the due date here.

So it's really quick, it's really simple, and really well implemented.

Next, we've got the priority, so we can select, one of four options here.

And then we've also got the reminders as well, which we know is a pro feature, but again, they have integrated that into the UI and it works really well.

So we can click on here and we can upgrade to unlock reminders for this specific task.

And we just got a really quick explanation here that tells us we can set reminders for specific times or location so we'll never forget about a task again.

Let's close this one out and see what's in the More menu here.

So looks like we can add our own labels and we can add some extensions as well.

Not something I want to get to right now, but that is interesting.

And then lastly, we've got an option here to select a different project.

So they'd already set the home project up based on the onboarding that we went through and it looks like we're going to add this to the inbox by default, which I presume is where all the tasks live that haven't been assigned to a specific project.

So let's quickly add a priority, and let's put this in the home project.

So let's click add task and we're done.

So, pretty simple, really straightforward as you'd expect.

I think todoist do a really good job of easing users into the product, helping them get things set up and then gradually exposing users to pro features as well as more advanced features as they go.

So, I'm going to wrap this one up here.

If you want your own UX teardown, just click on the link below.

Cheers.