How to reduce surge of uninjured citizens in hospitals during hurricanes.

 
Banner.png

CLIENT

TeleTracking Technologies

Duration

8 months

Team Members

  1. Brooke Sachs
  2. Jon Loeb
  3. Marina Leao Lucena
  4. Nishchala Singhal

ROLE

  1. Design Lead
  2. Asst. Project Management

    SKILLS

    1. UX Analysis
    2. Prototyping
    3. User testing
    4. Visual Design
     
     

     

    THE BACKGROUND

    Hospitals have an important role to play in a community, especially during disasters where stressed-out citizens choose to seek refuge inside the hospital’s facilities. But surges of people sheltering at hospitals can compromise operations and quality of patient care.

    How might we design a system that help general citizens be better prepared so they don't seek refuge in hospitals?

     

    CLIENT BRIEF

    Create a solution which makes key hospital data (capacity, staffing, resources) more transparent and enable affected citizens to make a more rational decision about where to shelter when they cannot do so safely inside their own homes.

     

     

    WHO IS TELETRACKING?

    CODE

    I wanted people to see the house go into the “exploded view” when they clicked on the roof themselves. A lot of people found that very fascinating. Also being able to “select the rooms” added a playfulness to the interaction.

    The entire project has been implemented using HTML, CSS and Jquery. I used the anime.js library to animate the exploded view and css animations for fading in the modals and the entire house when it loads for the first time.

    Screen Shot 2018-03-31 at 11.06.50 PM.png

     

    ILLUSTRATION

    The entire artwork for the project has been created by me using Sketch. I wanted the website to have a sad feel and hence the choice of dark and muted color palette.

    Screen Shot 2018-03-31 at 11.14.02 PM.png

     

     

    CHALLENGES

    The main challenges I faced during the implementation of this project were

    Adding a zoom effect

     I wanted the entire page to zoom -in when an element is clicked on, I tried implementing this using the zoomooz library, unfortunately the library has bugs ( mentioned in it’s documentation) that get triggered if the elements it is being added on has margins. 

     

    Selecting the rooms

    What looks very simple as an interaction can actually have a ton of Javascript running behind it. This was an important takeaway for my future. To get the room selection happening, I initially imagined I could do it only using css:hover, however that only allowed me to manipulate the element that was being hovered over, what I wanted was to influence all the other elements too when one element was being hovered on. This required me to write Javascript and add and remove active and inactive classes on the parents and sibling elements which I took a while to figure.

     

     

    WHY I WANTED TO DO THIS

    1. Even though this website was only my first big coding project, I feel I now understand the work flow used by developers. I consider this will be extremely valuable when designs have to be handed off for development in a job.
    2. I also feel I now understand some of the basic terminology and concepts to have a conversation with developers incase the design has some technical problems that need changes.