1st Place Hackathon Winner:
Cloudy with a Chance of Chaos Probability

Preparing you for ecological disasters (with a bit of humor)

1st Place Hackathon Winner:
Cloudy with a Chance of Chaos Probability

Preparing you for ecological disasters (with a bit of humor)

1st Place Hackathon Winner:
Cloudy with a Chance of Chaos Probability

Preparing you for ecological disasters (with a bit of humor)

Role

Role

Role

UX Researcher
UX/UI Designer
Team Lead

UX Researcher
UX/UI Designer
Team Lead

UX Researcher
UX/UI Designer
Team Lead

Timeline

Timeline

Timeline

1-wk sprint, October 2024

1-wk sprint, October 2024

1-wk sprint, October 2024

Tools

Tools

Tools

Figma
FigJam
Adobe Contrast Checker
Stark Accessibility Tools

Figma
FigJam
Adobe Contrast Checker
Stark Accessibility Tools

Figma
FigJam
Adobe Contrast Checker
Stark Accessibility Tools

Methods

Methods

Methods

User Interviews
SWOT Analysis
Affinity Mapping
Problem Statement
Solution Statement

User Interviews
Heuristic Evaluation
Affinity Mapping
Persona
Impact Mapping
Problem Statement
Solution Statement
Task Flow
Site Mapping
C&C Analysis
Feature Prioritization
Wireframing
Prototyping
Usability Testing

User Interviews
Heuristic Evaluation
Affinity Mapping
Persona
Impact Mapping
Problem Statement
Solution Statement
Task Flow
Site Mapping
C&C Analysis
Feature Prioritization
Wireframing
Prototyping
Usability Testing

Site Mapping
C&C Analysis
Wireframing
Prototyping
Usability Testing

Atmospheric (High-Level) Insights

Atmospheric (High-Level) Insights

Atmospheric (High-Level) Insights

We won the General Assembly Envirobuild hackathon! 🌱

I led a team of 3 developers + 3 designers from non-traditional backgrounds to build a fully responsive app using real-time geolocation data.

🌩️ Our most urgent user need: Ecological disaster-prep alerts.

🌪️ Our greatest challenge: We started our 1-week competition with only 1 dev + 2 designers assigned to our team. So it was crucial to realign and rescope our MVP as we grew to 6 members.

💥 Judges praised our powerful storytelling about overcoming this hurdle, our usability testing, and how we conveyed data in a fun quippy way.

🌟 Dev celebrations to share:

Zeke led the creation of back-end data structures with Next.js + Typescript
Brian identified a comprehensive API for persistent data pulls and calculated AQI from a series of pollutant types

🩵 As designers, Lac Nhi and Jaimee partnered with me in

•  Converting 7 interviews into robust affinity map trends
•  Shaping info architecture and Gamaliel’s accordion menus with competitive and SWOT analyses
•  Testing our app’s intuitiveness (1.3 avg misclicks!)

My favorite personal contribution was writing the quippy descriptions for our geolocation data thresholds, especially the alien invasion ones. 💛

Explore our deployed project: https://water-wars-psi.vercel.app/

We won the General Assembly Envirobuild hackathon! 🌱

I led a team of 3 developers + 3 designers from non-traditional backgrounds to build a fully responsive app using real-time geolocation data.

🌩️ Our most urgent user need: Ecological disaster-prep alerts.

🌪️ Our greatest challenge: We started our 1-week competition with only 1 dev + 2 designers assigned to our team. So it was crucial to realign and rescope our MVP as we grew to 6 members.

💥 Judges praised our powerful storytelling about overcoming this hurdle, our usability testing, and how we conveyed data in a fun quippy way.

🌟 Dev celebrations to share:

Zeke led the creation of back-end data structures with Next.js + Typescript
Brian identified a comprehensive API for persistent data pulls and calculated AQI from a series of pollutant types

🩵 As designers, Lac Nhi and Jaimee partnered with me in

