top of page
Flood relief and donations platform
The problem
There wasn’t any simple and standardized platform that offered to streamline the flood relief activities and offering donations of resources. It was mostly done manually via social media groups and messaging apps.
The goal
To build an easy to use responsive website that helped to make easy donations to relief camps and to get proper weather alerts at the time of flood.
My role
Being a solo project, I had to perform UX research, UX design, wireframing, prototyping and iterating designs.
Tools
Figma
Adobe illustrator
Adobe photoshop
Jamboard
Preliminary survey
The initial user research conducted was to understand the needs of the users and what they would expect from such a platform. Through the research it was found that regionally, there wasn’t any such platform that offered the capabilities that alivio aims to offer.
User pain points:
1
Resource wastage
Most resources don't reach the people in need. They are simply wasted due to lack of logisitics.
2
Exploitation
Sometimes people raise false resource donation requests via social networks and exploit the donations received.
3
Tedious process
Often people would have to go around asking requirements in relief camps and then purchasing and delivering items by themselves
4
Lack of information
Nearby relief camp information and critical alerts are not available easily.
Insights:
The initial research helped understand the users pain points in utilizing existing system. There simply wasn't any other similar platform that existed, and often users relied on a network of social media messages, pages and groups to organize the relief activities and resource donations.
Design Process
Sitemap
Information architecture was done by ensuring that users had easy access to all primary functions of the platform, and all features of the website should also be accessible with just a few clicks.
low fidelity design
Paper wireframes
Tried various ideas for each screen and came up with several interface elements for the app design. Few key features from each wire-frame were marked to be combined to a single screen.
Crazy 8 and "how might we" design exercises were used to come up with ideas.
Digital wireframes
While designing the digital wireframe, we made sure it aligned with user research which meant the home page itself had most of the information the user needs along with important call to action buttons.
quick call to action buttons
glimpse of relief centers nearby
Low-fidelity prototype
The low fidelity prototype shows the main user flow in making a contribution to the resource need in nearby relief camps.
Usability study
The low fidelity prototype was used to conduct a usability study to analyze the user experience in performing core tasks.
Insights:
1
Buttons
Study participants said that the number of buttons and its layout were confusing
2
Relief camps
Users preferred to donate items relief camp wise, so relief camp descriptions needed a donate option
high fidelity design
Mockups
Following the feedback, the number of buttons were reduced and the relief camp card was re-organized to include donate option
Prototype
The high fidelity prototype shows the user flow in making a contribution to a relief camp and scheduling its pickup. This process implements the feedback received through user study.
Before usability study
After usability study
Accessibility considerations
1
Color
The color scheme of the app conforms with the WCAG guidelines and ensures proper contrast.
2
Iconography
The primary action buttons include an icon to easily understand
3
Hierarchy
The typography includes hierarchical sizing and font variation.
Final design
The design choices of the final design was the result of the brand vision and ensuring accessibility constraints are met. Another round of user testing was done to ensure that the app met user expectations and offered a clear and concise user experience.
The details of the usability study conducted is included in the case study.
Responsive website design
The accompanying responsive website was built to ensure all functionalities of the app be carried out in a cross platform compatible web app. Three different screen sizes were accounted for covering desktops, tablets and mobile phones.
Takeaways
Impact
The project has surely achieved what it set out to do initially. The feedback received from participants is truly overwhelming.
“This is what we need. Can’t imagine going back to the unreliable group messaging system to organize relief activities after experiencing this.”
- study participant
What I learned
This project is one that I’ve personally felt was needed when floods affected our state. I’ve had the opportunity to actively volunteer for the relief activities, where half of the work was actually organizing and matching resource donations. Through this project I’ve learned eleven more about the need for such a platform.
Next steps
I hope to hand over this project to development because it is sure to benefit the community
The copy writing in the app and responsive website can be improved to make them even more understandable.
The ability to run campaigns through the app to raise awareness would be a worthy feature to add.
bottom of page