Ubuntu Clock

The Brief

A clock as part of a suite of first class native apps, that are innovative yet easy to use straight out of the box.

Ubuntu is the most popular Linux operating system with over 40 million desktop and phone users worldwide, and powering countless more in server systems for the world's most innovative companies such as Tesla, Netflix, Uber, Dropbox, Paypal, Snapchat, Walmart, and Google's self drive cars. If you've used these services, you've used Ubuntu.

Ubuntu Touch is the mobile version of the operating system and as part of its development, needed essential core apps for its users to start using their phone right out of the box.

A clock app forms part of the core base of apps found on a phone operating system. This required designing for the creation, viewing, alerts and management of multiple alarms, multiple clocks for differing time zones, a stopwatch and a timer. Unlike a browser UI which recedes into the background, a clock's interface is constantly visible and requires a UI that balances functionality and beauty. I produced a variety of sketches, quick mocks and simple prototypes to bring these designs to life, presenting several iterations to Mark Shuttleworth, the enigmatic billionaire owner of Ubuntu.

Concept Development

The clock app needed a functionally robust yet pleasing and innovative interface. We felt the face of a clock held a very appealing simplicity being a triumph of information design, it is one of the oldest and well understood interfaces. It requires no language and is incredibly information efficient. Harking back to a more traditional time, we thought it important to reintroduce the clock face for digital audiences.

Rather than introduce complex controls to edit the time functions, I felt we could go further by allowing something I'd always wanted in physical clocks - the simplicity to change the time by moving the clock hands. It is a direct and physical action and with the power of touch screens you can do so much more. I sought to introduce direct interaction with the clock arms throughout the different clock areas.

Wireframe

I was keen to keep the user in one page of the app without taking them through to confusing menu systems and sub pages. In doing so, I developed a concertina approach that would allow for more menu options to expand from the touch of a button keeping the user in the same space.

Wireframe

The concertina approach required a lot of exploration to see how it might scale for an area of functionality with multiple options, such as choosing specific days of the week for alarms and their duration and end dates and so on.

Given than this was a native app, it required a strong adherence to our operating system patterns in areas as minute as modal windows, task bar menu navigation, and on/off switches. This meant incorporating these into the wireframe and seeing how this scaled with the concertina approach.

Doing this previsual exploration of scaling meant that I could work more fluidly with the visual design lead to ensure the right feel was reached faster.

Wireframe

Visualising It

I worked with our visual design lead to develop a beautiful and engaging interface that complemented the interactions and layout of the app. Inspiration was drawn from the main Ubuntu Touch visual palette which bold use of gradients that we wanted to reuse. We looked at creating a consistent theme throughout the native apps by using this palette and gradient giving different apps identity through key colours.

Wireframe