Ubuntu Calendar

The Brief

Create a calendar with multiple views that are functional, easy and exciting to navigate through with an attractive interface.

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 staple of all operating systems, the calendar is an app that requires a streamlined UI that seamlessly connects with multiple online services, and pushes up precise agenda information effortlessly. Similar to the clock, and unlike the browser, the UI is an all important focus in a calendar app. I produced a variety of sketches, wireframes and simple prototypes to bring the interactions to life for the UI designers in London and the developers worldwide.

Sketching Ideas

One of the key challenges with designing calendar applications is the number of ways you can display your time, whether it’s by year, month, week or day. I looked in detail at making the tab header the key to switching between views, this aligned with the native OS patterns that were being developed simultaneously.

Sketches

For each entry I wanted to explore interactions that kept the user on the same page without opening up new 'sheets' or dialogs that might confuse the user. An enormous challenge with this is ensuring the user can see all the events in a view without creating a confusing and messy UI squashed into a mobile screen.

Sketches

I created paper prototypes to truly push the navigation model. I was very interested to see how the user could go from one part of the app to the other without dull menu systems. As a whole new OS, I was looking to differentiate Ubuntu's apps from other standard UI conventions built by other native OS apps.

Sketches
Wireframe

Developing Concepts

I worked with development to create a series of wireframes that would help them to understand the designs for the calendar app.

Wireframe

One of the key elements of Ubuntu's OS was the edge swiping that enabled more actions. Bottom edge swiping was specifically open for apps to customise. In the calendar, I wanted the bottom edge swipe to open up editing functions such as 'add new event'.

Wireframe

I continued my exploration of pinch and spread within the calendar. I wanted to allow the user to navigate the calendar app similar to navigating a mapping app. At the highest level was the year view, to go inwards, the user had to spread open to zoom to the month, week and then day.

Wireframe

Prototyping

I worked with our motion graphics designer to put together a video prototype with the visuals to show how the pinching and spreading interactions might work.

Key to this part was getting the transitions correct, this would ensure that the user understood the navigation model: where they were and where they were being taken to.

Visualising It

I worked with the visual designer to put together a series of designs that would amplify the layout of the app. I was keen to continue the colour gradient seen in the other apps, however, although purple was a prefered colour, it clashed with the clock app which already used this. We opted for green finally to give the calendar app its own visually distinct identity.

Wireframe