Untitled_Artwork 3.png

For this project, we were tasked to create disaster relief software in groups of four. The application itself had to be bassed at the community level. We decided to focus specifically on wildfires for this project. I was fortunate to take on the role of a visual designer. I was also a UX and primary UI designer for this application. ​

 

The application itself had to include 

  • an interactive map

  • social media integration

  • donations 

  • volunteer 

After conducting user interviews, we settled on building an app. We wanted to make sure that our application would reach as many people as possible, and we discovered that those who were going through a natural disaster might not necessarily have access to a computer. They would, however, have access to a cell phone. We created two user personas; one was a user directly affected by the fire. And the other was a volunteer coordinator. For these wireframes, we decided to focus primarily on the volunteer coordinators' journey. 

Untitled_Artwork 5.png

My initial instinct that when coming up with the color scheme was to go with red. Instead, I chose to go with the blues and yellows because red could be a more stressful color. With the community parameters on this project, I felt that the blues would lean more into the community feel.

Here I demonstrate various UI elements that I created and created and used thought the design. You can see multiple features used, from text boxes, buttons, and icons to the typography chosen. 

Screen Shot 2021-01-13 at 10.25.57 AM.pn
Screen Shot 2021-01-13 at 10.50.58 AM.pn
2.0 Posts – List view.png
2.3 Confirm and Share.png
2.0.1 Posts – Full view.png

These are the critical screens used for creating an informative post. This flow shows the main post screen and the thank you menu that appears after a user makes a post. The third screen is a preview of how the post would look to individuals looking for information.

Here we have a flow in our interactive map. The fire icons represent various fires that are currently active. The size of the icon different depending on the size of the fire itself. A user could tap on the icon to get the name of the fire, and a top on the title would give you more in-depth knowledge of the fire itself. 

6.0 Map.png
6.0 Map.png
6.3.png
6.3.1.png
5.3 Inventory Management Action.png

While our app also had a way to donate directly, we also decided to include fundraising events. We discovered that users were more likely to give money to campaigns if they felt they were getting something in return. We decided to create a merchandise shop. All funds raised would be given back to the communities, and the user would also bet the satisfaction of purchasing an item.