What we learned from crafting Todoist’s Material Design

Insights from Doist's CTO and Head of Design

We sat close to the front row when Matías Duarte took the stage.

“Design is essential in today’s world; it defines your experiences and your emotions” he said, as he announced Material Design.

Our enthusiasm increased as beautiful design concepts and animations were displayed on screen. The stakes were high — against an increasingly flat and minimalistic trend, Google bet on a more elaborate design vision across platforms and devices. One year later, the success is evident. That day started a new era. For Google, for Android, and certainly for Todoist.

todoist for android material design

Material Design came a long way since its inception. Android Lollipop, the largest showcase for the design system, was released. The already thorough and detailed guidelines evolved. Further concept designs and animations surfaced, both by Google and third-parties. All the while, we hovered around our whiteboard brainstorming the principles, debating ideas and crafting an ever so delightful experience.

todoist for android mock up

Material is the metaphor. Bold, graphic, intentional. Motion provides meaning.

These are the core principles of Material Design, which we carefully applied to Todoist. This extensive redesign was a long and rewarding endeavour. We love a good challenge, especially when it focuses on building marvelously consistent experiences. While the journey isn’t over, this milestone invites us to lay out what we learned from the process. I sat down with Ana Ferreira, Doist’s Head of Design, to give you a behind-the-scenes look at how we designed Todoist’s drastic Material makeover.

todoist for android screens

Takeaway #1: Research and iterate continuously

Material Design is still very new. It’s been one year since its announcement and roughly 8 months since its appearance to the general public via Android Lollipop. Throughout the year there have been multiple revisions to Google’s own design specifications, various examples that have shown the countless ways Material Design can be applied, and retakes on particular details that didn’t make sense or could have been better. For these reasons, it’s crucial to research and iterate continuously.

Ana: “Material is a brand new language with few case studies, so studying the guidelines, reading as much as we could on the subject, playing with Android Lollipop, and testing other apps, especially Google’s own early examples, was invaluable. Research is important, but it will only take you so far by itself. We made a point of applying what we were learning throughout the design process, trying out different approaches to Todoist’s specific context.

For example, we started by updating the scheduler to Material Design by adding a bright yellow as a background, but we immediately realized that contrast and legibility weren’t good enough, so we changed to a darker shade. And in the last couple of months we rethought the entire process of adding dates to tasks, moving the option to type a date to this screen, which improved the scheduler even more. Iteration is key.”

todoist for android scheduler

Takeaway #2: Inspiration, not rules

Google did a great job explaining the purpose of Material Design, laying out the foundations to build unified and consistent experiences across platforms and devices. The documentation is extremely thorough, covering a wide range of topics with utmost detail. It’s important to remember that guidelines are just that — guidelines. They point the way, but bend as needed. They serve as inspiration, not rules.

Ana: “We started by strictly applying guidelines everywhere — fonts, colors, icons, grids — but quickly realized that this 100% Material approach just wasn’t going to work for everything we wanted to accomplish. By then we started seeing the guidelines as inspiration instead of rules.

Todoist is a multi-platform application with a strong brand, so we bent the rules as needed to fit what we needed. For instance, we kept our own color palette even though it didn’t match the Material palette. We also used our own layout for the navigation menu. Google has very specific recommendations for this type of menu that we just couldn’t fit with our layout. The guidelines work great when there are no sub-elements, but our navigation has multiple hierarchical levels (like sub-projects). We just couldn’t make it work within the Material guidelines so we decreased the left margin and space before starting the text. This allowed us to have more space for each entry and made the whole menu more legible and visually appealing.

Each of the detours we’ve taken from the guidelines help ensure a stellar and consistent experience for our users.”

todoist for android themes and menu

Takeaway #3: Not just a makeover

Material Design lays a foundation to be built upon, presenting multiple opportunities to go the extra mile. A consistent, across-the-board approach must be used to achieve optimal results. There are no shortcuts and all details matter, from morphing icons between states and avoiding disruptive changes to ensuring good flow in the user’s actions and building any necessary features to accompany architectural improvements. Only then a stellar experience can surface.

Ana: “Updating the app to Material Design was also a chance re-think and improve previous interactions, and improve the overall usability of the app.

Adding tasks is one of the pivotal functions in a to-do app. With the redesign, we challenged ourselves to make the add task process more simple and powerful at the same time. Now, users don’t need to use a dedicated view to add a new task, they can quickly do it in any view using the Quick Add, which also makes it easier to add multiple tasks in a row.

