Visual Design Elements

Broad and General: We ensured the visual design would avoid and improve upon the previous visual design problems of typography and iconography being unreadable, colors being distracting, and iconography being difficult to understand. We optimized the final visual design for quick scrolling and scanning for the variety and amount of data presented. Some elements were changed in position from the wireframes to optimize its effectiveness with added the styling.

Menu Icon: Based on the user feedback, the star icon with the number within was difficult to understand (e.g. was it number of followers?). We changed it to the widely understood menu icon that communicates a place where the user would find navigational or additional screens related to this screen. It is unimportant at this moment and place within the app for the user to know how many locations they have followed (which was the intention of the number within the star).

Location: The location information from the bottom of the screen in the wireframes was moved to another screen to consolidate all location information and functionality such as following, renaming, and editing into one area. That would also simplify the weather information screen to only weather data, making it simpler and easier to read and understand.

Time: From user feedback, "5 min ago" in the top header bar was not a reliable time reference because the OS time bar had been removed. We changed the data time to hour and minutes intead.

Sharing: The share functionality was placed directly on the image for user convenience.

Information Contexts: From user feedback, we learned that "↓ 6° fr mon" was difficult to understand, and the sunrise and sunset icons being the same makes the information difficult to differentiate. To address the feedback, we added more context to the weather temperature time reference, as well as changed the icons. In addition, we added unit references to UV and air pressure data so users can better understand what those numbers mean.

Black Header for Spatial Recognition: The black background for the top header adds to the spatial concept of layers being related to time. The "blank" background is darker, visually-receding, empty space that allows for the timelapse screen to appear when the user scrolls up, which is "in back" of the other cards and also backwards in time.

Colors for Focus: From user feedback, colors did not help focus information (e.g. why do low temperatures in weekly forecast have more focus?). To address the feedback, we used the careful placement of blue and red to not only aid in temperature recognition, but to also define highs & lows and bring focus to information (e.g. using blue to highlight the current screen on the tab navigation at the bottom). In addition, users noticed the forecast section is not strongly separated from other data, making it hard to find during a quick scan, so we used a different background color for the forecast section.

Card Motif: Each data group is placed on a separate card to create clear visual organization for quickly scrolling and scanning dense information. Present weather data is grouped together on the white card and further separated by using rectanglar background sections. Forecasted future weather data is grouped together on the black card and further separated as well. A slight gradient on the forecasted information shows the user that they can scroll horizontally to view more data.