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
Work contents
Part 1: Dive into the world of hurricanes
• Studying the information the client brought to the table.
• UX Review the product. It is a time- and budget-consuming method that helps quickly find and fix a wide range of issues.
• Competitive market research to spot common UI patterns in the industry.
Part 2: Recap and create.
• Visual solution.
Dive into the World of Hurricanes
Why does the client want improvement?
BUSINESS ASPECT
Expand the web app’s service area
The client aimed to establish the product in Mississippi before the hurricane season (June 1 to November 30), targeting an expected audience of 20,000 sign-ups. And the user satisfaction metric was critical for the new business initiative.
The customers and what they are looking for
PERSONA/RESEARCH
Human Spark as a key to stakeholders’ hearts
My stakeholders were scientists and data analysts. Presenting a proto-persona based on real users shifted our conversations and highlighted the human side of the product.
!!! It was a big WIN for me because the collaboration shifted the focus from “numbers and data” to user-centered thinking.
Existing customer profile:
• 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”
Customer needs:
• 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
As a side effect of creating the persona, we refined and clarified the company’s unique value proposition.
People suffering from uncertainty.
The Q-risk main purpose is to reduce stress in hurricane-prone areas by providing an easy-to-use control tool.
Get deeper into the product
RESEARCH/UX AUDIT
Heuristic analysis outlining the key usability problems and improvement opportunities. I divided the work scope into 3 parts:
Pre-onboarding
Pre-onboarding is the marketing website’s Home page, where the product is introduced. It was a low priority on our roadmap and postponed, but the marketing website is strategically important for UX as it creates a seamless bridge to the web app.
Onboarding – registration and payment process
The onboarding experience is critical—when it’s smooth and easy, it builds customer loyalty and trust.
Web App Experience – direct access to product functionality
The most valuable screen for customers shows hurricane details and how close the storm is to their property. From there, they can make vital decisions—whether to stay or evacuate—and prepare for what lies ahead.
Turning Insights into Action – all the findings above helped the team:
• Identified the most valuable actions and features
• Prioritized key issues
• Clarified the product roadmap
• Designed effective solutions
Learning from the Competition
MARKET RESEARCH
Weather forecasting language should be universal and intuitive, allowing users to instantly understand icons and signs without confusion.
To achieve this, I analyzed common UI patterns that users already know and trust.
Recap and Create
ONBOARDING Key Problems:
CHALLENGE 1
How to log in?
There is a disconnect between the marketing website, where users register, and the web app, where they can access all functionality. After registering through the marketing website, users received an email link, which was the only way to access the web app.
Use the marketing website for user sign-ups and logins
I proposed improvements to the marketing website’s navigation and information architecture.
Before
After
ONBOARDING Key Problems:
CHALLENGE 2
Primary interaction: “Does it work for my property?”
The hurricane predictor has limited coverage. Customers must register before they can determine if their address is within the service area, which can be frustrating and may stop them from signing up.
Find out immediately if you’re in the service area
From the first page of the marketing website, customers can check if their address is within the service area.
After
ONBOARDING Key Problems:
CHALLENGE 3
Very Important! – Address confirmation
For data accuracy, customers must place the pin on the roof of their property, not in the surrounding area. To highlight this and guide users, I created tutorials for different property types.
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.
One glance is worth a thousand explanations
From the first page of the marketing website, customers can check if their address is within the service area.
THUS…I reworked the entire onboarding flow to make signing up and paying for services simple, logical, and frustration-free. By following proven onboarding best practices, we saw a clear boost in user engagement and satisfaction after launch.
The process users goes through to archive hurricane view.
WEBAPP Areas of Improvement:
CHALLENGE 1
“Where can I find…?” – Navigation
The web app’s main navigation is confusing and unclear, making it difficult for users to find what they need.
Find it fast, use it easy
I proposed two navigation improvement concepts, which we then refined through iterations with the stakeholders.
I also suggested including:
• 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
WEBAPP – 2 problems 1 solution
CHALLENGE 2
“What am I looking at?”
Visual clutter and a lack of visual hierarchy make it difficult to comprehend the information.
Outdated style and broken consistency affect the layout
The layout differs from typical weather websites, causing familiarity issues and making it harder for users to navigate and use the product intuitively.
Less noise – more focus
I redesigned the layout and reorganized the information for better clarity, prioritizing only the most essential content on the screen.
Before
After
The main dashboard shows hurricane locations in relation to the user’s address
On the main dashboard, the left sidebar is hidden.
The main dashboard. The navigation.
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.