As one of the Interaction Design class exercises, we were challenged to analyze and redesign micro-interaction from an existing App.

We chose iOS Weather App because it was one of the most common experiences we shared among the three of us. We all mentioned how we love the aesthetic of the App, especially after the iOS 7 update. At the same time, we felt that we don't see any major updates since iOS 7.

What we love about iOS weather App

1. The overall aesthetic

It is very simple and clean. We appreciate that it doesn’t look cluttered. The icons are flat and it looks clean. Font size and overall color scheme work as well.

2. You can obtain most of the basic information easily.

Although it is an information app, we don’t feel overwhelmed because the iOS Weather app limits the text to only what is necessary.  The text we see the most are the details of the current weather which you wouldn’t see until you scroll down to the end. That doesn’t annoy us because we wouldn’t see it until we scroll down to the end, and we only check the details sometimes. We mostly use the app to see the weather conditions for today and the next 5 days.

3. The animated weather background is a nice touch of realism.

The animated background is stunning to look at. Yet, the animation itself is very subtle. Therefore, it does not bother the user to read content at all.

What we wonder

1. What if there is an alternative way to switch between Celsius and Fahrenheit?

This was the most passionate pain point in the discussion since two of our group mates are international. We need to know the weather in Celsius or Fahrenheit depending on who we are talking to, and this occurs very often. To change between Celsius and Fahrenheit, we have to go to the city list mode and then toggle the conversion. We feel that it is a lot of steps.

2. What if we could see an hour-by-hour breakdown for future days?

This information could be very valuable for planning ahead, and it is featured in some third-party apps.

3. What if there was a way to look backward at the weather conditions of the previous time?
The App displays an hour-by-hour breakdown that starts at the current time. We wanted a frame of reference for how we should dress for upcoming conditions based on our previous experience.

What we visualized

Using Figma and iOS Human Interface Guidelines, we created a prototype to visualize our <what if>.

1. C/F toggle at the sticky bottom

We placed the C/F toggle at the bottom center where the location carousel used to be. This way, users can quickly switch between temperature modes. It’d be helpful to the users such as international people who use it frequently. At the same time, there are many people who might find this is unnecessary because they never need to switch between Celsius and Fahrenheit. So, it needs some research or survey.

2. You can check the other day’s weather by the hour

All the rows in the list of days are now wide buttons and tappable. When users tap on a future day, the row expands downward to show the hour-by-hour weather conditions of that day. Other weather App such as The Weather can do it, so why not iOS does that? If it is difficult to show the weather by the hour after 48 hours, it could show at least Day and Night weather.

3. Now you can see the past 24 hours of weather.

An expanded hour-by-hour carousel under Today’s carousel. Keep the past 24 hours of weather conditions, and we can swipe to find our reference points. We found people tend to remember how they felt with the weather past 24 hours.

For example, let’s say it is 11 pm, and Lena, a user, is picking a cloth for tomorrow because she has a lunch meeting, and she is excited about it. She checks the weather App, and it informs her it’ll be 61F, partially cloudy around 2 pm. She is not sure the lunchtime today was about the same, or it was colder than 61F. Then, she can check the weather past 24 hours on the app by swiping right on Today’s carousel. She can use the information as a reference to pick the outfit tomorrow.