At the end of March we released Todoist 10, a completely renewed and refined version for iOS. This major update represents the first step toward our vision for a consistent and unified look and experience across all Todoist platforms. We’re excited about the new direction we’ve started in with Todoist 10 and wanted to share some insights into our design process.
In this post, Nuno Baldaia, our head iOS developer, and Ana Fereira, our lead app designer, give a behind-the-scenes look into the making of Todoist 10. We’ll let them take it from here…
From the start we knew that the redesign would be a huge undertaking. First and foremost, we wanted to make managing to-do lists on iOS as effortless as possible for our users. With that as our guiding principle, we set out with three main objectives:
- Streamline the experience for our current, power users
- Make it as easy and intuitive as possible for new users to get up and running with their to-do lists
- Update the app design to set the stage for the unified look and feel we’re aiming for across all platforms
The Design Details
We started off by giving the entire structure of the app a facelift. Though long-time users will still recognize Todoist’s clean and simple layout, each and every detail – fonts, colors, icons and spacing – was updated to make the app cleaner, easier to understand, and generally more approachable. Here are a few examples of small visual changes that we think will make a big difference for the user experience:
- The menu is now much cleaner and easier to use: we revised the vertical spacing of the fields, removed some icons, and simplified others, all making sure that the most important content stayed front and center.
- In the task view we broke labels into their own line, giving them more emphasis and increasing the vertical whitespace in each task. These seem like small changes, but we think they really improve the legibility of the tasks, helping users to find what they need more quickly.
- We also revised the full Add Task screen to make it easier to navigate. Now, instead of a big group of fields, we have them divided into smaller and related groups. At the same time, we added in several icons, so users can recognize similar actions across the multiple app screens.
And now for the bigger changes…
In order to take full advantage of power features on mobile and to simplify the overall experience for both new and advanced users, we made a lot of big changes. Here’s a breakdown of the thought process behind the most important new improvements and features:
Quick Add to De-clutter Your Brain
At its most fundamental, Todoist is a to-do list and adding tasks is it’s most central function. Going into the redesign process we knew we could make some big improvements here that would have a huge impact on our users’ productivity.
Todoist users can add a lot of information to their tasks – due date, labels, priority, reminders, etc. Before version 10, adding tasks was performed on a dedicated screen in which the user filled all of this extra info related to a task into separate fields. This pattern is common in many other apps, but it has some major drawbacks. It’s slow for adding several tasks at once and cumbersome for adding simple tasks that do not require extra info. When you’re adding “bananas” to your grocery list you don’t need to be bothered with all of those extras. In Todoist 10, we wanted to re-invent the add-task flow to make it faster and more flexible.
The end result was our new Quick Add – a simple and powerful mechanism to add tasks by typing all of the essential information into one line. Now, when a user taps the add task button, a small text input is shown above the keyboard, ready for new tasks. And if the user wants to add multiple tasks in a row, they just need to keep hitting return.
This new pattern speeds up the process of adding several, simple tasks tenfold. While this is extremely useful for experienced users, it’s especially welcome for new users because it doesn’t overwhelm them with all the available options to start adding tasks.
At the same time, we kept in mind the needs of our current users who take advantage of the full range of Todoist features. For those power users, we added two extra features to our new Quick Add: indent and natural language parsing.
We knew that Todoist’s flexible task hierarchies help our users get things done by breaking big projects down into manageable tasks. However, our iOS app wasn’t fully leveraging this powerful feature. With version 10, we wanted to make it easy to manage complex task hierarchies even on mobile. One way we accomplished this was by adding a little handler to the top-left of the Quick Add text input. When creating a task, users can drag the handler to change the indentation for the task being added. This way, it’s possible to organize the whole task hierarchy, breaking big tasks into smaller subtasks, right from the start.
We also knew that the ability to add extra information like priority levels, labels, and due dates is essential for the workflow of many of our power users. In order to make those features as accessible as possible, we added a powerful natural language parser that understands what the user is typing. For example, typing “Have lunch with Peter tomorrow at 13 @meetings p1” will add a task “Have lunch with Peter”, due tomorrow at 13:00, with the label @meetings and with the highest priority. This intelligent input allows users to add more complex tasks much more quickly without having to enter the full Add Task menu.
While our intelligent input is pretty darn smart, it isn’t all-knowing…yet ;) We knew that for some types of information (e.g. set the project, assign the task to a collaborator, etc), users would still need to enter the full Add Task screen so we wanted to make that more accessible too. Users can open the full Add Task menu directly from the task view by tapping and holding the add task button, or from the little icon on the right of the Quick Add input while adding inline. Finally, we provided a Save+ button to allow users to easily add multiple tasks right from the Full Add view too.
When used right, gestures can facilitate interactions that would otherwise be very complex. From the start of our redesign, we knew that gesture-based actions would play a huge role in improving the user experience of the app.
First, we wanted to make the most common actions for tasks – completing and rescheduling – as fast and intuitive as possible. To accomplish this, we implemented them as swipe gestures: swipe right to complete and swipe left to reschedule. These gestures and their associated animations have the added benefit of making managing your to-dos a lot more interesting and enjoyable than tapping buttons. :)
Next, we set about using gestures to completely reinvent the way task hierarchies work on mobile. In the previous versions users had problems reordering and indenting tasks because the app didn’t allow them to easily select a task and move it to another place. We had already improved this with the ability to indent with Quick Add, but we knew that gestures could help make managing complex hierarchies as easy – or even easier – than the drag-and-drop functionality in our web and desktop apps.
In Todoist 10 long pressing doesn’t just allows users to reorder tasks, but also indent them, so moving things around is simple and intuitive. To help make lists with multiple task levels manageable, we made sure that users’ task structure and hierarchy is never broken.
To complement this behavior we also used gestures to make it possible to add tasks in the middle of an existing list. Before version 10, if users forgot a task in their list, they had to add a task to the bottom and then drag it to the right spot. Now, a user can simply pinch apart two adjacent tasks and a new one is created in the middle. From personal experience, we know that this saves a lot of time and headaches.
So, managing your tasks in Todoist was never faster.
Sometimes users want to perform actions on multiple items at once, like moving several tasks to a new project or rescheduling a number of tasks for a new date. We knew this was lacking in the previous versions which required extra (and avoidable) steps. In Todoist 10 we fixed this problem by adding the Edit Multiple feature, in which users can select more than one task and perform actions to all at the same time.
The last feature is a little something extra that we thought was missing from previous versions. Users love to identify themselves with the software they use, so we introduced two changes. First, we updated the menu design so it shows the user’s avatar. This way it’s more likely the user uploads an avatar, which is really important for shared projects. Second, we added themes, so the user can choose the predominant color of the interface.
The level of customization we added gives the user the power to personalize their to-do lists, but maintains the Todoist 10 look and feel no matter what avatar or theme the user chooses. Judging from the response from users so far, this simple change has made a huge difference in how they experience the app, helping to make managing to-dos a bit more fun and enjoyable.
What’s in Store for the Future
We still have a lot of work ahead, and many more ideas for things to add and improve, but Todoist 10 for iOS is the first step in a series of updates that will focus on improved usability and simplification of the entire Todoist ecosystem.
If you’re interested in staying in the loop as our plans progress, be sure to subscribe to our blog. You’ll receive the most recent product news right in your inbox.