Motorola Home Screen & Widgets (2009-2010)

I was the lead UI designer on the MOTOBLUR Home Screen and most of the widgets. I worked closely with product management, the engineering teams in particular on the widget projects.

Motorola was the first Android OEM to innovate resizable widgets in 2010. This created a ton of work as each size for each orientation (landscape & portrait) and each screen size had to be separately designed, engineered, tested and tracked.

My widgets included: Weather, Status Update, Calendar, Date & Time, Social Networking, News, Radio Toggles (Airplane Mode, Bluetooth, WiFi, GPS), Sticky Notes, Tasks, World Clock, and contributed to multiple others.

Even though I left Motorola in December 2010, most of the widgets and designs were intact on an Atrix 2 in Spring 2012. Eventually, these proprietary Home Screen widgets were abandoned sometime after Google purchased Motorola.

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

Home Screen

Two Motorola widgets: User Status widget (2nd one) and a Social Networking widget (showing friends' updates; 3rd one). The user touches the status widget to update their own status on multiple social networks. The SN widget is user configurable. Resizable. (Motorola Atrix 2)

Motorola Home Screen

Time & Date Widget

The Motorola Time & Date widget. User configurable for digital or analog and came in multiple colors on some devices. This instance is sized smaller so that only the clock and current date are displayed. (Motorola Atrix 2)

Time and Date Widget

Moving a Widget

This screenshot illustrates the Widget Moving Mode. The widget delete icon is at the top in the red zone. This is the Time & Date widget sized to show both the time and month. (Motorola Atrix 2)

Moving a Widget

News Widget

A widget for the Motorola News app. User configurable to a specific stream or set of feeds. Resizable. (Motorola Atrix 2)

News Widget

Sticky Note Widget

A sticky notes widget. Available in multiple colors; contents easily shared. At this time, third party sticky notes widgets were terrible. Resizable. (Motorola Atrix 2)

Sticky Note Widget

Social Networking Widget

A Social Networking widget showing an update from a Twitter buddy (@AndroidHeadline). Touch this widget to view the Social Networking Card. User configurable to one or more contacts, one or more services, and by time frame. Resizable. (Motorola Atrix 2)

Social Networking Widget

Radio Power Toggle Widgets

One touch to turn the radio on or off. This was a highly desired feature to help users manage power consumption. When Motorola released the first iteration of these widgets in 2009, Google had not yet released a power bar widget. (Motorola Atrix 2)

Radio Power Toggle Widgets

Calendar Widget

A widget for the Motorola Calendar app. User configurable to a specific calendaring service. Resizable. (Motorola Atrix 2)

Calendar Widget

Weather Widget - 3x1 size

The Motorola Weather widget. User configurable to a user-defined list of cities anywhere in the world. Resizable. This widget is 3 cells wide by 1 cell high. (Motorola Atrix 2)

Weather Widget - 3x1

Weather Widget - 2x1 size

A smaller version of the Motorola Weather widget. Note the progressive disclosure approach to the design. The less real estate that's available, the more focused the widget becomes on the key data: temperature, city, and conditions image. (Motorola Atrix 2)

Weather Widget - 2x1

Weather Card

A Motorola Weather card using a proprietary 3D framework. Swipe to view cards for other cities in one's list. Touch a card to view more detailed information about the weather in a specific city. (Motorola Atrix 2)

Weather Card

World Clock Widget

User configurable with the user's current location and from a small set of major wold cities. (Motorola Atrix 2)

World Clock Widget

Task Widget

A widget for the Motorola Tasks app. User configurable by tag, type of task (e.g., overdue), etc. Resizable. (Motorola Atrix 2)

Task Widget

Contact Widget Study

A visual design study for the new (at that time) Contact Widget. User configurable to display the desired information. Resizable. (Spring 2010)

Contact Widget Study

Widget Designs

This set of Motorola's proprietary widget designs dates to 2009 as the company was preparing to launch its first Android device, the CLIQ/DEXT. At this time, the widgets were available in one size only, and varied slightly between portrait and landscape modes. (Fall 2009)

Widget Designs

Alternative Widget Designs

This shows a few of Motorola's proprietary widgets in several alternative states: no picture, no content to display, mid-refresh, or unconfigured. This design study dates from 2009 as the company was preparing to launch its first Android device, the CLIQ/DEXT. At this time, the widgets were available in one size only, and varied slightly between portrait and landscape modes. (Fall 2009)

Alternative Widget Designs