Weather App

A simple way to check the weather

Project Duration: 1 Month
My Role: User Interface Design, Wireframing, Visual Design, Prototyping
Tools: Adobe XD, Invision

Project Overview

On this project that I was assigned for the Treehouse Techdegree certification, The project required me to create an app that tells users about the upcoming weather in the coming days. It will have two screens: one screen with an overview for the current day and upcoming days, and another screen where users can see more detail about each day.

The Task

For this project, I was tasked with wireframing and coming up with the initial and final iteration design of a weather app. I had to come up with the initial wireframes and the look and feel of the weather app.

The Audience

For this project, the target audience that I was thinking about while creating this application was pretty universal - pretty much every person with a phone who walks outside their door could use an application that tells them the forecast of the weather in order to know what to expect for today and the upcoming days. This app is inclusive and for everyone.

The Solution

For the wireframes, I wanted to stay true to the assignments guidelines in needing to keep three screens: a day screen, a weekly screen, and settings screen to set the location.

 I then created a flow of how the user would interact with the design in thoughts of how they might easily navigate the app. The user would start at the overveiw screen, then select the a date to see more details of the day screen, or they might update their settings in the settings screen.

Initial Wireframes:

I then got started in drawing out my initial sketches of how I think the wireframes would flow better in the design. The way I got about doing this is I sketch out many ideas very quickly on different peices of paper for different ideas for designs/features. I try not to erase anything and go with the flow, you never know when a "mistake" might inspire an amazing idea! I then highlighted some of the features I liked from my quick sketches I have made to come up with the ultimate wireframe.

The overview screen includes the user's location, the current temperature, the chance of precipitation, and a list of 5 upcoming days (including the current day). Each upcoming day has the name of the day of the week, and the high and low temperatures. Tapping on an upcoming day brings the user to a "day detail” screen.

Initial Sketch designs for the overview screen
Below are the sketches for the day screen. This screen is for looking at the weather forecast for a specified day the user selects. I created these three sketches very quickly on pen and paper and highlighted the elements I thought were quite useful to the user. This screen includes the high temperature, low temperature, and the chance of precipitation for different parts of the day.
Initial Sketch designs for the Day Screen

Typography

The Style Guide

Roboto
Aa - Roboto Light
Aa - Roboto Regular
Aa - Roboto Bold
H1 - Roboto Regular (40pt)
H2 - Roboto Regular (31pt)
H3 - Roboto Regular (24pt)
Roboto Regular (18pt)

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Colors

#2D87A5

#65CECE

Iconography

For the Icon designs, I wanted to choose a design set that was clean and simple that would complement the colors and the font that I choose. I Choose an Icon set online by Heeyeun on behance which I thought was perfect for the design.

Check out the Icon Set 🎨

UI Elements

Header Design

For the Header design, I thought it would be simple to have three compnents to it. The "+" icon adds a city in which the user wants to add another city to the list. The City name that the user is looking at. Finally, a hamburger icon to look at the user settings/menu screen.

Button Design

The simple button icon which I thought complemented the colors in the palette.

Temperature Graph

I thought this component was a good idea for users to understand how hot or cold the weather was going to be throughout the day when it was selected. It gives users a nice simple way to see what the temperature will be like.

Weather Forecast Table

This is a table which outlines the days of the week and what the temperature will be like. There are a couple of columns in the table: day of the week, weather forecast, high temperature, and low temperature of the days. All of these components combined give the user an idea of what their week will look like from a glance.

Final Product

After going through my initial sketches, wireframes, and my style guide, I went ahead and created my final product in a high fidelity. Below is what the product looks like. it is very seemless, easy to read and understandable to the user: A simple weather app.

Final Thoughts

Definatley think that this app could use more user research and expand on what features that users really need in a weather app and expand upon it. The app and its features itself is very simple and does not differentient itself from other weather apps. How could we make this app special and different that other apps that are on the market? What features can we come up with that can help the user's specific needs? What are the additional needs of the user? These are all questions that I would love to explore and dive into for a more holistic picture.

Learnings

In this project, I learned how designing information effectively can lead to productive design. I really loved working with the colors and planning and executing a nice design. This was one of the first designs I started from pen and paper all the way into a final iteration of a design. I'm really proud of the work that I did for this project and I would personally would use this app!