Readyboston.com Redesign

Project Overview

This research was completed for Prototyping (HF 770). The assignment was to redesign a public website or application using design principles learned in class and write a paper describing the principles that were applied in the design.

In preparation for a contract position with the City of Boston’s Department of Emergency Management, I selected boston.gov/readyboston for my redesign project. 

Read the Research Paper

Research Methodology

  • Literature review
  • Heuristic review of boston.gov/readyboston pages
  • Discussion with City of Boston Office of Emergency Management employees

Original Design

The goal of the boston.com/ready boston pages is to help Boston residents prepare for emergencies by completing three key tasks:

  • Signing-up to receive alert messages
  • Packing an emergency kit
  • Creating an emergency action plan for each family member
The original design: 
  • Optimizes for desktop 
  • Contains more information than needed
  • Makes common tasks hard to find (on a phone, locating the key tasks requires scrolling through seven screens)

Context of Use

When considering whether to design for desktop or mobile, context of use is key:

  • In 2016, mobile devices surpassed desktops as the most popular way to access websites (Enge, 2019).
  • 20% of American adults are dependent on smart phones for internet access at home (Pew Research Center, 2018).
  • 18.6% of Boston residents live without broadband and this percentage increases for people of color and those with lower incomes (U.S. Census Bureau, 2018).

Design Principles Applied: Compact

Compact displays allow for short and fast eye movements, resulting in more efficient visual search.

    • Users can easily scan the page and know they are in the right place.
    • They have option to learn more.
    • Key tasks are easily identified.

Design Principles Applied: Microbreaks

People often look to make use of the short periods of downtime, looking for quick activities they can do on their mobile phone.

Thinking about how the The City of Boston could encourage more people to sign for emergency alerts, an out-of-home campaign and PSAs seemed a good option. I designed the task to be quickly accomplished during a microbreak, which a resident might experience while commuting.

  • Use of a modal minimizes page load time.
  • The short form can be quickly completed.

Design Principles Applied: Prospective Memory

Prospective Memory is an aid used when you plan to do something at another time. Important tasks like building an emergency kit or creating a family emergency plan cannot be completed on a mobile device because of their complexity. For these two tasks I created quick interactions that allow the user to email a shopping list for an emergency kit, or the template for an emergency plan, enabling later follow-up.

Design Iterations – Initial Sketches

The sketches on the right show initial concepts for the boston.gov/ readyboston landing page. Designs explored included a grid of equals, visual framework, and accordion menu (shown from left to right). The first sketch of what became the final design appears on the far right. This option features a compact display that allows the user to quickly skim and interact with available content.

Design Iterations – Home Page Evolution

Progression of the landing page from initial concept to final design can be seen from left to right. Working within the framework of the existing design, the landing page was simplified to minimize the cost of visual search. Through the iteration process, the principle of proximity was added. In the first sketch, all buttons are presented in a column. In the second an third sketches, preparation steps are placed in separate groups from those that may be needed during an emergency.

Design Iterations – Secondary Pages

Throughout the sketching process, designs for secondary pages were considered. Due to the volume of content, the main goal was to break information down into small actionable steps so that users would not become overwhelmed.

Research Limitations & Future Work

Further research should be conducted to ensure the resources meet the needs of people who are physically or cognitively disabled, non-English speakers, individuals without internet access, commuters, and tourists. 

Additionally, this research did not explore how Boston residents might be motivated to more actively prepare for emergency evacuation. 

  • As resources are redesigned and shared, usability research should be conducted to understand results and inform future iterations.
  • There is also emerging research that suggests evacuation preparedness training might be conducted using AR / VR or other gamification strategies. The practicality of this should be explored.
Interact with the ProtoType

Please use Chrome of FireFox browsers for the best interaction experience.