Introduction
Redesigning DisasterHub
I led the redesign for DisasterHub, along with competitor analysis, whiteboarding/wireframing, internal user testing/feedback, prototyping key features, interactions, and presenting to key stakeholders.
2025
2-4 weeks
Lead Product Designer
Myself, Team lead, Back-end Dev
Problem
DisasterHub is an outdated site critical for residents to understand current warnings, incidents, and emergencies.
Big issue was the lack of clear communication of what is happening upon immediately opening the site, lack of structured content, map is overwhelming with the amount of pins & labels from the map itself etc. Unfortunately the site does not have any analytics tracking past the homepage meaning I cant understand how people are using the current DisasterHub.
Solution
I had two options, either clean up the current site to be more usable or go in a new direction. I decided to take it in a new direction.
The approach included user personas, informal user testing (internal dev team testing), problem statements, and competitor/feature analysis to not only understand where current DisasterHub is lacking but how the new redesign can bring improvements.
Council Personas
Utilizing internal personas to understand users, their pain points, needs and why to create actionable insights to shape the key features.
1
2
MoSCoW method
Must Have
Alerts for upcoming disaster events.
States for preparing, during, and recovering from a disaster.
Articles around preparing for emergencies (For example, emergency kits, emergency plan etc).
Ability for people to view a range of warnings/incidents
Should Have
More information about specific disaster and what can affect the Sunshine Coast.
Articles with information all around disasters, preparing for, during, and the recovery efforts.
Learn more about how you can volunteer to help.
Could Have
Embed map with alerts and overlay the area affected along with extra information when a user selects it.
People could report closed road because of flooding or fallen tree etc.
Live coverage article/blog on the site when an active disaster is happening.
Ability for users to pin their map, work or school to receive updates from that area.
Wont Have
A more built out and comprehensive way for people to filter and view alerts from specific regions on the Coast.
3
Wireframing
With user backed insights turned product features I started to wireframe my ideas, presenting internally to team and individuals getting feedback -> iterating -> repeat.
I decided to focus on new ideas/functionality that could be brought to DisasterHub to bring users a more personal but useful experience. I also identified some problem areas and redesigned them to again provide users with a better experience. Another big focus was on a new idea for how the homepage which would immediately notify visitors to what's happening in the region. I also kept some great information from previous DisasterHub, for example, the row of cards denoting the statistics for Closed Roads, Power Outages, and more.
Internal User Testing
After wireframing a few key features I presented my work in the standups for feedback but also talking to people individually who worked on the previous DisasterHub.
I mostly talked to the back-end developer that worked on it to get more of an idea of what current DisasterHub is, showing me some stuff I might not of seen, and what they wanted to implement back when they were working on it. Some feedback below is advice to me before redesigning.
Work on the left side menu for the map. Categorize the map items into more understandable groups.
Introduce cards with stats, for example, Road Closures, from the map under the top banner.
Ability to add important addresses like your home, work, school etc.
Make the bottom toolbar on the map more informative or easily understood.
Drive more attention to the hazard maps.
Ability to search your address.
Reimagine what greets the user when they first open DisasterHub.
Presenting the intended User Interaction/s
After internally testing, iterating & refining I built out a solid idea of how the user would interact with the site through multiple animations
I recently picked up Jitter to animate the interactions for the Nexus project for presenting on my portfolio but decided that it would be useful to animate the interactions so myself, team and stakeholders were all on the same page. It also gives the interactions a bit more of a smoother look then a Figma prototype where people expect everything to work all at once which was learnt from the Nexus testing I did. Ultimately letting me focus on the interaction itself, clicks, information hierarchy and saves a lot of time creating and presenting.
Final Design
The project wasn't fully explored so no final version but I did some brief exploration into how it might look visually for the presentation.
The first page the user is greeted with could be one of the bottom three, Prepare, Active, and Recovery. These pages if opened would immediately communicate to the user the state the Sunshine Coast Region is currently in. The prepare page can feature a top banner for Disasters that are known to be affecting the Sunshine Coast within the reasonable time. For example, Cyclone Alfred was predicted to hit the Sunshine Coast at times, changed, and ultimately ended up affecting a smaller part then what was assumed before.
Homepage/s
The homepage is split into three different states, Prepare, Active, and Recovery
The site being in three different states, Get Prepared -> Active -> Recovery reflects how the Disaster Management team responds to an disaster/emergency event. I think this approach clearly and effectively communicates to the user as soon as the site is opened exactly what state the Sunshine Coast Region is in. It sort of just turns the entire site into a Alert.
Obviously after the disaster/emergency event the Council would then make the Recovery state available to click and basically is a place for people to continue monitoring the affected region/areas but also provides people with the news coverage around recovery efforts, and how individuals who were less affected can help with the recovery efforts (volunteering).
The user could switch between different states making all information accessible to the user. If there was an active disaster the page would of course open in that state first.
Map
Improving the map through more clearly defined categories in the menu, better sized & responsive pins, and better contrast making it more accessible.
The category items themselves have also been somewhat redefined. For example instead of, Roads which then had sub items in types of closed roads etc you just show users the option to see all closed roads. They could then of course look at a specific incident and then see why that road is closed. Basically a more gradual experience in how one consumes the information.
This was an idea I brought up a bit later. Basically the ability to group related items into maybe one pin could be a powerful way to streamline the user experience. In the example below you have a flooded road an incident which takes precedent and then you would have the supporting pins in this case you have a traffic/road cam and a water level gauge.
Route/s
Users could view a route to see any warnings, incidents or devices between their important address/s.
How these routes are available to the user was up for some discussion. One we could just automatically create a route between two created important address/s or have the users manually create routes and save them like important address/s. I think the best solution in hindsight would be to have both options above. Have routes be automatically created between important address/s but then give the ability to create custom one off routes for users to look at once but don't need to save it.
Important Address/s
Users could add their important address/s which could be used to create a route between checking for any incidents/warnings ahead.
This idea was less fleshed out but the main point of it was for people to understand how their kids school or their home is doing. Basically only receiving alerts around their important address/s then the idea could be taken further to provide users with a sort of spider web area between their important address/s to create a zone etc.
Report a Problem
Users could possibly use the map to report a problem providing the Council with the type of incident, where and any further description.
This flow could also include the ability to upload a video or imagery as supporting evidence/information. This was apparently something they wanted to incorporate into the current DisasterHub but had concerns that people would use it inappropriately.
Outcome
I attempted to pull together my ideas, wireframes and design to present a coherent structured presentation to key disaster management team stakeholders.
I received positive feedback for my presentation and work presented. Although the project did not commence. I think building a better presentation to be more emotion/story driven rather then my usual straight to the point, problem/issue, impact/why, possible solution. I think pitching it more towards the emotion and maybe some statistical evidence in what an app or site around disaster management can positively affect the community. Also bringing more comparison between competitors and showing what they do well and how we can match or improve upon etc.
Retrospective
Focus on explaining the process a bit more. Give myself more time to present a better structured presentation. Stopping throughout the presentation for feedback was a good idea as people explain their concerns, ideas and thoughts which was great feedback.
I need to work more on how I present my work and probably spend a bit more time reflecting and thinking about how I want to present. Really try to consider what would be the business goals/needs and incorporate those and then clearly point to how my designs are the solution to such. Whilst I may not have hard evidence (user research/google analytics) I could look to competitors, their reviews and start to build that evidence to prove I am going in the right direction.
Presenting my work
I need to give myself more time on the presentation side, I was continuing to iterate and work on ideas the morning before presenting. This part of the process is important as it involves those key people and gets them more invested.
Stopping throughout for feedback
I was at first going to just present my work and be done with it but then I realised that is probably a somewhat bad direction. I decided to segment the presentation into the ideas and stopped for feedback throughout.
Feature/Competitor Analysis
Looking at competitors can often lead to quite insightful and accurate user pains, needs and wants. Then turning such research into actionable features is probably the best way to start going in the right direction without any user interviews/testing etc.