Weather Section | Mobile App Design for Environmental Monitoring
Comprehensive Weather and Disaster Monitoring/Alert System
Overview (Hackathon Project)
Weather Section is a comprehensive tool designed for users to monitor weather metrics and disaster situations within selected locations. The app allows users to automate custom alert preferences for each area, environmental parameter, and alert channel. While Weather Section functions as a clear and reliable way to access common weather forecasting data, it differentiates itself from similar products by integrating critical insights related to disaster events and offering an intuitive yet flexible alert system.
The project was developed during the week-long General Assembly 2024 Fall EnviroBuild Hackathon.
Role
Product Designer
Team
Researcher
Project Manager / Back-End Developer
Front-End Developer
Back-End Developer
Timeline
September 2024 - October 2024 | 1-Week Sprint
Tools
Figma, FigJam
Hackathon Kickoff
General Assembly 2024 Fall EnviroBuild Hackathon
From September 30 to October 7 of 2024, I participated in General Assembly’s 2024 Fall EnviroBuild Hackathon, an event held for the organization’s alumni to practice design and development skills while gaining cross-functional experience.
Participants were assigned the following task:
“Develop an environmental monitoring system that collects, stores, and visualizes environmental data in real-time to monitor ecological changes. The system should feature an interactive dashboard for users to view data visualizations and receive alerts when significant changes occur, such as shifts in air quality or temperature.”
Team Alignment and Direction
I was placed on a team with four other members, including another designer and three developers, all of whom I was meeting for the first time. After briefly introducing ourselves, we immediately began the project by assigning roles to each member, organizing a working timeline, and exploring potential product ideas.
While many possibilities were considered for the direction of the assignment, the team ultimately gravitated towards the idea of enhancing fire disaster awareness for users. Building on this concept, we identified two key concerns that shaped our next steps:
First, we worried that building a product focused solely on fire awareness might be too restrictive. Since only certain regions of the world regularly experience fire disasters, such a narrow focus could limit the product’s appeal to a smaller user base. Additionally, the team felt that there was enough time to take on a broader scope, so we entertained the prospect of including more general weather monitoring capabilities.
Second, we were uncertain about which specific features and data the final product could include due to the limitations of the free APIs available to our developers.
We decided that the designers would proceed with user research and competitive analysis on apps related to weather monitoring and fire awareness, while the developers explored various relevant APIs to determine the product’s technical constraints.
Research
On account of the project’s seven day timeline, the design team hurried to gather adequate data through methods we believed would yield the best quality within the limited amount of time allocated to research. Although I was not the primary researcher for this project, I was tasked with conducting a user interview with our team’s design mentor and contributing to competitive analysis.
User Research
Our user research involved two user interviews. Unfortunately, neither interview subjects had any significant experiences involving fire disasters. However, we were able to gather the following insights regarding general environmental monitoring habits and challenges:
Users preferred a comprehensive platform to meet all of their environmental monitoring needs, rather than having to install multiple apps to track various metrics.
Users emphasized the need for a more flexible and reliable alert system. It was important for them to stay informed about any significant changes in the environment without being overwhelmed by excessive or irrelevant notifications.
Personally, there was one particular user anecdote that I found myself referencing throughout the design process:
“Last week, there was some sort of chemical pollutant leak in the air near where I live. I walked my kids to school that morning before hearing the news, but if I had known earlier about the hazard, I would have opted to drive them.”
These interviews revealed that any given area faces its own unique set of environmental challenges, and it is impossible for a person to account for significant changes in an environment without assistance. This issue is exacerbated for individuals who may travel frequently, have loved ones in different places, or manage multiple properties across various locations, as they need to remain aware of the conditions in several areas simultaneously.
Competitive Analysis
Three mobile apps were studied for competitive analysis. I began by consulting a number of Reddit forums to understand which apps were the most popular with our target audience. For weather monitoring, Apple’s Weather and CARROT Weather were by far the most mentioned platforms. For fire monitoring, we referenced Watch Duty.
The dashboards from the two weather monitoring apps feature nearly identical interface designs. Following the same style, both apps establish a clear hierarchy of information and group related information within cards, making it easy for users to navigate and digest content.
Dashboards in Apple’s Weather (left) and CARROT Weather (right)
Compared to Apple’s Weather, CARROT Weather offers more utility.
CARROT Weather features a horizontal scrolling menu that allows users to filter through available weather metrics by dynamically updating dashboard content.
Filtering through metrics from “Temp” to “Precip Chance” in CARROT Weather
CARROT Weather allows users to customize their dashboard with both custom and preset layouts, enabling individuals to establish a personal information hierarchy by prioritizing specific metrics according to their needs.
“Customize Layout” button located at the bottom of the dashboard (left) and “Layout” settings page (right) in CARROT Weather
Users are able to receive weather alerts from both Apple’s Weather and CARROT Weather. However, notifications from Apple’s Weather provides very little flexibility with only “Severe Weather” and “Next-Hour Precipitation” as alert options per location. CARROT Weather locks this feature behind a paywall.
“Notifications” settings in Apple’s Weather (left) and CARROT Weather (right)
We examined Watch Duty to understand how competitors promote fire awareness.
The app features a detailed map view designed to provide users with a real-time visual representation of ongoing fires. It also includes incident details for each report, providing information on a fire's behavior, associated risks, and steps users may need to take to protect themselves and their property.
Dashboard in Watch Duty
Research Synthesis
To help our users stay informed and safe amid unpredictable environmental complications, we decided our product should be a comprehensive platform that consolidates both weather and disaster information into a single, intuitive mobile app. Given that the platform would manage a vast array of environmental data, we aimed to prioritize personalization in its design, allowing users to easily access and receive alerts about information most relevant and critical to the individual.
Moving into the design process, we aimed to incorporate as many insights from our competitive analysis as possible while keeping time and development constraints in mind. For the interface, I looked to the design principles established by Apple’s Weather and CARROT Weather. I reasoned that if two leading weather apps utilize such similar interface structures, there was little need to deviate significantly in our design. Additionally, we wanted to implement some of the practical features of CARROT Weather and Watch Duty to provide an effective and intuitive experience when interacting with content. Finally, I noted that the apps we reviewed lacked a dependable notification feature, so we focused on optimizing our product's alert system for greater individualization.
Design
About Weather Section
Weather Section is a comprehensive tool designed for users to monitor weather metrics and disaster situations within selected locations. The app allows users to automate custom alert preferences for each area, environmental parameter, and alert channel. While Weather Section functions as a clear and reliable way to access common weather forecasting data, it differentiates itself from similar products by integrating critical insights related to disaster events and offering an intuitive yet flexible alert system.
The app’s name and branding draw inspiration from the weather reports typically found in monochrome print newspapers. In addition to delivering detailed weather metrics, Weather Section embraces this newspaper theme as a modern way to receive essential environmental updates—much like how physical newspapers deliver current events directly to homes.
Dashboard
Weather Section’s dashboard is made up of a top app bar, main display, and various cards. The top app bar contains a navigation icon, logo, and search functionality. The main display houses information on the selected location and focused weather metric, a background graphic, and a horizontal scrolling menu. Following the main display are cards to group related content.
Dashboard in Weather Section
The horizontal scrolling menu allows users to filter information by various weather metrics, dynamically updating the main display and relevant cards to reflect the selected focus.
Dashboard content responding to the focused filter
The "Fires" card alternates between an idle and active state. In the idle state, it indicates that there are no active fires in the area and presents a report on the most recent local fire incident. In the active state, it alerts users to a nearby active fire, displaying a map for visualizing proximity along with a regularly updated report.
“Fires” card in the idle state (left) and active state (right)
Although Weather Section is intended to manage data and alerts for all environmental disasters, we chose to focus exclusively on fires to properly showcase the product’s functionality within the time constraints of a week-long hackathon. In a fully realized version of Weather Section, dedicated cards and pages would be designed to function for different disaster categories, such as earthquakes, hurricanes, and more.
Navigation Drawer
Weather Section’s navigation drawer can be opened by tapping the navigation icon found in the top app bar.
The navigation drawer is used to access different “Locations” pages, featuring the user’s current location labeled as “My Location” at the top, followed by their saved pages and an option to “Add New Location.” The user can assign custom names to these saved pages, which operate using a provided city, zip code, or address. If the user chooses not to use a custom name, the page is automatically named after the location’s city. To indicate any irregular conditions in a listed area, an exclamation icon appears to the right of the affected page.
The navigation drawer also includes access to the “Profile” and “Alerts” pages, where users can edit personal information and adjust settings.
Navigation drawer in Weather Section
Alerts
When users open the "Alerts" page from the navigation drawer, they are met with a card listing their “Locations” pages. After selecting a page, the environmental parameters for that area are organized into two categories: “General Weather” and “Natural Disasters.” Alerts via “Push Notifications,” “SMS,” and “Emails” can be toggled for each environmental parameter within their respective pages. While push notifications are managed directly within the app, the “SMS” and “Emails” options require users to provide a phone number or email address through the “Profile” page under “Settings” in the navigation drawer.
Configuring alerts in Weather Section
When a significant change is detected for an active environmental parameter, Weather Section promptly notifies users through their selected alert channels. Upon opening the app for the first time after a hazard alert is issued, users encounter an alert overlay instead of the usual dashboard to communicate urgency.
Push notification (left) and alert overlay (right) in Weather Section
For pages with an active hazard alert, a banner containing a brief alert description appears at the top of the dashboard. Tapping the banner directs users to a separate page with detailed information on the hazard alert.
Fire alert banner displayed at the top of the dashboard
The goal of the product’s alert function is to be both intuitively flexible and highly reliable, addressing the user’s need for an adaptable alert system that keeps them informed of significant environmental changes without overwhelming them with excessive or irrelevant notifications.
Usability Testing
I conducted a usability test with our team’s design mentor using a Figma prototype to identify areas for improvement in our design. Ideally, multiple tests with different participants would have been performed to gather more reliable data, but the time constraints of a week-long hackathon made it difficult to run more than one.
In the usability test, our participant was able to complete all assigned tasks with no errors and relative ease. However, their feedback on the prototype’s initial design highlighted two significant aspects of the app that could be further refined.
Sizing Cards
The user expressed frustration with the large size of Weather Section’s “10-Day Forecast” card, noting that they would rarely open the app to view weather metrics so far in advance. They felt the card took up excessive screen space, adding unwanted friction to the user experience when scrolling to view content further down the dashboard or when trying to inspect multiple cards at once.
To address this concern, I converted the initial “10-Day Forecast” card into a collapsable component. This design change allows users to expand or collapse the card as needed, reducing visual clutter while still providing access to important information.
“10-Day Forecast” card initial design (left) and redesign (right)
Configuring Alerts
Weather Section’s alert system configuration was initially designed as a single-page layout for simplicity. However, feedback from the usability test revealed that this approach was too limited and did not adequately address user concerns about being overwhelmed by excessive or irrelevant notifications.
At the time of testing, the “Alerts” feature was presented as a single page where users could toggle notifications for each alert channel and parameter. While this design was straightforward and intuitive, it fell short of the flexibility we had originally intended. In this state, the app would send alerts for selected parameters from every “Locations” page to all chosen channels, rendering the system unfit for users to effectively manage the volume of notifications received.
“Alerts” at the time of usability testing
The “Alerts” feature was redesigned as a three-step process to give users precise control over their notifications from Weather Section. In the final design, each “Locations” page contains its own set of alert parameters, and each parameter includes individual toggles for the three different alert channels. This iteration maximizes personalization for edge case users who need to stay informed about multiple parameters across various locations by taking advantage of all the alert channels, while still maintaining enough clarity for the majority of the user base.
“Alerts” redesigned with usability testing feedback
Final Thoughts
With More Time
Despite the time constraints of this hackathon, which required our team to adjust the project’s scope on multiple occasions, I couldn’t help but envision the full potential of Weather Section if it were a real product. With more time, I would enhance Weather Section’s functionality, branding, and accessibility to create a more comprehensive, user-centered experience through the following steps:
To complete the app’s intended function, I would design additional cards and dedicated pages for a wider range of weather metrics and natural disasters, such as earthquakes, floods, and hurricanes. Each card would offer unique information tailored to the specific event type and incorporate real-time data feeds. The aim would be to ensure that users receive critical updates across various environmental conditions in a single interface, making Weather Section an all-encompassing tool for environmental monitoring.
Inspired by CARROT Weather, I would develop options for custom dashboard layouts, enabling users to prioritize specific information based on their needs. Users could drag and reorder cards or choose between preset layouts for different focus areas. This level of customization would allow users to build a personal hierarchy of information, making their experience with the app even more intuitive and relevant.
To reinforce the newspaper-inspired theme, I would incorporate a set of custom icons and graphical elements, drawing from vintage print aesthetics to convey reliability and immediacy. These icons could represent different types of disasters or weather metrics, giving the app a more cohesive, memorable brand identity. Adding subtle textures and a unique color palette would further reflect the classic newspaper feel, setting Weather Section apart as both visually engaging and informative.
Ensuring accessibility would be essential in a fully developed version of Weather Section. I would run comprehensive accessibility checks, focusing on screen reader compatibility, color contrast, and clear, large font sizes for readability. Additionally, I would include options for users to customize alert sounds and use haptic feedback for notifications, which would benefit individuals with hearing or vision impairments. By conducting these checks, Weather Section would be a more inclusive tool, accessible to all users regardless of ability.
Growing as a Designer
Working under time and development constraints challenged me to make quick, effective design decisions, balancing user needs with what was feasible within a week. Collaborating closely with developers gave me hands-on experience in understanding technical limitations and aligning our goals to create a cohesive product under pressure. This experience strengthened my respect for clear communication and adaptability within a cross-functional team.
Presenting Weather Section taught me the importance of clearly communicating the testing process. Although I initially felt that usability testing was not essential to include in our presentation due to a ten minute time limit, the judges interpreted its absence as a lack of testing, which was disappointing since our team had conducted testing that meaningfully improved our design. This feedback reinforced the importance of sharing our testing efforts and findings, no matter the time constraints, as they demonstrate a thoughtful, user-centered approach. Additionally, the judges emphasized the significance of accessibility testing, which we hadn’t incorporated. Their comments highlighted the importance of prioritizing accessibility checks, a lesson I’ll carry forward in future projects.
Reflecting on this experience, I realize how much I’ve grown in balancing design quality with time efficiency and in understanding the importance of transparency around testing and accessibility. I look forward to participating in future hackathons, where I can continue refining my skills, deepening my understanding of inclusive design, and applying a more user-centered approach at every stage of the process.
Thank You For Reading!