But we also knew that users don’t just add simple tasks, so we went the extra mile and made the Quick Add really powerful. We added a natural language parser that understands what the user is typing, highlights dates, labels and priorities, making sure the user can do as much as possible in the same place. We also allowed the users to quickly indent tasks, creating structured list on the go.

Completing and scheduling tasks are some of the most used interactions on mobile, and we wanted to make them as fast and intuitive as possible. So we decided to implement some gestures that would facilitate these actions — swipe right to complete and swipe left to schedule. We also extended the swipe gestures on completed tasks, allowing users to not only uncomplete, but also move to history or delete them.

All of these changes were important to make sure that our Material update wasn’t just a superficial redesign.”

todoist quick add complete

Takeaway #4: Motion is crucial

Motion is one of the areas where Material Design truly shines. Besides providing moments of delight, it creates a continuous flow where elements react to the user’s touch to transform the interface. Performance is a critical aspect of animation, as a single dropped frame breaks the user’s immersion and all the advantages regarding focus and context go to waste. It’s important to incorporate motion in a considerate way.

Ana: “Our number one priority in design has always been to keep the apps intuitive. Our users should be spending as little time as possible in their to-do lists so they have more time to actually get things done. That’s why we were particularly excited about Google’s Material guidelines for motion – the way the app changes in response to a user’s interaction.

We researched this extensively and incorporated meaningful animations and transitions across the board to make the flow of the app as seamless as possible. One example is the animation when swiping left to schedule a task — the background fills the screen from the original touch point, helping the user intuitively understand what’s changing in the interface and why.  Another example is the animation when a newly added collaborator moves into place. We’ve worked together to put these seamless transitions in place to act like signposts, guiding users through each action without breaking the flow.”


Takeaway #5: Build for everyone

With over 1 billion active users, Android is the world’s most popular mobile operating system. However, only 12% of these users are running Lollipop, the version in which Material Design was brought to life. Crafting extraordinary experiences is only truly rewarding when they’re available to the majority of people. It’s critical to contemplate all significant Android versions.

Ana: “Material Design was a big step forward in the Android design language. Apps look better, they are easier to understand and use — but we couldn’t leave out 88% of our user-base.

So we created our own tools to be able to create a better experience for everyone. We added elevation to versions of Android that didn’t support it, making sure we could use the real world metaphors, and give the users hierarchical hints.

The ability to tint icons — making alpha mask icons become any color — was also just added for Lollipop, but with our new themes this feature became massively useful to us. Having the icons always in the same color would weaken the experience using themes, and having all icons in all the colors would make the app much larger. We had no good alternative, so we implemented tint support for all Android versions we support.”

Takeaway #6: Not just for phones

Material Design aims at a unified experience across platforms and device sizes. “Mobile precepts are fundamental, but touch, voice, mouse and keyboard are all first-class input methods”, the guidelines announce. It’s important to be attentive of users on different devices.

Ana: “Many Android apps are really good on phone-sized devices, but lackluster in larger phones or tablets. One of the things our users love the most about Todoist is its multi-platform accessibility. Tablets and phones come in almost every shape and size and it’s really important to us that our users have an amazing experience regardless of which device they’re on.

That’s why we invested a lot of time in designing an interface that automatically adapts to your device. With our Material update, users get an equally beautiful experience on tablets as they do on their phones.”

todoist for android tablet

Takeaway #7: Assess continuously

Feedback loops are important in all design iterations. When it comes to massive shifts such as adopting Material Design, they become fundamental. It’s imperative to periodically take a step back and reevaluate the progress. Identifying blind spots by getting outside opinions as design and development advance, both from team members and external people, is invaluable.

Ana: “While designing an app, everyone closely involved in the process may become too focused and lose critical capabilities. That’s why getting outside feedback is essential to building a great product.

Throughout the process we had internal meetings and discussions to always look for the best solutions. We did periodic internal releases so everyone in the company could test the latest version and provide feedback. But we didn’t limit ourselves to internal feedback.

In the first couple of months we reach out to Google designers for direct feedback. They ended up being an invaluable resource in the design process. They developed the guidelines, so their knowledge about Material Design is much deeper.

And just one month before the release, while attending Google IO 2015, we also had the opportunity to get an in-person review in San Francisco, which helped us polish the last details.”

todoist team at Googleplex

Our Material Design update sets the stage for a continuous improvement process for the Todoist ecosystem and our Android app in particular. It was a fantastic experience and we couldn’t wait to share what we learned with you.

We’re already working on the next iteration, so stay tuned for new updates!