AWeather — Weather alarm application

Notifies weather events that user selected

People can download thousands of weather apps on Apple App Store or Android Play Store nowadays. Those apps show about present weather information and weather forecasts, with sleek and gorgeous interfaces. It seems it is unnecessary to design more weather applications, but I designed new one few days ago. For what?

Start Off

Problems

As I told you above, people can get various kinds of weather forecast applications. However, those apps are all the same thing, except their design elements like color, icons, etc. Basically, it’s not a big problem. Their main purpose is to inform how is the weather like today or this week. However, research shows that there are still some problems like:

1. Users easily forget to check today’s weather. Imagine you have date at night with your gf, without knowing the rain is coming…
2. Even if people checked for today’s weather forecast yesterday, It’s too easy to forget that (how’s the weather like today) after they wake up!
3. For sure, those applications are beautiful. But it’s still bothersome to check today’s weather forecast every morning, right after you woke up.
4. Some weather applications notify users about today’s weather forecast, but it’s kind of somewhat annoying thing to get push notification everyday morning when they’re still on bed. Even when you don't want to be notified!

More than 85% of people I surveyed experienced to forget to take their umbrella before they go outside, even though they checked the weather forecast already.

I guess everybody has an experience like this once before, ‘Do I need to take my umbrella today…?’ in front of his/her front door, just before open the door to go outside, turn on smartphone… launch weather application… check if it’s rainy today… and decide to take it or not. But what if he/she totally forgot to check the weather forecast?

When I took this project (to design any weather application) as an assignment, I decided to design a weather “Alarm” application — AWeather that notifies users about weather events only they want to be notified, not the same application that people usually can get on store. Let's get started!

Design a weather application with a distinct color between numerous other weather applications

#1. Observation

Goal & Challenge

I wanted users not to launch AWeather often. When users launch this app for the first time, they set settings like what weather events to be notified like ‘snowy’ or ‘cloudy’, and what time and days to be notified. That’s it! When setting finished, users don’t need to launch this app again until they want or need to change notification settings.

Job Stories

Additionally, I wrote some Jobs to be done lists to design more useful product and make it from user’s perspective.

1. When I woke up late for the work, I want to be notified in advance about specific weather events, so I can prepare with that even I don’t have much time to check how’s the weather like today.
2. When I’m too lazy that it’s bothersome to check the weather with my smartphone on every morning, I want to be notified about today’s weather only it’s rainy outside, so I can prepare my umbrella without forgetting and get additional minutes on my bed.
3. When I set an alarm at specific time like before I go to my work, I want to be notified about the events I want, not every alarm how’s the weather like today, so I can avoid to get notification everyday even if it’s sunny(that I don’t need to be informed).

#2. Ideation

Main purpose

AWeather’s main purpose is to notify users about the weather information that only they want to be notified, on time they selected. This can save their time, makes them to get ready with specific weather events without checking whole weather forecast. With that way, even if users forgot yesterday's weather forecast or forget to check today's weather forecast, AWeather will notifies users when if there are specific weather event that user's want to be notified.

“Great UX is intuitive and saves users time.”

Brainstorming

Here’s simple user flow about this application:

1. User downloads and launches AWeather
2. User sets an alarm of weather events he/she wants to be notified
3. User gets notification based on the settings

For example, if users selected that they wants to get notification when it’s rainy or windy, push notification pops up on the time when user sets, only when it’s rainy or windy. I wanted to keep this application as simple as possible with minimum depth, So I focused only for the one process: to set an alarm. No other function was added.

Just like the example above, user gets push notification based on his/her weather alarm settings. In the case above, user sets an alarm for 9AM, Monday if it’s rainy. What if it’s not rain on Monday? No alarm pops up!

#3. Rapid Prototyping

Lo-Fi Prototypes

With the ideas and concepts above, I created some rough prototypes for AWeather with Kakao Oven before making Hi-fi prototypes. (Click image to enlarge )

1. On the main screen, simple introduction and launcher icon pops up before user get started with “Start” button at the bottom of the screen.
2. On “Select weather type” screen, users can select what kind of weather events they want to be notified. Selected weather types are shows up at the top of the screen as weather icons.
3. On “Set time” screen, users can set what time to be notified with time picker and date picker.
4. On the last screen, AWeather informs users that everything has finished. If users want to change alarm settings, simply tab the “Alarm Settings” button at the bottom of the screen. This makes users to iterate one step from screen 2 to screen 3.

