Motorola Connect

Connect all the things

We make a lot of accessories at Motorola – many of their physical interactions are different, but I felt that there needed to be a common thread of functionality between all of the devices. After my stint at CalTech as a group mentor for the Make with Moto project, I came away with a new love for accessories and how they interact and connect with smart devices. So as the experience owner of Connect, I carefully designed an end-to-end solution – from flows to implementation, to cater to the needs of users and their accessories.

Check it out:

Role

Lead Design, Interaction (UX Owner)

Project Included

Android, iOS, Hardware, Chrome Extension

Design

Interaction

Strategy

Experience Maps

Experience maps are where it’s at! With so many
accessories, this was a crucial step towards success!
Every accessory has its own experience map.

Quotes From Google Play

Our customers had a lot of really nice things to say about our app!

“

My phone's lover, keeps getting better When you're on the computer with a full keyboard, why would you still use a phone keyboard to send texts? Well, maybe you love swype input... But Motorola provides the intuitive ability to use the full keyboard to reply to texts. Now with even more integration. It's like your computer is the lover who keeps track of battery pack's location, dresses moto360, notifies you of any calls, and types your messages it's a keeper
User 1

“

If this app is wrong I don't want to be right Could this all the world's problems? Potentially but either way it rocks the house
User 2

“

Awesome Moto please Keep developing these kind apps that helps to our daily life easier
User 3

“

Love this app with my 360!!
User 4

Design Elements

Location

The average person misplaces up to nine items a day, and one-third of respondents in a poll said they spend an average of 15 minutes each day searching for items—cellphones, keys and paperwork top the list, according to an online survey of 3,000 people published in 2012 by a British insurance company. *

Unfortunately, losing your stuff happens, but thankfully, with Connect, I designed a map view that can give directions to the lost object. I also designed a feature that allows users to press a button that pings the missing device. Once the signal is received by the companion device, it makes a sound, alerting the user . The companion devices also do the reverse – by pressing a button on the Power Pack, your phone will sound an alarm.

Source

Battery Life

Wouldn’t it be nice to know when an accessory is low on battery life? With Connect, I created Battery Status Messages, that let users know when they are about to run out of juice and need to recharge, or when their accessory is on the charger, full and ready to go.

Bits n’ pieces

Each companion product has unique needs from a design stand point. Because the products are made by different teams, I had to reach out and coordinate the renderings of the devices, making sure that they were facing the same direction, lit, and showcasing the appropriate feature. Additionally, I illustrated, designed and produced assets for the entire app, which is available on multiple screen sizes with multiple android device targets.

Design Explorations

I explored many visual directions and animation styles before landing at the final design.

DL Option 1

Design Language Options

I had the opportunity to have a mostly blank canvas when designing for the products. This is one of the directions that I decided against – even though it aligned with packaging, I felt that it was too far of a departure for our Motorola design language.

Animation Sample 1

Animation Sample 2

Animation explorations

Playing with animation allowed me to get a good gauge of how the app was going to feel.

Flow

Here’s a diagram of the dynamic content. Depending on the situation, content
can flow in or out of the layouts, much like cards, but without the margins.

Video

Check out the video below to see Connect in action!