Lilia Rustom - Designer Portfolio
  • Interaction Design
    • SF120
    • Zen
    • Meraki
    • Team Reach
    • Aurora
    • Petoy
    • All-women Hackathon
  • About
  • Contact
  • Graphic Design
    • Impact BBDO - 2017
    • CRInn AUB - 2016/2017
    • Stark Design - Summer 2016
    • Community Design
    • Publication
  • Interaction Design
    • SF120
    • Zen
    • Meraki
    • Team Reach
    • Aurora
    • Petoy
    • All-women Hackathon
  • About
  • Contact
  • Graphic Design
    • Impact BBDO - 2017
    • CRInn AUB - 2016/2017
    • Stark Design - Summer 2016
    • Community Design
    • Publication

SF120
A disaster relief mobile app

Challenge 

With 1.8 million people coming in San Francisco everyday, 800,000 people staying overnight, and a 30-year overdue for a major earthquake in the Bay Area; there is an urgency for preparedness in order to reduce the high risk of damage. 

Concept

SF120 aims at creating a more resilient community against earthquakes in the Bay Area. The service targets three main topics: Education, Preparedness, and Connectedness.

Project Length

Team Members

8 weeks 
Individual

Skills & Tools

Design Research (Generative research, interviews, SFFD NERT Training), UX, UI (Sketch), Prototyping (Adobe After Effects)

Project Advisor(s)

Federico Villa

Background Story

Early in June 2018, The San Francisco Fire Department (SFFD) offered a free Neighborhood Emergency Response Training (NERT) program at CCA.
The goal of
NERT is to give civilian volunteers a higher level of basic skills in firefighting, search and rescue, disaster medicine and preparedness.
As I've never experienced any earthquake before, I took the training to learn more and be prepared. ​
The information and facts I learned during the training were my main motivation to work on this project and share my knowledge with the people around me, so they can also be a little bit more prepared.
This training also served me as an immersive research on the topic, where I was able to learn in an active way about the rescue and survival techniques, as well as be prepared and build by survival kit. 
Picture

Key Features

Based on the research featured below, I came to design ​three main features.
The aim is to teach users everything they need to know step by step, as well as help them be prepared through "Learning by doing", and connect them with their loved ones after a disaster hits. ​
Picture

Education

Picture

Preparedness

Picture

Connectedness

Research

In order to better understand the challenge and the bigger system, I studied the access to information, the access to help and rescue, and the current resiliency  plan of the City and County of San Francisco. 
​In order to better understand the user's perspective, I sent out a survey and conducted six interviews with people who have been living in the Bay Area at different stages of their life  (born and raised, living here for 10+ years, recently moved). ​
Research insights:
  1. Difficult Access to Information.
  2. Scarce resources in a bureaucratic system.
  3. Long timeline for implementation.

Problem Statement

By comparing the ideal user journey to the current one users are following,  three big opportunity gaps were presented.
​These tackle areas of education and preparedness before a disaster, and connectedness after a disaster hits. 

Opportunity

How might we provide people easy-access to educational information,
while helping them  prepare for the Big One, and connect them with their community after it hits?

Ideation & User-testing

Based on the research findings, I explored 3 different features.
​After drawing low-fidelity wireframes, I tested them with different users, which helped me evolve them to the final design.

User-testing insights:
  1. ​​​It's easier to  learn step by step rather than taking the whole SFFD NERT training at once. 
  2. The design should feel approachable and inviting, especially with such a serious and scary topic.
  3. Information should be memorable and easy to understand.
First iteration of low-fidelity wireframes and user-testing
Higher-fidelity wireframes based on the feedback I got from user-testing

Final Solution

1. Education

Users learn step by step, by unlocking courses as they go.
​They also have access to a quick summary of the main takeaways to remember from each course. 
Picture

2. Preparedness

We believe in "Learning by Doing".
​By taking the AR Course, users can build their survival kits and be more prepared at the same time as they learn.
Picture

3. Connectedness

As soon as users have access to internet after a disaster, they can locate their loved ones on the map and know how they're doing. 
They can also contact them directly through the app, either by message or phonecall. 
Picture

Extra Features

Extra features include Survival and Awareness:
  1. When a disaster hits, users will get notified and asked to report their situation, which will help inform their social circle and the rescue teams.
  2. ​Users are also empowered to report any hazard or damage they see through an AR system, which will help the facilities work faster. 
  3. Users can filter the map in order to be aware of the location of different resources and aid providers. 
In case of a disaster, SF120 empowers users to report any damage done to buildings, by detecting the vertical and horizontal lines of buildings. A damage is assessed if the lines are not straight, which means that the building is no longer safe to walk in.

Learnings

  1. Convenience matters: People have busy schedules and would prefer a service that integrates smoothly with their lifestyle.
  2. Visual aesthetic is very important: With such a serious and scary topic, desirability should be considered in the visual design. 
  3. Preparedness takes time: Because  one should follow several different steps to be fully prepared, such a service should be promoted by the government and provided to all Bay Area residents (at schools, at work, on the news...)
© COPYRIGHT 2018. ALL RIGHTS RESERVED.