Alcatel Watch UX

Designing user experience for Alcatel’s first smart wearable device

Alcatel wanted to produce an affordable and easy to use device for beginners. It had to be simpler than Android Wear so non-techies could use it without learning. Another important requirement was better power efficiency as opposed to Android wear. These were the factors that made us build an OS from the ground up.

I joined the company and took over the Watch project when the hardware was fixed. A round display with a flat bottom, one side button and one front button was what I had to work with. The screen is 240x204 px cut at the bottom. The cut is a technical limitation, added to balance size, energy efficiency, brightness and cost.

The research team provides us with a competitor analysis, focus group data on user expectations, pain points and feature popularity. The direction was set. Alcatel Watch buyers are:

non-geeks

occasional athletes

appreciative of personalisation

not willing to pay much

first time smartwatch owners

Originally the feature set included:

Android support

push notifications from a phone

calendar

alarm and incoming call notifications

activity tracker (pedometer)

sleep tracker

heart rate monitor

compass

stopwatch

phone’s camera control

phone’s music player control

selection of watch faces

“find my phone” function

adjustable screen brightness

mute switch

Bluetooth and NFC

Later we added support for iOS and features such as weather, workout tracker, themes. Even now, we’re working on adding more, but that’s another story.

UX v1.0

In this story, I focus on my part — interaction, motion and visual design. I skip the early design stages such as preliminary research, as it was done before I joined.

The initial concept of the UX was minimalistic.

Side button: tap to turn on/off screen, long press to turn on/off watch.

Screen: the whole screen acts as a single button (no several small buttons) to prevent misoperations; swipe up/down to switch between functions, swipe left/right or tap to operate inside a function.

Front button could be used for special functions like “find my phone”.

The first proposal with rough interaction design.

Unfortunately, Bluetooth bandwidth wasn’t enough for instantly displaying dynamic graphics such as album cover or caller photo. For the next iteration, I had to reconcile myself with the limitations and become more realistic.

A refined UI and more thought out interaction.

Now, we received our first working prototype.

First working version of the Alcatel Watch. I hope my hairy wrist will not hurt anyone.

After some testing sessions we found several serious problems:

to get to some functions required a lot of swipe interaction swiping many times led to user mistakes, requiring to swipe back the navigation was not expandable; as more functions would be added, usability would become worse

UX v2.0

We couldn’t accept these flaws and decided to postpone the launch date in order to improve the navigation scheme.

I came up with two new interaction concepts.

Concept 1. Watch face is the default home screen, the touch button is Back.

UX concept 1.

Concept 2. There is no home screen. The watch face is a function as any other. The touch button toggles menu no matter what function is active.

UX concept 2.

After review, everyone agreed that a smartwatch is first of all a watch, thus we chose the first concept.

More refined interaction model.

We removed the settings submenu to simplify navigation even further. Setting screens were replaced with toggle buttons in the menu. If too many functions were added, we could re-add submenus.

Even more simplified navigation.

During one of our testing iterations we found that users would touch the Back button more times than needed, and they would turn the menu on and off multiple times after returning to the home screen. To prevent this, I changed the interaction to open the menu only when pressing the screen.

Does it look too simple? The goal was to make it as simple as possible, to facilitate our target audience. I thought out more cool features and interactions, but can’t show them as we’re still exploring possibilities for future versions.

Menu

The main navigation scheme was decided, but how would the menu work?

We still wanted to reduce user mistakes within the small screen. We determined the minimum touch area size for first tier functions, and decided four buttons was the optimal number of items supported by the screen. Menu proposals were:

Menu options.

We decided option 1 was the most usable and didn’t interfere with notifications. Below in the Visual Design part you can find our exploration.

Final menu.

The outer shape was square to make icons look as big as possible, the inner shape was circular and visually corresponded with the function. Tapping a function would zoom in on the button, transforming the icon into a fullscreen function.

Quick transition prototype in Photoshop without realistic physics.

Also we explored the idea of having “live” menu icons, so that user could check weather and daily activity progress without entering the function. However, this would affect performance when opening the menu and complicate things a lot.

Notifications

First of all, when notifications are received, they pop up and the watch vibrates. We also wanted to allow users to check notifications later without leaving the current function, so I had to find a way to call the notification area from any screen.

Notification area.

It would be logical to copy the phone’s behaviour — swipe down to open notifications and up to close, but people would often close notifications by mistake trying to scroll the text down. It’s also more intuitive to swipe from a flat rather than circular part of the screen. That being said, I decided to swipe up from the screen bottom to call notifications and swipe down to close.

For social networking services (SNS) notifications, we could only mirror the phone notification area (no dismiss or snooze), and only for a small selection of apps. User could select which apps to get notifications from via accompanying mobile application.

The initial idea was a chronologically ordered list, but this would be inefficient on such a small screen. So I decided to group notifications by app. Horizontal swiping would switch apps, vertical swiping would scroll app content.