The earth is going through rapid changes with climate change happening right before our eyes. This year only, calamities one after the other have shaken the Philippines. Catastrophic floods have ravaged areas and no one seemed to be prepared for it. Some accounts even detailed that this was the first time they have experienced such floods after a typhoon.
Project NOAH is a web based and app based information center aiming to provide an accurate, integrated, and responsive disaster prevention and mitigation system. This project was developed by the Department of Science and Technology’s (DOST) and was later on handed over to the University of the Philippines.
This case study aims to make NOAH the go to information portal for disaster risk and management as well as the primary source of information for Filipinos before, during, and after natural calamities.
Personal Objectives
Make the user experience for both the website and app of NOAH smoother and easier.
Take over the roles of a UX Researcher, User Experience Designer, and Product Designer.
Limitations
This being a UX project, the designer will have no control over the scientific data that will be available and or accessible.
The Design Process
Understanding the current users
In order to get a good understanding of the users, the designer conducted a simple survey which was given to members of a Facebook group where members are interested in timely weather updates. The data collected shows that majority of users are in their young adults consisting of 57.1% of the total participants. It also showed that 76.2% of the users hold a Bachelor's degree.
UX Research
Majority of the users have used the NOAH Website / app at least 2 - 3 times (76%) citing that they wanted to check if they are living in an area that is flood prone or prone to storm surges. Reasons included knowing if they needed to relocate or prepare accordingly when a typhoon is on its way.
Analysis of User Research
Affinity Map
2x2 Matrix (Impact and Effort)
Identifying the Problem
After making the affinity map and the 2x2 matrix the designer has pointed out 3 problems that stood out the most:
Navigation / Ease of Use
The use of jargons
Outdated UI
Keeping this in mind as well as the data from the affinity map, the designer identified the Jobs to Be Done:
User Persona
The designer created a user persona loosely based on the users who participayed on the short survey.
Process of Redesign
Notes
The designer explored the website and took notes while taking into consideration the user persona produced as well as the jobs to be done identified
Ideation / Wireframes
The designer went through two passes for the wireframes. The designer settled on the second version featuring a floating side menu.
First version:
Second Version:
Design Suggestions and Revisions
I. Entry Pop Up
What's the difference?
The introduction to the project is still visible, however the photos have been removed. This is to make sure the pop up wont take too much space and so the prompts at the bottom will be readily visible to the users.
Instead of choosing between going to the UP-NOAH website or the NOAH Website, which can be confusing to some, the user will be asked immediately if they want to take a tour / tutorial.
On the previous design, the tutorial is something that the user should access by themselves, it might be missed by some users therefore they may waste time going around the interface delaying their goal.
If they wish to view the UP-NOAH website, all they need to do is click the help/information button available on the footer. This will also e discussed on the tutorial.
II. Map / Homepage
What's the difference?
A. The design now uses a floating side panel This is the updated version of the side bar that used to occupy the lefthand side of the interface
The panel now contains the search field for the location as well as the select map option. The idea behind this is so the users will only ave to zone in on one area for all the things they need to input to get the data they want.
The designer decided to forego the icons and use words instead. This is so the users can easily recognize what data they want to access
The floating side panel only shows the top 6 most accessed data. During the research phase, the user’s profiles indicated that they were casual users, or users that would only need basic data such as flood prediction, weather forecasts, and storm surge risks.
The rest of the data categories are easily accessible, they only need to click on “Show more Data”
The floating side panel features a “Hide All” button that would minimize the panel. This would ensure that the Map view will be unobstructed if necessary.
B. The map also features updated map tools conveniently located at the bottom right of the interface.
The tools include a new feature for zooming in on the current location of the user. A standardized panning icon is used so that users will easily recognize it.
Users can access more tools by clicking on the “more” button. The old design featured tools to measure distance between points as well as a tool for measuring an area both of which have been carried over to this design. The only difference would be the icons used and the location of these features.
C. The footer contains 3 important items which are:
The help / information button easily visible at the left hand corner which. Clicking it would show information about NOAH, have an option to star the tutorial again, and show FAQs.
The “Data as of” stamps
The logo of UP and NOAH. Clicking the logo would direct the user to a different webpage.
III. Tutorial
What's the difference?
The tutorial is now encased on a standard dialogue box. This design pops out more and is cohesive with the new design. Highlights (arrows and boxes) use a color that has good contrast with the rest of the interface to ensure that it will be visible for the users.
Functional Prototype
The designer was able to make a funtioning high fidelity protoype on Figma. You may access it here.
Recommendations
The designer recommends for an app to be developed to go hand in hand with the website. The app will be more handy and accessible on any mobile device. This is more likely to be used especially when the user is already on the move preparing for the calamity that is about to happen.
The designer would also like to recommend that data be updated in a timely manner. This is so the users will have access to relevant data at the time of their need.
Reflection on this project
Working on this project made me realize that a system can have all the relevant data available but still fail to serve its purpose if the user abandons the task midway due to poor UX-- and vice versa. A system can have the best UX out there but without the relevant data it can also lead to task abandonment.
I have learned that UX designers should closely work hand in hand with different stakeholders in and out of the project to make sure the success of a system will be met.
This project was made early on in my UX career and it challenged me to think and work as a true UX designer.
Comments