Objective
To practice the design think approach by designing a weather mobile application in Illustrator.
Empathize & Define
Through this case study, I tried to solve a major problem I have with the typical weather app. Sometimes I'll forget to check the app in the morning, go to work, and end up unprepared for a torrential downpour when leaving the office.
Personas*
*I based everyone in New England because our weather varies wildly throughout the year, sometimes even the day. Hence, why it is more common to be surprised by a rainstorm occasionally.
Maya: A 20-something-year-old, employed, lives in New England, works in an office that is cold so wears the same things year round, occasionally forgets to pack an umbrella and has gotten soaked by a surprise afternoon shower, has misjudged the temperature outside by just looking out the window
Jim: A 20-something-year-old, college student, lives in New England, walks to college early in the morning and does not return until late at night, has been unprepared for the day by either wearing weather-inappropriate clothes or forgetting to pack an umbrella
Ideate & Prototype
Goal
Develop an app that was appealing, classic, simple, and included information regarding what to pack/wear that day.
I used some of the general principles from the iOS weather app, along with my own ideas to come up with the following design criteria.
- Prominently display the current weather
- Show the weather throughout the day
- Suggest what the user needs to bring/wear that day
- Show the upcoming weather throughout the week
Ideas for Additional Features:
- Notifications of the day's weather set to show up prior to getting dressed in the morning
- Notifications linked to a user's calendar, to warn them in advance if they should change weekend plans (ex. if there is a planned beach trip over the weekend and it is supposed to rain, a warning 2 days in advance would be nice)
- Warnings regarding snow parking bans on a street where someone has on-street parking
Step 1: Low Fidelity
Step 2: High Fidelity Prototype
High Fidelity Prototype Design Choices
Prominently display location & weather: The most important information has to be clearly defined, early in the hierarchy of information, and easy to find. That is why the weather (illustration), location and temperature are all first, front and center.
Include an umbrella/article of clothing: For rain, I wanted to make sure that the user understood that it was/would be raining. That is why I felt that an umbrella would universally imply rain. I included within the text that you should bring a jacket as it is 60°. An option in settings would allow the user to change the jacket temperature setting. Other suggestions would include winter coat (<40°), sunglasses (60°+ and sunny), and hat and mittens (<30° and snowing).
Show weather in 3-hour increments: I thought that this would be an easier way to see how the weather would change throughout the day without having to scroll over. However, does this leave the user with less information. Further user testing would be needed to determine if this was a deterrent.
Show only 3 day look ahead: When I was in 6th grade a meteorologist spoke to our class. He said that meteorologists were most accurate for the upcoming 3 days, anything beyond that was more or less a guess. A quick google check informed me that this is still relatively true, hence why I included only 3 days in my design. Ideally, in the app it would be possible to scroll further out to show a week, but only 3 days would be displayed originally.
Top and Bottom Menus: For this quick iteration, and first project I put placeholders in for the top and bottom menus. On the next iteration, I plan on including the typical iOS options.