Integrate To Do, Teams and Planner together to form Teams Tasks, a new native task experience in Teams.
Teams Tasks
Context
Teams is one of the fastest growing apps at Microsoft. Users collaborate in private chats and channels, where they can add tabs for the word docs or websites they’re working on to avoid switching contexts. Planner is one of the most added apps to channels, meaning that millions of customers are opening Planner exclusively through Teams. To drive an even better experience, Planner and To Do were asked to collaborate on a native task experience in Teams.
Structure
Design, PM and Engineering from To Do, Planner and Teams developed the MVP experience over the course of seven months. Our three apps worked through experience, branding and feature differences to ship one unified app in Teams. I represented Planner as a designer.
Parallel problem: Too many task apps
With the proliferation of tools people use on a daily basis, there’s an equal number of places that they need to visit to triage, manage and complete their tasks. Customers are feeling overwhelmed trying to keep track of everything. Switching contexts is disruptive, and its tough to prioritize tasks coming from many different places.
“It’s hard to keep track of everything I need to do, and I don’t know what to work on first.” –Microsoft Customers
Key personas and main workflows
Teams Tasks Strategy
One place for everything
Customers want a single place to manage their workloads. It shouldn’t feel like more work to track down tasks between To Do, Planner, docs, emails, messages etc. As a collaboration hub, Teams Tasks should be the one-stop-shop for all tasks.
Native look and feel
As a native Teams app, Tasks has to look the part. Planner needed to be reskinned to remove its own branding and match Teams design patterns.
Single system across Microsoft
To Do and Planner still exist outside of Teams, as do other task endpoints like tasks in Word documents. Customers need to understand that a task created in that document is the same task that flows into Teams Tasks.
Transforming Planner into a coherent task engine
Teams Tasks brings together To Do, Planner and Teams, three different task brands that millions of customers already use. We had to reconcile these three design styles so that tasks looked consistent between them. Teams tasks uses components directly from Planner, so I updated Planner to support the universal styles we agreed on.
1. Establish task identity
A title is the one required component for every task. It’s important for it to be recognizable and consistent across apps. Every task title consists of a circle checkmark in front of the title, and the accent color can change according to the app. The universal completion treatment is a grey, strike-out title.
2. Reconcile and update UI patterns
3. Add core fields
4. Collaborating on new views: List
Teams Tasks needed a list view to match To Do and support bulk edit workflows. Teams already had a simple list view control, but the Planner team had a the new grid view with task-specific features we’d just built for Project Web. We decided to ship with the Teams list because it was faster, with the plan to upgrade to the grid and provide customers more complex functionality over time. With this in mind, we configured the list to look as consistent with the grid as possible.
Anatomy of Teams Tasks app
Customer Reactions to Teams Tasks
🤝 Excited about a single app
Bringing To Do and Planner together simplified the Office task experience for customers. People liked having a single place to check for all of their individual and shared tasks.
💜 Glad that Teams is the host
Customers love teams. Adding value to the app they already use made them feel like their tools were getting more powerful, instead of having to balance yet another new context.
🚅 Focused on performance
Customers noticed when things took a bit too long to load. Planner, To Do and Teams all working together in the background meant that some of those seams showed through, and closing those gaps is one of the main goals going forward.