Mobile App | Weather | Product Design | Data Visualization
Collaborated in the Designing of the FOX Weather App & Website. Provided design guidance as a member of the leadership team and developed creative solutions to various aspects of the product.
The FOX Weather app was built on an app we aquired called Weatherline. The challenges were first, taking an existing structure and applying a more visually appealing design; second, finding a way to toggle between multiple locations non-consecutively; and third, designing a cohesive user experience for weather details on an hourly, daily and historical levels.
Once the data organization was complete, there was one last piece of data I felt needed a better visualization method: the high and low temperatures for a location. Normally, when you hear daily temperatures, you most often hear with a high of X and a low of Y. Though the data-points contain the standard visualization method of up and down arrows, I felt that wrapping them around the current temperature data-point gives context to all the temperature values by sorting them from left to right, increasing in temperature.
Showing four variations of the home tab depending on the data you are viewing. From left to right: Hourly Weather; 14-Day Weather for day and night; Historical weather showing the monthly highs and lows; Precipitation Graph view.
Once the home tab was designed and was cleared to be developed, I created color themes for every weather condition supported. The design system applies to multiple weather conditions for both daytime and nighttime. An important consideration in chosing colors was making sure they are accessibility compatable with the text objects over them.
Some of the color themes from the design system for the weather conditions.
Arguably one of the most important, and challenging design features of the FOX Weather app was designing the background illustrations of all weather conditions. Without them, it would be slower (marginally) to comprehend the weather condition that is occuring in your location. After many explorations of illustrataion style, ultimately it was decided to go with a realistic approach. Each weather illustration is tied to a certain weather theme to provide the most pleasing visual experience. Certain conditions from the weather illustration set have a variety of images to pick from so the experience is somewhat unique everytime a user sees that certain condition.
Examples of some of the weather conditions including Partly Sunny (Day), Mostly Cloudy (Night), and Cloudy (Day).
Multiple locations are a main feature of the FOX Weather app. We allow users to save, edit and manage their locations within the app. As this is one of the main interactive features, my goals were to make this as intuitive as possible. I tried to incorporate iOS best practices along with keeping the design consistent.
Main screens from the location management experience.