Daniela Dimitrova
Reallife use.jpg

The Weather App

Case Study. Designing a landing page for a non-profit organization.

Reallife use - Copy.jpg
 
 

Case Study of a Weather App Concept Design that makes the process of checking the weather effortless and accurate.

 Team Class Project 2017 |   view prototype 

 
 
 

Background

Forecasting the weather in our region is difficult and communicating the level of certainty and locality is even more difficult. We had to find a way to clearly communicate this nuance and better integrate the information into people’s plans and outdoor activities. With that said, we set out to create a weather app that makes the process of checking the weather effortless and accurate. Throughout the entire process, we gained insights which lead to small refinements, but large results. Maintaining strong communications and putting forth team effort, we developed a product that was demonstrated as an improvement from current weather sources out on the market.

 

Team

Daniela Dimitrova and Luka Poletaeva were both responsible for everything, all decisions were agreed upon and discussed together.

 

The Challenge

Our greatest challenge was identifying a problem. There are many other weather apps and people seem to successfully check the weather. We had to dig deep and find a way to make the weather app more focused, and more useful. To start off we stated the problem in a broad research question, “How does the weather affect our time management, productivity, decisions, and life?”.  

 

Solution

Our final resolution was to only display weather information at a specific location, that is relevant to the user’s activities. People living in different parts of the world are affected by the weather at that specific location and therefore their information priority varies. If you live in the Pacific Northwest you would want to know when it is about to rain, however, if you live in Greece and there is 0% chance of rain during the summer, you don't need that information and you would rather know what would be the hottest part of the day. We tried to remove any irrelevant information and leave only what matters.

 

Research

To design an app that solves a problem that users face and help them accomplish their goals faster, we did competitor and user research. Looking at pre-existing apps helped us define patterns and gave us insight on how we can differentiate. Interviewing users was the most helpful part of our research since it revealed the usability problems that we had to solve.

Initial Ideas

Before diving into research, we started off by just pouring out initial ideas on what would make the weather app cool and different. A lot of our initial brainstorming explored the concept of connecting the weather app to other accounts and having it sync with people’s calendars in order to remind of weather changes that affect their personal activities. The research that followed, however, made us eliminate all initial ideas. The problem we had to solve was not about adding more features, but removing old ones to simplify the way weather information is presented to the user.

Competitive Research

What do current weather apps offer to their users? The weather apps that are available to download from the app store such as The Weather Channel, WeatherBug, and Weather Underground, offer daily and future forecast, local weather, and historical data, reports about the effect of weather on health and sport activities, road conditions, and radars. The apps contained multiple pages and users should scroll and navigate to access the information.

User Research

Interviewing users gave us a very good idea of what they need. We interviewed adult people from the age of 30-40 from the Pacific Northwest. They were asked a total of 7-8 questions to better understand when and why they check the weather, what information is of high priority for them that they want to find right away, and what appears to be unnecessary information. Our findings showed that for the mainstream user, daily activities are the main incentive for checking the weather. What matters to users is daily weather at a specific location. They prefer “more about today in a small overview versus a large overview for every day”.

There is a need for carefully chosen content for display. A lot of information and features such as radars, detailed data, and repetitive information is often left unnoticed. Another finding to point out is that synchronizing the weather app to other accounts or a personal calendar did not appeal to any of the users who we interviewed. One of them pointed out that “a weather app should be only about the weather and nothing more”. Communicating with users helped us understand their needs, so that we can design a product that meets their expectations. We concluded that instead of adding more features, we had to remove content and simplify the information that is presented to the user.

Personas

Based on the information we collected, we used sticky notes to group some of the features that our users had in common and established a few defined personas. The “compulsive peeper”, “the objective dude”, “the planer”, and the “mediocre bystander”. Things that all four have in common are:

Users want to know the weather today.

They do not like weather notifications.

They are looking for weather at a specific location.

They are frustrated with weather details that are unnecessary.

Hourly weather for today has highest priority.

They want to know whether it is going to rain or not.

 

Scenarios

Scenarios are a powerful tool to give all a say. Writing them gave us a better understanding of how and why people use weather apps and helped us define the requirements for ours. Each of the use cases we wrote focused on people who lived in different cities in the US that have specific climate characteristics. The location people occupy greatly influences which weather information they care about. The people we interviewed are from the Pacific Northwest and all they care about is if it is rainy or sunny. However, people who live in hot places or areas that are threatened by wind and hurricanes, prioritize different type of information.

 
 

