Severe Weather App & Responsive Website Case Study

Overview

This project - consisting of an app and a responsive website - was designed for the greater good, with the goal of helping users prepare for, receive updates on, and respond to severe weather. Features include current weather and alerts, preparedness information, and an item exchange and access to a community - which includes local events and groups - to facilitate local support and cooperation before, during, and in response to severe weather events.


Understanding the User

User Research Summary

I used a survey to gain an understanding of user's feelings, actions, and experience of severe weather. I assumed users would want help accessing essential items after severe weather, but research clarified that users primarily wanted weather alerts and preparedness information instead.

User Pain Points

  • Stress - responding to severe weather is stressful for users
  • Speed - users need to find information quickly during fast changing events
  • Updates - users want real-time, official weather updates
  • Community - users can feel cut off from community during severe weather

    • Personas and User Journey Maps

    I made two personas - Trisha and Fred - to represent the users based on my research. Trisha represents a professional with a family who wants to take care of loved ones during severe weather, while Fred is a student who's alone and needs resources and connection.

    I wanted the product to support both of these user groups equally well, and not focus solely on either one, to be sure it helps as many people as possible.







    Starting the Design

    Competitive Audit

    I completed a competitive audit and summarized the results in a report. I found that search and filter options, a moderate amount of information, good accessibility, and access that isn't limited by a subscription would benefit users most.

    Rapid Sketching

    Doing crazy eights exercises allowed me to explore lots of content and design ideas quickly.





    User Flow Diagrams

    I created to separate user flow diagrams to explore the ways my two separate personas might use the app/website.





    Paper Wireframes

    I drew paper wireframes for the app and website designs, being sure to include essential features like alerts, current weather, and suggested reading. Since the website is responsive, I sketched out desktop and tablet sized versions as well.









    Digital Wireframes

    I transformed the paper wireframes into digital wireframes in Figma, focusing on the app design first, as users may frequently be using a mobile device in responding to severe weather.



    The home screen focuses on current weather and alerts, as per user research, with some suggested content.



    The weather screen allows users to see current weather and a forecast at a glance.



    The prepare section offers information resources so users can know what to do before severe weather arrives.



    Since this website is responsive, I made wireframes for varied sizes of screens.



    The add listing screen allows users to offer items to help others.



    Groups enable users to find community near them so they can build or contribute to a support network.

    Low-Fidelity Prototypes

    After completing the digital wireframes I connected the views for the app and website prototypes in Figma to create low-fidelity prototypes.



    View App Prototype



    View Website Prototype

    Testing

    Usability Studies

    I conducted a usability study with the low-fidelity prototype of the app design, as testing an app in Figma more closely resembles real-life use (there is no native browser experience for testing websites in Figma).

    Round 1 Findings
  • Users were confused by the Prepare, By Weather Type, and Resources section names
  • Adding an item listing was not intuitive for users
  • Users expected to be able to tap more images
  • Users thought the Alerts view lacked relevant information

    • I condensed feedback from the notes I took during the usability study into an affinity diagram, in order to identify themes and patterns.

    Refining the Design

    Mockups

    As part of overall changes to the app/website design, I made more images tappable/clickable.



    The title of the Prepare section was unclear to users, so I renamed it to Information. I similarly changed By Weather Type to Weather Types and Resources to Exchange to better convey meaning.



    Users found adding a listing as a means to share items unclear. I changed the wording to share items and request items instead to increase clarity.



    Users wanted more relevant, useful information from alerts, so I removed national alerts here.

    Website Low-Fidelity Mockup



    High-Fidelity Prototypes

    I created high-fidelity prototypes for both the app and website, making an equivalent experience for consistency.



    View App Prototype



    View Website Prototype

    Revisiting the Design

    Review

    Upon revisiting this project, it became clear to me that the initial visual design I created was not suited to the purpose of the product. While the colors were accessible, they communicated a playfulness that is not appropriate to an app and website for responding to severe weather, a sometimes devastating event.

    I reworked the visual design to incorporate color, but to do so in a more subtle way with a cleaner, more content-focused design that is not distracting.

    Refining the Design

    Mockups



    A gentle gradient shows the connection between the location and current alerts.



    Simple, bold headers allow users to find what they need quickly without distractions.



    The visual styling of the location and alerts carries over here.



    Font style and weight communicates visual hierarchy here.

    View App Prototype



    A modular layout makes this information heavy screen easier to scan.



    Whitespace helps distinguish the sections of this screen for easy reading.

    View Website Prototype

    Accessibility Considerations

    One accessibility consideration I made was to create a color palette that was tested for contrast accessibility, so it will be accessible for individuals who have colorblindness or visual impairments. I also added a language option in the user settings so a user can select the language they'd prefer to use the app or website in. Lastly, I included options for users to receive alerts on their device through any combination of sound, visual, and haptic notifications, so they can be notified in a way that works best for them.

    Going Forward

    Takeaways


    Next Steps

  • Conduct a second usability study with one of the high-fidelity prototypes, and make changes based on user feedback to ensure the design is as intuitive as possible.
  • Review the app for any areas where accessibility considerations are missing, and remedy those situations.
  • Complete more tablet and phone sized versions of the website design, to account for the variety of experiences a user might have and complete the responsive website design.


    • Thank you for reviewing my case study!

    If you would like to get in contact with me, please use the information listed in the footer below.

    Back to UX