Weather app in Material Design

I made a weather app design as a design exercise for Sony. It is inspired by Material Design as that was a requirement of the brief.

A screenshot of all the mockup screens made for this design exercise.

In short I played it safe when doing the exercise as I believed it was to display my understanding of Material Design and that I could execute on the instructions given. I was kindly told that it was not what they (Sony) were looking for, so some part of me felt a bit unhappy and betrayed because the brief was lacking that type of direction which would indicate that they required me to be creative for the task.

So in this article, I will go through what I thought about for the exercise, but will also leave further thoughts on what I would have continued thinking about if given the opportunity to be creative as well.

Recreation of the icons

Though it was not asked of me, I felt like it was good to revisit the icons used to depict each of the weather states. The legend of these effects are shown in the Help & feedback section, displaying 9 different states and a 'scattered' modifier to indicate a difference in cloud cover to expect.

While it may be shown simply, I wanted to show a possibility of reworking such indications where a user can get more information from the varying combinations of something like the scattered modifier.

One extra thought was also that the image depicting the location would also not only show the location, but depict the type of weather one would be experiencing this moment with the weather status in mind. So it may be sunny, but since it's getting closer to the evening time when the sun is currently setting, we will be shown a photo showing the setting sun in the appropriate position giving the correct amount of light at current time.

Perhaps these photos can (also) be provided by the users and then catalogued during the particular weather statuses and the locations they represent.

Weather apps are quite bland

I made a lot of considerations about context and how a weather app should be used if I was given this task today. A lot of the common features is something I desire myself in a weather app. Though it was clear this type of exercise will never result in any real product as there is an abundance of weather apps out there. So I tried to bring forth some ideas which make a weather app interesting yet still relevant.

The forecast subtitle

One of the first ideas I had was to have a forecast subtitle which either tells you if you need to bring something (an umbrella, a jacket, etc.) or simply summarizes the weather until you do need to bring something. To this day I still have trouble transitioning to jacket weather or going back to shorts for shorts weather. Which may sound weird and as if I spend no time outside. I believe it is just that I adjust much slower to the outdoor weather over time when I usually dress for comfort going out.

You can see the forecast title right underneath the current weather status. It shows with an icon to bring a little bit of attention to what kind of clothing is suggested.

In a way I was a bit too intimidated to explore this idea further for the exercise. If I have, I would probably also add an overlay on top of the card which allows the user to see the recommended garb to wear. This would allow for advertisements to show fashion accessories appropriate to the season, or even just the necessities if there was a certain weather state. If the user gives input to these recommendations, it could help the user further in future once it understands what the user prefers more.

Customizing the data

There are some settings which also allow the user to filter/customize the overview more with different types of data. The thought behind that is the ability to "collect" weather cards and still keep a relatively simple Overview screen that doesn't scroll for forever.

These are the screens showing the filters one can view and customize in settings.

If I were to explore this idea a bit more, there could be a lot more types of data to interpret for the user. Perhaps there's some way to summarize traffic data based on the user's usual route, or perhaps an integrated calendar event which has a date and time set. Or perhaps a means to experience astronomical phenomena based both on location and weather conditions. Or perhaps it is as simple as changing data sources. Each of these scenarios could also be further explored to reveal ways to set up further interactions which can help improve a user's planning or maybe even allow the user to renegotiate schedules with others because of a concern of an incoming weather status.

User generated content

This would be a very freeform and an open discussion point, since it could allow for a lot of different options or explorations. But this direction would explore what and how the user associates with the weather they experience. Perhaps the user can associate particular weather forecasts with certain types of music they enjoy listening to during such weather. Perhaps they would like to associate it with a mood and intent and see if other users also feel likewise as well. Perhaps a location-based game can be implemented where weather status and their forecasts matter to a community of players.

There's a lot to unpack experience-wise here, and there's a lot of possibilities to discover.

This article was mostly a means for me to express some of the deeper thoughts within the possibilities of improving on the design. It should help clarify some of the design choices made as well.

The weather app screens

Below are all the submitted screens in the order they were made.