•  Converting 7 interviews into robust affinity map trends
•  Shaping info architecture and Gamaliel’s accordion menus with competitive and SWOT analyses
•  Testing our app’s intuitiveness (1.3 avg misclicks!)

My favorite personal contribution was writing the quippy descriptions for our geolocation data thresholds, especially the alien invasion ones. 💛

Explore our deployed project: https://water-wars-psi.vercel.app/

We won the General Assembly Envirobuild hackathon! 🌱

I led a team of 3 developers + 3 designers from non-traditional backgrounds to build a fully responsive app using real-time geolocation data.

🌩️ Our most urgent user need: Ecological disaster-prep alerts.

🌪️ Our greatest challenge: We started our 1-week competition with only 1 dev + 2 designers assigned to our team. So it was crucial to realign and rescope our MVP as we grew to 6 members.

💥 Judges praised our powerful storytelling about overcoming this hurdle, our usability testing, and how we conveyed data in a fun quippy way.

🌟 Dev celebrations to share:

Zeke led the creation of back-end data structures with Next.js + Typescript
Brian identified a comprehensive API for persistent data pulls and calculated AQI from a series of pollutant types

🩵 As designers, Lac Nhi and Jaimee partnered with me in

•  Converting 7 interviews into robust affinity map trends
•  Shaping info architecture and Gamaliel’s accordion menus with competitive and SWOT analyses
•  Testing our app’s intuitiveness (1.3 avg misclicks!)

My favorite personal contribution was writing the quippy descriptions for our geolocation data thresholds, especially the alien invasion ones. 💛

Explore our deployed project: https://water-wars-psi.vercel.app/

Apocalypse Prep

Ecological catastrophe has became a near constant just in the U.S. with Hurricane Helene (Sept. 2024), and Hurricane Milton and chemical fires in Georgia (Oct. 2024).

Just last month, the Eaton and Palisades Fires demolished Altadena, Pacific Palisades, Topanga, and Malibu.

Our users are not prepared for ecological disaster.

Interviewees in Need of Disaster Prep: Affinity Map Trends

Interviewees in Need of Disaster Prep: Affinity Map Trends

Interviewees in Need of Disaster Prep: Affinity Map Trends

7/7 of our users share the same top 3 concerns — natural disaster alerts, air quality, and precipitation.

5/7 of our users do not do much preparation for disasters.

5/7 of our users prefer their phone weather app because it has many features.

7/7 of our users share the same top 3 concerns — natural disaster alerts, air quality, and precipitation.

5/7 of our users do not do much preparation for disasters.

5/7 of our users prefer their phone weather app because it has many features.

7/7 of our users share the same top 3 concerns — natural disaster alerts, air quality, and precipitation.

5/7 of our users do not do much preparation for disasters.

5/7 of our users prefer their phone weather app because it has many features.

Challenges at the Start

Challenges at the Start

Challenges at the Start

Starting with only 1 developer and 2 designers, we opted for a non-traditional UX process.

Starting with only 1 developer and 2 designers, we opted for a non-traditional UX process.

Starting with only 1 developer and 2 designers, we opted for a non-traditional UX process.

Solutions within Constraints

Solutions within Constraints

Solutions within Constraints

To secure an MVP, our team of 3 agreed upon a lo-fi prototype.

Our developer began building it during our designers’ data collection.

To secure an MVP, our team of 3 agreed upon a lo-fi prototype.

Our developer began building it during our designers’ data collection.

To secure an MVP, our team of 3 agreed upon a lo-fi prototype.

Our developer began building it during our designers’ data collection.

C+C Analysis of Popular Ecological Resources

We analyzed four popular system monitoring apps (Plume Labs, IQAir, Apple Weather, and AirCare) and identified the features they exemplified:

  • global data coverage

  • data accuracy (notably health-related)

  • affordability

  • mobile-web compatibility

With the limits of our hackathon and 6-person team, we acknowledged that we wouldn't be able to create a project that could compete directly with these companies' apps, especially not Apple Weather — which had become a go-to for iPhone users just by being native to the device.

