The new version of Todoist has been selected as the Best app on Android Wear 2022! ✨🏆

⌚️

Todoist on Android Wear OS is redesigned from the ground up with improved menu navigation, more powerful Quick-add, tidier-looking task lists, a cleaner task view, productivity complications and much more. 


Jump into our case study to discover the new design and stick around for some behind the scenes insight into our Wear OS (re)design process.

Fast menu navigation

The new menu offers fast access to Quick add by pressing the “Add task” button at the top of the menu. Easily browse your favorite projects next to Todoist’s default views.

Powerful quick-add

Quickly add tasks to any project whilst your on the go. Quick add on Wear OS now lets you easily add task name, description, due date and more through speech recognition or touch typing.

Organized task lists

The task list now displays sections and adds a more comfortable task cell layout for better legibility and interaction. Tap the checkbox to complete a task or tap the task name to view the full task view.

Elegant task view

The redesigned task view layout displays task description along with labels, sub-tasks, due dates and other powerful features you love from Todoist.

Productivity complications

Stay up to date with your progress with the latest productivity complications on your watch face. Get things done and achieve your goal!

Doist’s Wear OS design tips

Here are some behind the scenes takeaways that our design team found useful while designing for Wear OS.

• Study the existing app

  Identify your customer’s current pain points. What do your customers love about your product on other devices? Translate those opportunities into core features on Wear OS. E.g: For Todoist adding and completing tasks was crucial to the core experience but the interactions needed to be short and straight forward for the wearable format. 

• Study the Wear OS guidelines and design resources

  Google offers great guidelines, case studies and resources to consider while designing. Check out the latest documentation and put as much into practice as it applies to your app. E.g: The Tile Design Kit and Material Design Kit provided the fundamental building blocks for the Todoist design file and system.

• Design for circular displays first

  A lot of Wear OS devices come with a circular display. Layout and content structure can be quite different for this visual form factor. Test the design in circular format and consider where content is most visible and easiest to interact with. E.g: We set the frame roundness to circular in our design mockups to understand the watch format while creating the design mockups.

• Create core design components

  Identify which components are crucial to your experience and which ones can be native to the platform. Create a consistent design system that works well across your Wear OS app. E.g: Todoist used specific section headers, list items, checkboxes and reused our existing Android icon set to create a coherent and consistent experience across mobile and wear experiences.

• Prototype navigation and scroll behavior

  Android Wear can use crown, bezel and touch for scrolling. Be aware of these different input types and how your content can be manipulated through each method. Consider circular displays and be mindful where your content lands within that format. E.g: The top and bottom edges of the round device cut off content earlier and are harder to interact with. The ideal safe area to interact with content is in the center of the device. Try to place crucial information in the middle of the screen by adding extra top and bottom view padding.

• Work closely with your development team

  Study the constraints and opportunities with the development team and define how your design solution impacts the implementation process. Make the development team a part of the design phase so you can find the ideal solution together. E.g: The Doist Android team had early access to our design mockups and shared their feedback during the design process, so we could make adjustments early and often. 

• Test the implementation on device

  Review your design implementation during the development process. Try to get access to a Wear OS test device, simulator or ask your development team to share video recordings of the implementation. Frequent feedback can help identify design pain-points early and find solutions together. E.g: During the Todoist implementation we tweaked a number of font sizes, spacing and colors that appeared differently on the device. We also tweaked interactions for quick-add to make the flow feel more seamless and integrated.

Download Todoist on Android Wear. In collaboration with the Doist team.

______

What's Todoist? Todoist is a productivity task manager that keeps all your to-dos organized, prioritized, and actionable. Learn more about how Todoist can help you stress less and do more at todoist.com.