Content Organization

Journey Map

We worked on journey maps to show how someone would use our app, and it also helped us visualize the potential functionality of our app. The steps it takes to complete a task within our mobile app was reduced, which instilled a confidence for our approach. Eliminating the time it takes to complete a task allows for users to focus on more important things and to better prepare for their daily activities.

journymaps (1).jpg
 
revisions.jpg

Information Architecture

We then used sticky notes to identify all features that we want to include in our app and grouped them based on what they have in common. We created a priority information group, secondary information group, and setting.

 
 

Wireframes

Finally, we printed out Android Screen templates on paper and we sketched out wireframes by making placeholders that will hold specific information. It was all about organizing the layout and establishing a consistent grid.

 

First Testing

Using the wireframes, we sketched a paper prototype of a few major screens and we selected five individuals, who were not familiar with the app, and tested them to see what works and what doesn’t. He had to make sure we were on the right track before moving on further. The users were asked to look at weather information about Bellingham, WA and information about the weather at Mt. Baker.  All users successfully navigated through the app and managed to complete the following tasks:

          Finding forecast for specific location.

          Reading the information provided on the screen and relating it to their activities.

          Finding forecast  for “today”,  “tomorrow”, and “10 days”.

          Reading the hourly forecast for current and future part of the day.

          Changing units by picking between Celsius and Fahrenheit, feet and meters.

          Users commented on finding the secondary information useful and not distracting.

 

Visual Design

Since, the app had to be designed for android, we followed their material design guidelines and patterns to define the structure of the app and the

use of color. We created a simple tab navigation and emphasized on hierarchy and color to communicate all other information. The size and weight of the text and numbers is the main way to prioritize information and help the users find it. Important data is bigger and bolder, while secondary information is smaller in size.

 Icons

Icons

We went through a lengthy process when trying to pick the colors we wanted to use. It was important for us to use colors in the hourly temperature graph to indicate high and lows, but that limited us on adding color anywhere else. After trying out a few options, we decided that we wanted to go for a clean look by keeping the background white and using a grey tint and one accent color to create visual contrast and make it accessible for users with disabilities.

To indicate the weather, we developed a set of icons. They are geometric, consistent, and communicate the information effectively.

 

Digital Prototype Testing

test 2.JPG

We created our first digital prototype using invisionapp.com and ran a second round of tests on users to see how they interact with the app when there is a higher level of visual complexity. 


Users could successfully navigate through the app and commented on its simplicity. We used this test to get more feedback on the visual design and information architecture of the app, because that is the most important content that the app is aiming to communicate successfully. We received feedback that pointed on the low and high temperature visualization when you look at the forecast for tomorrow. There was no visual contrast to separate high and low temperatures, so users were  reading it as a single line. We improved it by positioning the low and high temperatures one under the other and decreasing the opacity of the lower temperature. It became more effective because it was consistent with the way we displayed temperature throughout the rest of the app, and it was more intuitive for the user to look up and down rather than reading it across.

 
 

Play with the Weather App!

An interactive final prototype of the app is available on invisionapp.com.

f15a7abf-a7c5-4e9e-829b-d2041826e99c_rw_1200.jpg

Outcome and Takeaways

Theoretically, the app would open up to a screen that shows up the location you are currently at according to your GPS. For prototype purposes, the main screen is the weather in Bellingham, WA.

Going through the process of development to implementation, we became more aware of how prepation paves the way for a successful product. We prepared ourselves by analyzing user testing and taking thoughtful consideration to the feedback we received. One of the underlying frustrations amongst users was due to content structure, therefore we focused on improving the information architecture and applying a hierarchy to content.

In our first round of testing, it was evidence that these minor adjustments  revealed to be a  major progress as users were navigating intuitively, while the flow came to them naturally. Our app makes an impact because it makes the process of checking the weather faster  which enhances functionality. We have made the most important information the easiest to find.

The key to the future success of our mobile app is to maintain simplicity. We understand that oversimplified products sometimes can make for a boring experience, however the act of checking the weather does not demand any surprises. It is a task that should take the least amount of effort, and that is the foundation for our decisions and final implementation which was proven to meet the needs of our users.