- May 2014 to November 2014
- UI, UX, Wireframing, Prototyping
- Canonical Ltd
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.
Included in the guide
- Animations and transitions
- UX Patterns
- Visual design guide
- Expandable pieces of code
- Linked files
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.