However, these apps all provided our users a similar range of data (such as UV index, air quality, and precipitation) so we considered this a baseline goal.

Our Concerning Forecast

Our Concerning Forecast

Our Concerning Forecast

Users across various locations often face difficulties in accessing critical environmental information, especially during unexpected events such as natural disasters.

There is a need for an efficient system that not only provides timely alerts but also educates users on disaster preparedness.

Therefore, users need a convenient way to access time-sensitive data on natural disasters, air quality, and precipitation in real-time.

Users across various locations often face difficulties in accessing critical environmental information, especially during unexpected events such as natural disasters.

There is a need for an efficient system that not only provides timely alerts but also educates users on disaster preparedness.

Therefore, users need a convenient way to access time-sensitive data on natural disasters, air quality, and precipitation in real-time.

Users across various locations often face difficulties in accessing critical environmental information, especially during unexpected events such as natural disasters.

There is a need for an efficient system that not only provides timely alerts but also educates users on disaster preparedness.

Therefore, users need a convenient way to access time-sensitive data on natural disasters, air quality, and precipitation in real-time.

Designers x Developers Collaborating for the First Time

Designers x Developers Collaborating for the First Time

Designers x Developers Collaborating for the First Time

Simply recreating a weather app was unlikely to win us the competition. We wanted a challenge that we could overcome with hard-won collective pride.

This was true for both our designers and developers. As our designers unearthed user needs and our developers built data structures in the backend, we began to diverge in efforts.

As team lead, I held all-team meetings and meetings the developers and designers separately, upgrading my understanding of the engineering process and sharing gems with the designers.

But it became clear that a week wasn't enough to fit both the intensive research and design process and the complexity of building a fully-functional app.

Simply recreating a weather app was unlikely to win us the competition. We wanted a challenge that we could overcome with hard-won collective pride.

This was true for both our designers and developers. As our designers unearthed user needs and our developers built data structures in the backend, we began to diverge in efforts.

As team lead, I held all-team meetings and meetings the developers and designers separately, upgrading my understanding of the engineering process and sharing gems with the designers.

But it became clear that a week wasn't enough to fit both the intensive research and design process and the complexity of building a fully-functional app.

Simply recreating a weather app was unlikely to win us the competition. We wanted a challenge that we could overcome with hard-won collective pride.

This was true for both our designers and developers. As our designers unearthed user needs and our developers built data structures in the backend, we began to diverge in efforts.

As team lead, I held all-team meetings and meetings the developers and designers separately, upgrading my understanding of the engineering process and sharing gems with the designers.

But it became clear that a week wasn't enough to fit both the intensive research and design process and the complexity of building a fully-functional app.

The Reckoning

When we finished synthesis and our prototype skeleton, we faced a major yet expected blocker:

With the sudden growth of our team to 6, we needed to realign and rescope.

Our designers and developers were essentially building towards two different prototypes.

Aligning upon Feasible MVP

Aligning upon Feasible MVP

Aligning upon Feasible MVP

We discussed the feasibility of integrating our research deliverables,

  • affinity map trends

  • competitive + SWOT analyses

into the engineering constraints of

  • data persistence

  • geolocation data thresholds

  • building functional components

  • overall adapting to different team members’ processes

The solution? Iterate upon the functional prototype with content design before usability testing.

We discussed the feasibility of integrating our research deliverables,

  • affinity map trends

  • competitive + SWOT analyses

into the engineering constraints of

  • data persistence

  • geolocation data thresholds

  • building functional components

  • overall adapting to different team members’ processes

The solution? Iterate upon the functional prototype with content design before usability testing.

We discussed the feasibility of integrating our research deliverables,

  • affinity map trends

  • competitive + SWOT analyses

into the engineering constraints of

  • data persistence

  • geolocation data thresholds

  • building functional components

  • overall adapting to different team members’ processes

