Life at your fingertips

Thanks to Canonical I got the very rare opportunity to work in a new operative system. Having the chance to work closely with those who envisioned and gave birth to a new mobile platform was an absolute pleasure as well as a source of professional opportunities.

My job there started purely as aUX consultant. I was in charge of creating and wireframing a series of mobile apps that were going to be shipped along with the new Ubuntu phones later on that year.

However, my duties were quickly reoriented as having someone like me with a mixed background allowed the team to allocate my time to different visual design tasks to fulfil deadlines on time. Thus, my experience at Canonical was very exciting, spent creating UX for mobile apps, prototyping my ideas for stakeholders as well as generating and supporting striking visual design comps to support the design team.

Weather forecast: Simplicity

The first app I had to put my hands on was the weather app. Canonical had used some previous mockups until my arrival. Still, they were not as glorious as they wished they were. They were actually - I'm quoting - "a bit boring". The head of department at that time was a brilliant person willing to find that ‘passion’ some apps possess and bear that makes us connect with them in a special way.

As you already know, there are plenty (if not hundreds!) of weather apps out there. Yet, this is the kind of app that doesn't require much development effort. By having some beautiful visuals mixed with a good concept, the app promptly turned into the app of choice for new developers as a Hello-world! kind of project.

First concept: Weather clock

Most modern weather apps look like they are exploiting the timeline approach to delivering a weather forecast in an easy way. Further to observation and research - and many sketches - I came up with a new concept featuring a clock-esque interactive control packed with all relevant weather forecast information essential to the user. Why not show at a glance how's the day going to be like and what is relevant weather-wise?

A live 12-hour timeline

In this concept, the main screen has a circular area containing the more immediate (and relevant) information for the user. It shows the current temperature as well as the temperature by the hour indicated by a colour code which responds to a temperature change based on the current one. It displays day/night time and chance of rain using a white line that grows depending on the percentage related to the tie slot. It also includes a weather icon as we are used to and a more friendly message reading (in words) only the very things that matter the most on that specific day ('Should you take an umbrella?' 'It's going to be hotter than yesterday').

Calculator: An old timer with a twist

If there's an app with even more variations in the digital market than a weather app, a calculator app springs to mind, which also consisted in my second assignment.

There are not many things you could do to innovate a calculator app design. Well, at least not until you think of the plethora of apps that carry out some calculations on the phone in your pocket.

Do you have a currency converter installed? Maybe a unit converter? Or maybe an app that generates graphics based on mathematical functions? We got you covered.

Ubuntu's little helpers

I've always found quite annoying a chaotic bunch of apps (on the same phone) sharing the same goal: making calculations. So I came up with an idea that both users and the Ubuntu community could benefit from. This is why.

The calculator app would have the ability to have some extra functions users could simply install from the Ubuntu store. These functions would act as a plugin, called 'helpers' and would live inside the Ubuntu calculator app, improving and above all extending its capabilities according to the user's needs.

These helpers could easily be developed by Ubuntu's extensive network of developers and community and, at the same time, they would efficiently declutter our handsets. Simple as that.

UI Designer to the rescue

Part of what I did with Canonical consisted in helping the design team with the extra workload in the messaging/chat areas of the phone, so I created a few new mockups including file sharing, group conversations and so forth.

Another weather app concept

The second weather app concept shows a more traditional and allow me, less risky approach to the problem. This time using a standard linear timeline control with some bar graphics and icons showing the different weather variations throughout the day.

Style guide design concept

I also designed a few mockups of how the design style guide could look.

A new product's (especially a new operative system) style guide required a new design. This style guide addressed to designers and developers with the purpose of giving a clean and practical understanding of the new OS and its many features.

Included in the guide

  • Animations and transitions
  • UX Patterns
  • Visual design guide
  • Expandable pieces of code
  • Linked files

Wireframe samples

Another exciting area I added to the weather app was related to the ability to create alerts based on different conditions and situations that could help users to predict and be prepared for extreme weather conditions.

The way to create these alerts was easy: pick a condition and match it with another one. This way you could setup an alert that would warn you once entering a particular area (geo-fencing) combined with temperature levels. It might even tell you if it was just about to rain, or if a tornado was approaching!

There was also a feature that would add a few extra lines of text to those boring "loading" messages. Hence, a more friendly app and a lot of fun ahead.

Weather app wireframes

These are some captures of one of the many documents and revisions I worked on during my period at Canonical. In this case, the weather app underwent several changes until it was eventually shipped to the development team.