People suffering from Hurricane Ida. August 20, 2021. Louisiana. Photo by https://prismreports.org/

Hurricane Warning Web App

Introduction

Q-risq is a hurricane weather forecasting company based in Slidell, LA.
Q-risq provides hurricane predictions in advance thanks to distributed geospatial analytics engines on big data.

Client’s Problem

The client approached us with an existing MVP product with hundreds of active Louisiana-based users. User feedback indicated potential usability and UI issues, but stakeholders struggled to articulate problems clearly.

Challenge

• Communicate poor UX to stakeholders,
• Prioritize the issues,
• Design and test the solutions in a tight timeline (6 weeks).

Impact

• Communicate poor UX to stakeholders,
• Prioritize the issues,
• Design and test solutions within a tight timeline.

Team

• Project Manager,
• UX Strategist,
• Engineer Lead,
• I’m a UX/UI Designer.

My Role

• Research and analysis,
• UX and UI redesign,
• Design library kit.

Timeline

6 weeks

TL;DR

Before

After

Info Box

Click here to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Info Box

Click here to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Info Box

Click here to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Why does the client want improvement?

Expand the web app’s service area

The client aimed to establish the product in Mississippi before the hurricane season, targeting an expected audience of 20,000 sign-ups. User satisfaction was a critical metric for the new business initiative.

About the customers and what they are looking for

Based on the info about existing users, I assumed the web app persona.
This helped maintain focus on users throughout the project scope and “humanize” them for technical-minded stakeholders.

The persona characteristics:
• property owners (homeowners),
• middle and high-income,
• users age 35 – 70 y.o.,
• geographical location: hurricane-vulnerable states,
• the current users are coming from “word of mouth”.

User’s objectives:
• stay safe,
• be prepared for the upcoming hurricane (understand weather conditions surrounding their home preferably a couple of days before the storm hits),
• have proof of the hurricane damage done for the insurance company’s business.

People are suffering from uncertainty. Intolerance of uncertainty is also linked with stress, anxiety, depression, panic attacks or disorders, and compulsions.

The main purpose is to reduce people’s stress in hurricane-prone areas by providing an easy-to-use tool with intuitive UX.

Get deeper into the product

Goal: a detailed product discovery.

Methods: analyze key user scenarios by examining user flow, content, navigation structure, accessibility, and discoverability issues.

Concept decision

The UX review and heuristic analysis helped outline key usability problems and improvement opportunities.
I suggested dividing the work scope into 3 parts:

Pre-onboarding

The main page of the marketing website is where users familiarize themselves with the product’s benefits and have the opportunity to sign up.

The original page is presented —>

Onboarding

Registration and payment process.

The original screen—>

Web-app Experience

The product functionality itself

The original web app screen —>

All the findings above helped the team:

• Decided what actions and features were crucial and beneficial,
• Prioritized the issues,
• Created roadmap,
• Designed the solutions.

Design Explanation

Pre-onboarding

I consider the marketing website to be in the pre-onboarding phase. Based on our previously created roadmap. The pre-onboarding had a low priority, so we postponed it to focus on the product itself.

However, the marketing website is strategically important for UX. Because it helps to create a seamless connection to the web app.

Onboarding

Problem

There is a disconnect between the marketing website, where users register, and the web app, where they can access all functionality.

Solution

Use the marketing website as the starting point for user sign-ups and application logins.
– To achieve this, I proposed changes to the current navigation and information architecture of the “marketing” website (#1 pic below).

• Onboarding solution components – a starting point for users:
Very first important interaction: “Let’s check if my address is within the service area” – user

To facilitate this, the input form on the main page of the marketing website was proposed (#2 pic below).

Before

After

• Onboarding solution components – an efficient user access flow:
I considered all the onboarding use case scenarios

Based on the UX review findings and business requirements, I developed five onboarding scenarios and presented them to stakeholders. After testing, I refined the prototype according to their feedback.

• Onboarding solution component – determine your current location:
Confirm your address tutorial – drop a red pin

After the registration and payment information, the next important step for the user was the address confirmation.

From a data perspective, users must drop the pin precisely on the roof of their house, rather than in the adjacent space.

Fact: 23% of the time Google Maps API (we use Google Maps API for the map) works incorrectly and users have difficulties with the accurate address location.

To emphasize it and educate the users I created tutorials for different property types.

Web-app

Exploration

Indirect competitive analysis

Goal: to identify existing design patterns.
I studied the user flows of various weather forecast websites to extract common design elements.

Surveyed 12 hurricane survivors

Goal: to identify crucial information.
Questions covered weather terms, visual data presentation, and info prioritization.

4 sessions with stakeholders

Goal: to review the findings and potential options for the solutions.

2 sessions with the development team

Goal: to discuss the technical side and restrictions.

Areas of Improvement

Problem 1

Navigation
The web app’s main navigation is confusing and lacks clarity.

Solution

Left-Side Vertical Navigation
– Based on the findings, I proposed two navigation improvement concepts, which we then refined through iterations with the stakeholders.

Concept decision

I also suggested including the following:
• FAQ page to explain all the terminology (34% of the interviewees were confused about terminology).
• The tutorial page explains how to use the web app’s features (25% of interviewees needed help with filtering and distance measurement).

Before

After

Problem 2

Structure
Visual clutter & Lack of visual hierarchy make it difficult to comprehend the information.

Problem 3

The style and layout are out of date. The consistency principle is broken.
The layout didn’t look like the weather website, which led to familiarity issues. This is problematic because users learn and navigate more easily when a product’s functionality aligns with their expectations.

One Solution

I redesigned the UI layout and restructured the information for improved clarity and comprehension.

• Only the most essential information was prioritized on the screen.

• The redesigned visual style enhances users’ ability to understand and process information.

Before

After

What does it look like in practice?

The main dashboard shows hurricane locations in relation to user addresses.

The main dashboard: the left sidebar bar is hidden.

The main dashboard: the navigation.

The main dashboard: the navigation > FAQ page.

Mobile Concept

The mobile solution was the next crucial step for product development. I presented potential responsive design solutions to the stakeholders and the dev team for effort estimation.

What I learned?

• I dove deeper into weather forecasting, a new field for me.
At first, it caused anxiety, but this quickly dissipated as I educated myself about the subject.

• I strengthened my communication skills—confidently presenting ideas to stakeholders, demonstrating the value of the UX process for business, and earning their trust. Though challenging, marketing research and analysis proved invaluable.

• “Data is a king”. Having data was a great starting point for project analyses and design decision making.

Scroll to Top