The solution? Iterate upon the functional prototype with content design before usability testing.

Our Proposed Digital Solution

Our Proposed Digital Solution

Our Proposed Digital Solution

Our app provides real-time location-based data on ecological changes, alerting and preparing our users during natural disasters by offering step-by-step guidance.

By prioritizing minimalism and convenience, the platform will ensure that critical information is easily accessible on multiple devices, so that users can make informed decisions and stay safe in potentially high-stress situations.

Since ecological disasters are becoming more and more prevalent, our app additionally provides some fun irreverent content design for a unique market edge.

Our app provides real-time location-based data on ecological changes, alerting and preparing our users during natural disasters by offering step-by-step guidance.

By prioritizing minimalism and convenience, the platform will ensure that critical information is easily accessible on multiple devices, so that users can make informed decisions and stay safe in potentially high-stress situations.

Since ecological disasters are becoming more and more prevalent, our app additionally provides some fun irreverent content design for a unique market edge.

Our app provides real-time location-based data on ecological changes, alerting and preparing our users during natural disasters by offering step-by-step guidance.

By prioritizing minimalism and convenience, the platform will ensure that critical information is easily accessible on multiple devices, so that users can make informed decisions and stay safe in potentially high-stress situations.

Since ecological disasters are becoming more and more prevalent, our app additionally provides some fun irreverent content design for a unique market edge.

A Bit of Sunshine Amidst the Clouds

We found collective joy in including alien activity amongst our familiar weather app panels, as well as developing disaster prep guides for users personalized to their location.

Our Dev Team's Technical Challenges

Our Dev Team's Technical Challenges

Our Dev Team's Technical Challenges

Our developers prioritized a consistent, seamless collaboration despite the tight timeline and using frameworks new to them (ex. Next.js). They conquered challenges such as:

  • Building in Typescript with a disparate team (complex type alignment!)

  • Arriving at a backend data structure that accommodated their separately developed components

  • Adapting to component hydration and state updates

  • Experimenting with 5-6 APIs until finding one (Weather API) that covered all the data we needed for alerts and forecast details

  • Converting different pollutant types and mapping their concentrations to AQI breakpoints for an accurate total calculation

Notably, they managed state with React so that our app pulled data personalized to a user's geolocation (whether entered by the user or given through location permissions), without making a costly number of API calls per second.

Attributions

  • Open Weather API

  • reCharts

  • claude/anthropic

  • microsoft/copilot

Post-Usability Insights

Post-Usability Insights

Post-Usability Insights

Despite our week-long sprint, we conducted 6 usability tests, ultimately winning us the hackathon with our commitment to a user-focused design.

  • Our Speed Test Metrics Indicating Our App's Intuitiveness:

    • 1.3 average misclicks

    • 13-30s completion of all 4 tasks (navigating all pages)

  • Our Most Salient Trends:

    • 5/6 users like the convenience of a native app compared to a web app

      • (ex: data storage, location recognition, and personalization)

    • 4/6 users enjoyed the personality of the short descriptions

    • 3/6 users thought the dashboard cards were clickable

What's Next?

What's Next?

What's Next?

We won the hackathon but are committed to improving the design beyond what we could deliver in just one week. Our judges lauded us for providing more accessible descriptions and interpretations of weather details than our competitors, but we want to be more intentional with our accessibility, given we now have more time.

Knowing that disabled communities are hit the hardest by ecological disasters, we decided to expand our real-world community impact by collaborating with experts in climate resilience:

  • a university professor who recently completed a federal policy fellowship on disaster mental health and has closely collaborated with CA’s Office of Disability for their Emergency Management Office

  • Partnership for Inclusive Strategies, which provides financial, housing, food/water, transportation, and administrative aid (ex. FEMA registrations and appeals) to disabled and aging communities navigating ecological disasters and their devastating fallout

Together, we can leverage our growing technical expertise to amplify their efforts and protect our marginalized communities during disasters.

Case Studies