Project Type

 Enterprise Skill Sharing App

Skills

UI & UX Design, User Research, Prototyping

Team

Alex Babatunde, Phillip King, Nicole King

About Beacon

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.

The Challenge

The
Challenge

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.

My Role

Product Designer

 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 Scope

Design Focuses

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

  • Design
  • Prototyping

Project Kickoff

Defining Timeline

 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

Research Goals

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.

Research Methods

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.

Research Insights

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.
 

 

App Concept

Beacon

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.

User Personas

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.

Storyboard

To string together personas, user stories and various research findings, I developed a story board to how our persona Kara could use the app to connect with a local shelter. The storyboard helped us develop requirements for the product.

Design

Design Overview

The overall app we decided to design would have 4 main sections that enabled residents and organizations to take action before and during natural disasters. The sections are the: Map, Prepare, Give, and Alert section. 

 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

Design Goals

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:

  1. Equip community organizers with a way to handle unsolicited relief donations
  2. Make it easy for community organizers to create a donation infrastructure
  3. Help donors clearly understand what things are needed for donations
  4. Develop a system for transportation 

App Wireflow

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. 

Give
Wireflows

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.

Assist Wireflows

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.

Organize Wireflows

Feature 4: Manage In-Kind Donations

Within the organize mode, users are update the type of items that are needed. This allows community organizers to be able to actively share with the community what is needed at any given time. 

Introducing Beacon

Skinned UI for Assist Mode
Skinned UI for Organize Mode

Testing

Prototype
Test

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

Design Iteration

Calendar Feature

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.

Gas Feature

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.

Outcome

Outcome

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 System

Design System

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.

App Screens

App 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!

Closing Thoughts

Reflection

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

That's It

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.