Motorola Tasks App (2010)

I was the lead UI designer for the MOTOBLUR Tasks app in late 2010. I conceived of the UI design, including IA, and worked closely with a graphic designer on the visual aspects.

The original goal of the Tasks app was to provide a modest but very functional To Do app. I also wanted the app to appeal to a wide range of users from casual to those who follow one of the big task management methodologies. The first version of the app did not support third party app sources, but the goal was to eventually fold in support for such cloud/remote services as Outlook Tasks and Remember the Milk. Note how the Tasks app UI shares many common UI patterns with two other apps I worked on, Calendar and Apps Launcher, which was definitely intentional.

These screenshots were taken on a Motorola Atrix 2 in Summer 2012. Eventually, this proprietary app experience was abandoned sometime after Google purchased Motorola. (Android)

My Role: Lead UX designer. Deliverables included concept designs and wireframes.

Main Screen with Tasks

This is the top-level dashboard screen for the Motorola Tasks app. We wanted to bubble up tasks to this screen so that the user could immediately see actionable items without having to dive into a specific section. (Motorola Atrix 2)

Main Screen with Tasks

All Tasks Screen

This is the Task List Screen which follows a common template design for all categories. At this level, we highlighted the most important data for each task item, including whether it was starred, whether there was an alarm on the due date, whether it had any tags, etc. (Motorola Atrix 2)

Task App - All Tasks Screen

Popup Category Menu

The user triggers this popup window by touching the title area at the top of the screen. The popup allows the user to easily pivot to one of the other top level categories, such as Overdue, Due Today, etc. In addition, the user can show or hide completed tasks. (Motorola Atrix 2)

Task App - Popup Category Menu

Tasks by Priority

This screen groups tasks by the user-defined priority level (High, Normal, Low). (Motorola Atrix 2)

Task App - Tasks by Priority

Tasks by Tag

The user can assign one or more "tags" to each task item. Tags allow the user to more easily organize tasks into logical groups and are fully user editable. (Motorola Atrix 2)

Task App - Tasks by Tag

Task Detail Screen

This is an example of a single task item in view mode. We exposed the three most commonly used actions in the top toolbar, with other actions available in the Menu. Even in view mode, though, the user can touch the checkbox to mark the item as done. (Motorola Atrix 2)

Task App - Task Detail Screen

Task Edit Screen

This is the default view for a new task item. We tried to minimize the number of fields shown so that a user entering a quick task or reminder wouldn't be overwhelmed with all of the "advanced" types of fields. (Motorola Atrix 2)

Task App - Task Edit Screen

Task Edit Screen - Advanced Fields

This is the Task edit form with the advanced fields. The user can tap on the "More" item to expand the advanced field list, or leave it collapsed by default for quick tasks or reminders. (Motorola Atrix 2)

Task App - Task Edit Screen, Advanced Fields

Tag Manager Screen

Users can create their own list of tags, which can be applied to any task to unite them thematically or around bigger projects. This screen is used for seeing which tags are available, adding new ones, or deleting old ones. (Motorola Atrix 2)

Task App - Tag Manager Screen

Task Sharing

We build the Tasks app to support outbound task sharing in the first version. Any task could be exported to an .ICS file and shared by email or SMS. This is a screenshot of the email sharing experience. (Motorola Atrix 2)

Task App - Task Sharing

Task Widget

The Tasks app included a Home Screen widget fully supporting Motorola's innovative widget resizing features. Notably, Motorola's widget resizing feature predated the native Android widget resizing by about two years. (Motorola Atrix 2)

Task App - Task Widget