Alarms & Clock

Implementing the UX for a Universal App on Windows 10

Left: Comparing times from different cities across the world.
Right: The time at 3 different cities pinned to the start menu.
Role: UI Developer
Skills: Implementing across different form factors, state transitions, screen reader accessibility, globalization
Duration: 1 year (June 2014 - May 2015)

Project Brief
'Alarms & Clock' is a Windows 10 app that helps people manage time. Users can set alarms and reminders, time their activities using a stopwatch or timer, and compare times across the world. A key objective of this project was to explore and exhibit the ‘Universal’ nature of Windows 10 apps - features that work across desktop, mobile and tablet, without needing rework to accommodate these form factors.
My Role 
I worked on this project as part of a 7 member team at Microsoft. My primary task was to implement  wireframes handed over by a UX Designer. My responsibilities grew to include creating reusable controls, ensuring screen reader accessibility, and ensuring the world readiness of the interface. I worked closely with a PM in conceiving state transitions and possible user actions across the interfaces I implemented. 
Examples of My Work

We built responsive UI that repositioned and reoriented across different widths.
The Windows 8.1 paradigm was to have apps cover the entire screen. Windows 10 was more flexible, with freely resizable app windows. In addition, Universal apps work across different widths, from a phone screen, to a tablet, to a high resolution desktop screen. The diagram below shows the difference in appearance for the same page, as the width changes.
Along with a teammate I built reusable and customizable controls.
A major lesson I learnt on this project was the value of abstracting away the three entities of an interface - data, interaction, and appearance. This allowed us to reuse an appearance of a control, with different kinds of data. It also allowed us to plug in different kinds of interactions for the same appearance. We customized it to the extent that it could count up (stopwatch), count down (timer) and support play, pause, etc.
We built a clean navigation system, and mapped out transitions and actions.
Rather than just make a series of pages that had buttons linking each other, we modeled our navigation system on user context, and tasks to perform in each context. For example, the diagram below shows three different contexts of use of Alarms. Consider the start state as zero alarms (state 1). At this stage the only possible actions are to add new alarms, or to exit from the alarms view. In state 2, the user is 'managing' her alarms. In this context, 'exit alarms tab' is not a possible action, since that adds a distraction to the user's focus at this point. I made the model below to illustrate the transitions between states.
Challenges Faced
Working on a product with tens of thousands of users brings unique challenges. The scale and diversity of the audience demands extra care, especially in the area of accessibility.
I ensured that the app was accessible to people with visual impairment.
Working with custom controls posed a problem - we could not reuse any built in accessibility. In Windows, the 'Narrator' feature can read out elements in the UI Accessibility Tree. Standard controls are directly part of this Tree. I created a model for making our custom controls in the 'World Clock' feature accessible via Narrator. I also made sure there were counterpart colors for each element for accessibility to people with varying levels of color blindness. As a designer I would like to take up the challenge of conceiving accessible solutions that go beyond screen reading or simple haptic feedback. 
Here, items and their tooltips are being read out as the user tabs across elements. 
I learnt that making UI globally accessible requires more than literal translation.
It is natural to assume that translating words, phrases and sentences of text, along with numerals, would be enough to make an interface global. But we are wrong to expect the whole world to follow western practices. Here are some simple examples of things you need to 'design' for, not just translate: 

1) Text translated to Tamil requires almost 3 times the necessary width for most English phrases. A designer needs to understand how to wrap text and know how much width to allocate.
2) Even within the English language, changes in text could cause ugly overlaps. We need to make sure to account for ascenders and descenders in every piece of text. 
3) Some countries have unique symbols or ways to represent time.
4) Some countries such as Saudi Arabia have text written from right to left. So every part of the interface requires an alternative Right to left version. This requires you to think deeply about alignment, especially if items animate as in the gif below.
This is a control my teammate and I implemented, to compare time across different cities in the world. We had to make the slider at the bottom move in the reverse direction for Arabic speaking users. We also had to play around with the alignment and positioning of the numerals on the cards to make the animation least jarring.

Other Projects

Capstone Project with Odigo
Tech Explorations
Lemme Get That
Educational Poster
Anna Karenina