On "Select weather type" screen, I did not give many options. Notifications for ordinary (e.g., sunny) weather on a smartphone that already has many push notifications will only interfere with other more important notifications. I only wanted to use push notifications for important weather events that require attention, such as having to pick up an umbrella or wear a thick coat. That is why I restricted the selection of weather events on the "Select weather type" screen. In addition, if there are too many options, users will spend much more time to choose. The choices that come out from those ideas are as follows:

• Snow / Rainy
• Thunderstorm
• Swelter
• Gale
• Sudden Cold
• Fog / Cloudy
• All Above

Improvements

Usability Testing

Based on the Lo-fi prototypes above, I had some usability tests with my friends who were not designers to prove usability of this application. Examples below are about some pain points I’ve notified during user testing.

“If you want to improve a piece of software, all you have to do is watch people using it and see when they grimace, and then you can fix that.” — David Kelley

Pain Point #1.

On existing screen 3(Set time), right after users select type of the weather events, there was no [Back] button to go back to “Select weather type” screen. It makes users to finish one whole step to select the weather type again. On improved screen on the right side, users can go back directly with [Back] button when they want to delete or select again the weather types.

Pain Point #2.

After the test finished, most of testers asked me some questions like “How can I check my alarm’s information?” or “What settings can I set with this ‘Alarm Settings’ button at the bottom?”.

On existing screen (left), unnecessary launcher icon pops up with some long sentences. They don’t give users any information they really need. So I deleted them all, and put icons about weather events that user selected before on screen 2(Select weather type).

In addition, I added some texts to make sure what types of weather events they selected; with time they set to get notification. Lastly, I changed tests on the button from “Alarm Settings” to “Edit Alarm” to make sure about the function of this button.

#4. Validation & Iteration

Based on Feedback

With improved design above, I had one more user testing with other testers. The table below shows the result of second user testing with redesigned wireframes. If user can perform specific mission (pain points) without any struggle, I recorded it as ‘succeeded’.

#5. Output

Hi-Fi Prototypes

After some usability tests, I fixed and redesigned some screens and details based on the feedback from the tests. With them, I created Hi-fi prototypes you can see below. (Click image to enlarge )

Based on the settings that user set on, push notification pops up on user’s smartphone. In this case, user selected that he/she wants to be notified only when it’s [Snow/Rainy], [Swelter] or [Gale]. When it’s [Snow/Rainy], [Swelter] or [Gale]on every Monday, Tuesday and Thursday, push notification will pops up at 9AM.

Once users set their alarm, they don’t need to launch AWeather again until they need to change the alarm’s setting.

Final Flow Map

After the first-alarm set, users can edit their alarm with the button at the bottom on the last screen below. Click here to try a clickable mock up on Marvel App

Thumb-zone

To provide the best accessibility in one-hand and make it easily reachable from all hand-held posture, I referenced an article of Samantha about 'thumb zone'. Every bounds and icons in AWeather can be touched easily and naturally without stretch one's thumb, or without using other hand.

Icons for AWeather

Clickable Mock up

With Hi-fi prototype designs above, I created clickable mock up to test and validate my design more accurately. This clickable mock up was created with Marvel App.

Interaction

Tiny animations on mobile application screens can improve user experience about processes and results of the application. In AWeather, I used the theory to make sure and help users to select what weather events at what time to be notified from AWeather. (Click image to enlarge )

What I've learnt

When we design, we sometimes need to think deeply about one key issue rather than the big picture. When trying to solve a product-wide problem at once, we can easily overlook what we really need to concentrate.

In the AWeather application, I wanted users to set alarms with as less depth as possible and to finish all processes quickly and easily. Although it's important, such idea made me unconsciously think that I have to reduce depth too much while I designing AWeather, and that result me to forget design important parts for setting an alarm like the above example (Pain Point #1) and so on.

Takeaways

AWeather is a weather alarm application that lets user who needs weather alarm for only weather events user wants, only when they want to be notified. Even if users forgot to check weather forecast or to take umbrella before they go out, AWeather will let them know to take umbrella on rainy day or additional outer on cold weather.

I designed this application in my college’s UX/UI design class.
Hope you enjoyed my article!