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”.
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.
Now, we received our first working prototype.
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.
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.
After review, everyone agreed that a smartwatch is first of all a watch, thus we chose the first concept.
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.
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:
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.
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.
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.
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.
I also had to design modal notifications that required user action. These would pop up unexpectedly causing misoperations. The best solution we explored was sliding buttons with animated arrows. People get ready to this interaction when they unpack their watches and confirm selected language: “Slide left to confirm /language/”.
Apart from events and SNS, we had system notifications such as low battery warning, function auto dismissal, connectivity warnings, etc.
Daily activity tracker
A must have function in a smartwatch is an activity tracker. Initial requirements included steps, distance and calories. Based on research, I merged the activity tracker with sleep tracker, to keep all daily progress in one place.
At some point we decided to display more specific data such as active minutes and overall progress on the main activity screen.
The watch could recognize walking and running, deep and light sleep and awake time. I had to find a way to display all this data on such a small screen. After experimenting, I added small icons into the progress bars. No translation issues, it doesn’t take space and adds no clutter or extra interaction.
This scheme did raise many questions on calculation. For example, what time was used for sleep calculation? Midnight to midnight? What if you sleep early? We decided to track sleep from noon to noon; this includes even siestas.
In upcoming generations we plan to include motivational notifications and reminders, more comprehensive data and may be even support for third party applications such as Strava, Runkeeper, MyFitnessPal…
Themes
Initially we planned to only launch a black watch, but later Alcatel decided to also ship a white version, so we added a white theme to match watch case. Because the black theme works well in low-light conditions and saves battery, we allowed users to switch.
Heart rate
Our heart sensor could measure manually as well as continuously. Manual is straightforward, but how could people activate continuous measurement? How could we optimize power consumption?
This was pretty complex, so we decided to make a manual Heart Rate a dedicated function — tap to get a result. To preserve battery, we only used continuous measurement while the Workout mode was active.
Weather
Originally I was thinking of upcoming hourly data for the main weather screen, but it looked pretty complex and not visually appealing enough. We simplified, tried animated backgrounds for different weather conditions, but animations couldn’t be smooth.
Finally we decided to have a special background image for each weather and time of the day: morning, day, evening, night.
Unexpectedly, weather raised more questions than any other function. We had to get the location in a simple way without bothering the user with GPS permissions, to figure out how often it would update and how to display the latest update time and what would happen if there was no internet connection. The back end logic behind weather turned out pretty sophisticated.
Music player
Another complicated UX problem was music player control. We explored two options:
- Interaction with all buttons on screen: play/pause, previous/next, volume up/down and then somehow find space for the track name.
- Interaction like Soundcloud, which only displayed the track name. Touch the screen to pause/play, swipe for previous/next track. Volume could be controlled by either a horizontal slider under the track name or a circular one around the screen edge.
We went with the second option since it was more minimalistic and looked more appealing.
Watch
To simplify customers’ choice and to catch the fast-approaching deadline, we limited the amount of watch face options. These were:
- analogue with marks and a second dial if roaming (in different time zone)
- analogue with hands only
- digital
First, we tried to make analogue watch hands as a bitmap images, but spinning hands weren’t sharp, so engineers had to draw the hands by code. Another reason to keep the design as simple as possible.
As the watch face is the default screen, it has to inform of all important events at first glance. If you have missed notifications, you will see notifications icon and missed call(s) icon right on the watch face. If you left a function without stopping it (i.e. workout), you will see a workout icon, so you know it’s still tracking and measuring your heart rate consuming battery power.
When you turn on the screen, you see the battery icon. If the battery level is normal, the icon disappears to reduce clutter, if the level is critical, it will stay.
To inform the battery level more efficiently, the watch displays a modal view with a big battery indicator when the level is critical. The same happens when the watch is fully charged. Also we found it useful to show the same notification on your phone (optionally).
To keep things intuitive for the user, all three faces use the same layout. An added bonus was that this saved time for the engineers and allowed them to focus on other critical tasks.
I’ve never been a fan of skeuomorphic design in digital devices, simply because looking real is not being real. I played with minimalistic designs without gradients, textures, shadows and other real world elements. This worked well with the black background, which made the screen borders invisible on black watch.
We allowed users to use both preinstalled and custom wallpapers with all watch faces. The watch face would be white to not interfere with wallpaper colors. Here are some wallpapers that can be installed from the Onetouch Move app:
Default screen
For the watch, we show the face by default. But if a function is running in the background, what should we display? Does the user want to see the time or control his music? After quite a debate, we defined several options:
- always display the running function
- always display the watch face
- change what to display depending on function
- display the running function, but add a way to check the time without exiting
Finally, we created a pretty sophisticated logic table for each function; if the watch is activated during a limited period of time, we show the function. After a longer time, it resets and shows the watch face. Additionally, I added a quick way to see the time; press and hold the front button to see a semitransparent layer with the time.
You can find the original size (53 million 820 thousand pixels) of the diagram on my dribbble.
Visual design
We chose a minimalistic flat style based on test feedback, colleagues feedback, surveys and today’s trends.
Alcatel Watch had to support languages such as Chinese and Japanese, with its vast amount of characters, this and limited memory meant we could use only one font size for the full character set. After playing around with many font sizes, I chose one that was optimal in terms of readability, spacing and visual appeal. Only for numbers we could increase the font size, as it had a limited character set.
For the full character set font we decided to use Droid as it was designed and optimized for low pixel density screens and looked better on the screen. The bigger font used for numbers was Roboto.
Another good challenge was to come up with clear but concise text given the lack of screen real estate. What looks good in English, often doesn’t fit the screen in German.
Animations
Animations were the most anticipated and at the same time painful part of the project. We implemented the most vital animations like camera shutter release or heart rate measurement progress, but couldn’t achieve good enough result with more complex animations containing multiple layers or semi-transparent elements.
User testing
It was a lot of fun and very insightful to observe how people of different age groups, from different nationalities, with different backgrounds and computer experience used the product we had built and failed some tasks badly.
Most of the failed tasks were during the onboarding process. The users had to switch too much between the Watch and phone; for example, we had one tutorial animation explaining the Watch interaction on the phone. The problem was that users wanted to try it on their Watch and missed critical information, such as how to open notifications or use the back button.
We changed the tutorial into a swipeable carousel, with short animations for each new piece of info. This way, the users could immediately try out the instruction on their Watch and proceed at their own pace.
Another issue was value proposition. We wanted users to sign up for an account, but found that they didn’t see the added value. We entered a screen explaining the benefit of an online account (data backup and an online platform). We also added a startup screen explaining what the companion app did, and if users didn’t have a Watch, where they could buy one.
If you dig into user onboarding flows, you might also be interested in my analysis of the Apple Watch.
What I have learned
Working on the Alcatel Watch proved a priceless experience, as I learned a lot about manufacturing and designing for hardware.
Creating hardware is to define priorities and find a balance between cost, functionality, ease of use, performance, power consumption, size, looks, ergonomics and time to market, constantly pressing the scales to the side with the highest priority. Because of the limitations, it’s impossible to make each of these aspects perfect, you have to make a trade-off.
You also have to shift your mind-set about good design. As a designer you might like trendy minimalist design, but real target audience might think this cutting edge design looks cheap or boring. Obvious interaction schemes to us designers can sometimes cripple inexperienced people. I learned how critical it is to understand the real target consumers.
User testing opened our eyes on problems we didn’t even realize existed. Test your product on real users on different stages of development. The earlier you start, the better.
I also found it’s possible to expand your influence on decision making even out of your competence if you:
- are confident
- are proactive
- make good calls
- convey your point of view efficiently
- have the balls to say no to management. This requires you to explain why a call is bad and how to improve it
In the end, I believe we did a great job. We created the first smart wearable device with home built OS which has received critical acclaim, we learned a lot, and I’m proud to be a part of this story.
PC Magazine: “Altogether, the OneTouch Watch is a lot more simple to navigate than Android Wear.”
Tom’s Guide: “In general, I found the Onetouch Watch’s interface much more intuitive and direct than Android Wear.”
Thanks
Special thanks go out to Anthony Sarnes for believing in and hiring me; Dan Dery, Alain Lejeune and Will Dowey for trusting, pushing the team to the limit, their cool ideas and attention to detail; Xu Yi for managing the project; Zhang Li for the software; CW Park for the industrial design; Jingzhi Ding for the Onetouch Move interaction design; Joren Bredman for user testing, language control and his many random initiatives that helped us improve.
If you have any questions, suggestions, or you want to say Hi, find me on dnevozhai.com, Twitter and dribbble.
Update
Check out presentation of the project on my Behance portfolio.
Please click that nice Heart icon below if you enjoyed this piece :)
