Enterprise Skill Sharing App
UI & UX Design, User Research, Prototyping
Alex Babatunde, Phillip King, Nicole King
Our goal with Beacon was to create an intuitive native app that guides users to make informed decisions during a natural disaster. The app enabled users to map disasters in real time, learn how to prepare for disasters, donate in dynamic ways, and alert neighbors of crucial information.
Especially at the beginning of the COVID-19 pandemic in the U.S., organized disaster relief efforts were slower to deploy as they had to adjust to the new context. Community-led efforts had to fill in as they could on the ground, setting up shelters, organizing volunteers, and coordinating tasks, mainly through text message and excel spreadsheets.
Our goal was to design an application to coordinate community-led efforts to respond to natural disasters. The app would streamline local led activities and make them more effective as impacted individuals wait for the National Guard, American Red Cross, and other organized groups to come in to assist.
On this project, I worked closely with two other product designers. My specific deliverables were designs for the donation feature within the app. Within the donation feature I developed a persona, story board, wire flows, wireframes, and hi-fidelity prototypes.
The project spanned over a time period of 6 weeks. Due to the relatively short nature of this project, we were more heavily focused on the latter half of the design process: the wire flows, the hi-fidelity designs, prototyping. The scope of the project included:
Discovery & Research
To kick off the project, I led a planning session to determine key tasks, owners, and milestones we aimed to accomplish within our 6 week timeline.
After defining the key tasks to accomplish, I developed a gantt chart we used to track our progress each week.
Discovery & Research
Our goal was to understand the behaviors and needs for individuals, families, and local organizations during a natural disaster. Below are the key questions we addressed with our research.
To identify how individuals, families, and local organizations are impacted before and after a natural disaster occurs we conducted user interviews and desk research. Due to the quick turnaround we only interviewed 1 person, but relied heavily on websites like Reddit to learn about people’s experiences.
After completing our interview and synthesizing our desk research, we split our findings into two categories for the two users we would be tailoring the app to: Residents, and Community Organizers.
Key Insights from Residents
• The neighbors lean on each other for a lot. They are close and rely on each-other to stay informed during natural disasters.
• When a natural disasters hit, people quickly react and band together to look for safety.
• In times of natural disaster, people lack a cohesive direction for the steps they should take to safety.
• During natural disaster the sharing of information is harder due to damaged cell towers.
Key Insights from Community Organizers
- • Local nonprofits and government agencies know the immediate needs of their community best. With boots on the ground, they can tell you which supplies are needed first, in what quantities, and when
- • Charities often don’t have the time, space, or volunteers to separate unsolicited donations into searchable sizes, so clothing, for example, often goes unused or gets thrown out.
- • Setting up a central location to assist survivors is critical, as is arranging transportation and someone to accept any disaster relief donations.
- • Money makes the biggest impact after a disaster. Through financial donations, supplies can be purchased from local or nearby businesses. This helps keep the impacted community afloat economically and reduces the cost and delivery time of transporting supplies.
After analyzing the interview results and desk research, it was evident that there were 2 user frustrations that made streamlining community led efforts difficult. There was a lack of clear direction and communication between local organizations and the community.
In addition, it had become clear these problems were occurring before, during and after the natural disaster . Therefore we developed 3 key solutions that could help users prepare, donate, and stay alerted during natural disasters. The solution came in the form of a new natural disaster app concept : Beacon.
To better understand how to design for users impacted by natural disasters, User Personas were created for each type of user.
Below is a brief version of Kara’s persona, a 29-year old resident of Colorado, manages a bookshop, and is looking for ways to educate herself and children on ways to stay safe if a forest fire occurs. Kara’s persona was used to understand a user who would like to be prepared for natural disasters.
Below is a brief version of Gabriel’s persona, a 24-year old resident of Colorado, an EMT and community organizer, seeking a way to set up infrastructure for volunteering at a local organization. Gabriel’s persona was used to understand a user who would have to organize volunteering and donation efforts during natural disasters.
Map Section: Map serves as home base for users while exploring the product
Prepare Section: Prepare contains learning modules and checklists users could use before natural disasters
Give Section: Give allows users to volunteer, donate money, or manage volunteers/donations
Alert Section: Alerts provides a live feed of reported incidents from the map
Each one of the functionalities were complex, so we divided and conquered by each working on a main section. I worked on the Give section. The goals of my design were to:
- Equip community organizers with a way to handle unsolicited relief donations
- Make it easy for community organizers to create a donation infrastructure
- Help donors clearly understand what things are needed for donations
Develop a system for transportation
A challenge I encountered when working on the Give feature was determining a flow that allowed both residents and community organizers to leverage the give feature without an additional log-in. The main point of constructing this was to visualize how the Give feature could not only enable residents to get involved but also allow organizers to easily update their initiatives . We decided the best spot to initiate the switch between a resident and organizer was at the beginning of the user flow.
The wireframes I developed for the Give page leveraged a toggle to allow users to switch between assist mode, and organize mode. The assist mode was useful as it allowed residents to either donate or volunteer at a local organization. While the organize mode allowed community organizers to manage volunteering and donations from an administrative view. Often times organizers are also residents so this toggle allowed them to stay up to date with efforts in their neighborhood, and ensure their initiatives were listed properly.
Feature 1: Cash Donations
Within the assist mode, users are able to easily donate to a local organization. To promote cash donations, the toggle is set to begin on cash whenever a user clicks donation.
Feature 2: Item Donations
Within the assist mode, users are able to easily donate to a local organization. By using the toggle users can choose to donate items rather than cash. In this flow user is provided a list of needed items to help reduce the amount of excess goods local organizations typically receive. In addition, users can register their donations in the app, receive a confirmation number, and use the number to check in at donation center. The registration feature allows the center to create a tracking system of the items expected to be delivered .
Feature 3: Volunteer
Within the assist mode, users are able to volunteer and support a local shelter. In the initial wireframe users are capable of exploring various dates and selecting shifts, and register as a volunteer for them.
Due to the timeline we were unable to test our product with users, but relied on feedback from our cohort members. In regards, to the Give feature I was given the following feedback:
• Calendar Feature within the volunteer flow may be hard to develop and can be hard for users to click on a phone
• Our give back feature only speaks to donations, where often times during natural disasters people can also give rides or providing gas
The Before Volunteer Modal provided an easy way for the user to complete sign up for volunteering on one page. However, based on technical feedback building out a calendar the way it was designed would be very difficult. We decided to split the task of registering for volunteering from 1 step to 3 steps.
The Gas Feature we designed was a way a user could volunteer to provide rides and receive gas. This feature addressed an issue where during natural disasters many people who may not evacuate are often unable to afford to leave. By including this feature we would be able to help to provide a way for people stranded to find transportation.
The outcome of the Give feature is both community organizers and community members have various ways to support during natural disasters. As a community member you can either donate cash, items, or even give a ride. As a community organizer you have the ability to minimize the hectic nature of donations.
With these options available for every user and solving two distinct user problems. And while this is a concept project, the expectation is to see an increase in user satisfaction and the number of orders placed per user per week within a food delivery application.
Design systems saved us a lot of time during this project. Even for a concept project like Beacon, setting up a simple design system to continuously pull from kept our design process lean, fast, and focused, while tying everything together from the reuse of common UI elements across multiple screens.
Check out the full Beacon Design System and App Screens designs in their entirety in Figma. Feel free to go through the file to see how I structure design files.
Hit the button below to view the project in Figma!
Taking the time to step away from each and returning to ask yourself what went well, and how you can improve next is essential to polishing your design skills. Below are some bullet points sharing my thoughts
What went well?
• Using Trello for project management was fantastic. This tool kept us organized from start to finish.
• I received some awesome insights from Reddit. Definitely something I will continue to do for future projects.
• Being able to develop a project with a group of designers was amazing. Bouncing ideas off each other and bringing our different perspectives really helped expanding my creativity
• I enjoyed being able to play multiple roles (UX researcher and UI Designer) to reach a solution.
What could improve next time?
• Adding a chat feature to the volunteering feature would allow users to communicate directly with community organizers
• Leverage surveys as a way to get insights for research
• Finding a way for volunteers to know what they would need to do when they volunteered
I had an awesome experience conceptualizing and designing Beacon! Thank you to all of those who interviewed with us and provided valuable insight into their experiences with natural disasters, as well as the other designers I reached out to for advice.