Skies
Context: University of Washington, Winter 2020
Solo Project
Solo Project
Description
This weather app is meant for people who check the weather regularly to
see the future forecast and plan their day. It only shows the minimum
amount of information needed for an average Joe. This eliminates any
confusing information that this type of user will likely not use.
see the future forecast and plan their day. It only shows the minimum
amount of information needed for an average Joe. This eliminates any
confusing information that this type of user will likely not use.
Process
I started with Protopie and switched to Adobe Xd to design the prototype
for this app.
for this app.
Ideation
Main App Goals
Primary Goal:
Check the weather forecast for the next couple of days.
Check the weather forecast for the next couple of days.
Secondary Goal 1:
Check the sunset for a specific day.
Check the sunset for a specific day.
Secondary Goal 2:
Look at the weather for another city.
Look at the weather for another city.
Wire-frame Concept 1
Wire-frame Concept 2
Visual Direction
First Iteration
Home Screen:
As you turn the dial the day and the hourly forecast for that day changes.
As you turn the dial the day and the hourly forecast for that day changes.
Additional Locations:
You can toggle between cities and it will change the home screen to that city.
You can toggle between cities and it will change the home screen to that city.
Changes Made
- Remove dial because it's better to see daily forecast in a linear view.
- Remove background gradient so visuals are not too distracting.
- Find a different navigation method for more information.
Second Iteration
Home Screen:
Top two are different visual versions.
The middle circle is a button that directs you more information.
Top two are different visual versions.
The middle circle is a button that directs you more information.
Additional Information:
The bottom right shows more information about the day, including
an interactive graph of the hourly forecast.
The bottom right shows more information about the day, including
an interactive graph of the hourly forecast.
Additional Cities:
The bottom left is a toggle between the cities.
The bottom left is a toggle between the cities.
Changes Made
- Change the push button navigation for accessing additional information
because it is not very intuitive.
because it is not very intuitive.
- Give more information on the daily forecast.
Final Deliverable
Home Screen
The temperature for the whole week is displayed
on one screen making it easy to see the forecast
all at once.
on one screen making it easy to see the forecast
all at once.
The circle in the middle is what the temperature
"feels like". I chose to make this a focal point
because the app is focused towards simple everyday
users seeing what the weather is going to be like on
their walk to work, school, park, etc. Having more
description on what the weather feels like allows them
to better chose their attire and activity.
"feels like". I chose to make this a focal point
because the app is focused towards simple everyday
users seeing what the weather is going to be like on
their walk to work, school, park, etc. Having more
description on what the weather feels like allows them
to better chose their attire and activity.
Hourly Forecast
The top shows important weather information
about the current day. There are descriptions for
the iconography but they are light and barely
legible because they are only there in the case you
forget what the icons mean.
about the current day. There are descriptions for
the iconography but they are light and barely
legible because they are only there in the case you
forget what the icons mean.
The graph at the bottom gives a visual representation of
what the hourly forecast will look like.
what the hourly forecast will look like.
Different Cities
Each city square that you save will display the
temperature in that place at the current moment.
This eliminates the extra step of clicking on a city
if you only want to see the current temperature.
temperature in that place at the current moment.
This eliminates the extra step of clicking on a city
if you only want to see the current temperature.
Thank You