CIM 643 students have engaged in quite a few HCD activities since the start of the semester! Soon they will be mashing up their own set of methods for designing solutions that serve real people’s needs.
In Sept 19 class, we had a sharing session highlighting key findings from student’s interviews with those impacted by natural hazards, heuristic review of the existing NHC website, and a competitive audit (which was edited and shared amongst students via a Google spreadsheet). Based on the statement starters from Sept 12’s class as well as findings from the competitive audit, the class came up with a list of opportunities (i.e. ideas for design improvements).
Below is a list of the sites the students did a competitive audit for – with the details of the audit living in a spreadsheet shared by the students.
From these are some really nice examples of presenting visual data on maps, easy-to-use navigation, and addressing accessibility. Here are just a few:
- Windyty‘s visually compelling and animated map
- Weatherbug – has a nice feature of showing camera feeds of current conditions, this specific example may be too micro level for NHC but could be interesting to include live satellite feeds, presented like Windyty
- Florida Disaster‘s use (not necessarily the designs style) for banner sized graphics for active storms
- ECMWF‘s top right navigation which provides an easy access point for different types of users
- OpenStreetMaps use of layers on a map – this idea could be used with filters to allow the user to layer different weather information
- Estonia Weather Service – providing audio clips of updates/alerts that blind people could access and listen to
Sites/Apps Evaluated for Competitive Audit
The main takeaway was specifying features or layout elements from competitor sites that students thought would improve the usability and design of the NHC site. Using ideas generated from last week’s statement starters and adding new ones from our class discussion, we categorized our redesign ideas as part of an affinity mapping exercise into the following categories:
- website styling/branding
- website organization – navigation/search
- landing page
- callouts for key information such as current storms
- create clear entry points for different types of users: experts vs. other
- multilingual, especially Spanish
- terminology, defining common scientific terms or acronyms
- accessibility and responsiveness
- map and data visualization
From there, we went back for a second round of empathy mapping, this time focusing on 3 key users of the NHC website. In the sharing session, students made the astute observation that while the NHC site is trying to serve a really broad audience, a lot of the general population turns to intermediary websites/resources for their weather information. Thus, we chose to focus not on the layman user and rather on those people who would need to go straight to the source, i.e. the NHC website, to get the information they need.
Students are now working to turn these empathy mappings into Persona documents. Here is a synthesis of each persona after the mapping exercise.
- Brain the Scientist, who comes to the NHC website to access data so she can use with her own scripts to create custom maps and charts that she uses on her own blog.
- Mary the Media Maven, who works for a Spanish language media company, and visits the NHC website to find storm alerts and translates them into Spanish for a more layman audience. She herself had to learn how to interpret the scientific weather and hurricane information, and it was a bit painstaking as the information is not always so clearly organized or presented.
- Jerry the Sailor, who typically checks NHC to plan his trips out on his sailboat. He checks the NHC site regularly, typically from his smartphone and sometimes from his home computer, trying to plan ahead for a 5-day sailing trip. When he’s out on the water, he has very limited connectivity and wants to get quick information to determine any storm effects along his route. In particular, he wants to know if he needs to change his route and/or come back to shore early.
Next, the class tried to put themselves in the shoes of these users and list their key objectives. Initially, the objectives were pretty high level. When possible, we tried to get more specific though this proved to be a bit challenging without more interviews or personal experience with these category of users.
Translating User Objectives into User Flows
From here, we went on to attempt initial user flows, which were also high-level given the list of identified objectives. Nonetheless, the students got to the heart of the NHC’s usability issues: streamlining the process and eliminating a need to recall in exchange for recognizable, accessible ways for users to get essential information. We started out trying to do shorthand notation (used and outlined by many including UX Pin) where you write what the user sees above a line and what the user does below the line. Ultimately, particularly in the case of Jerry, moving to a more traditional user flow was much easier to grasp.
Now that we have gone through at least 1 user flow per persona, each team will translate these user flows to digital (potentially in Lucid Chart) and create additional user flows before starting the wireframing process. Best of luck to them, this is no small feat (and certainly not so small a website)!
Q&A with Hurricane Expert (interviewing as looking)
We were fortunate to have Brian McNoldy, Senior Research Associate at University of Miami’s Rosenstiel School of Marine and Atmospheric Science, come to our class on Sept 12 and share his insights on the NHC website, key information that both experts and general users could benefits from accessing on the NHC website, constraints of NHC as a government website and to engage in a general Q&A by our students. Brian’s research is specifically on how to better predict the path of hurricanes, thus he is extremely knowledgeable on the subject of hurricanes and the how to use the NHC website. He also hosts his own blog where to provides regular updates about storm patterns and he has created scripts to generate his own maps. For example, his Global Tropical Cyclone Tracks map shows all active tropical cyclones in one map (rather than limiting it to specific segments of the globe).
One key thing we all came to realize is how NHC is trying to serve a large audience and doing so with limited resources. Many commercial entities (think weatherbug.com, Weather Underground, weather.com, regional/local news, etc.) use NHC’s website as the source of their information and then have their different ways to present this information as part of their business model. While we as users tend to want to see information relevant to us on a hyperlocal level, this is not really within NHC’s scope but rather covered by weather.gov. In fact, it was hard to see, but on the NHC website, you can actually find out your local forecast by entering your location in a small field in the top right corner and submitting it to then be taken to weather.gov.
Also according to Brian, there is some great informative information for laypeople, for example learning about storm surge. The class saw potential for further developing the education resources to be more user-friendly for a general population.
Statement Starters (as understanding)
Using the Luma HCD framework, we used this opportunity of having an expert like Brian in the room to make a list of issues. Continuing down the education path, students identified a lack of education re: hurricanes and weather concepts/terminology as a barrier to a general population. Also, they saw a general issue with general users not knowing how to interpret maps and graphics that scientists greatly value, ultimately bringing up a possible opportunity to redesign the site to optimize the experience for an expert user vs. a layperson.
After creating a list of issues, we then used them to complete the following statements:
- “How might we ______”
- “In what ways might we ______”
- “How to ______”
The following questions were then used to brainstorm possible opportunities for improving the web’s usability and overall user experience:
- How might we improve education regarding hurricanes, storm surges, etc.?
- How might we (general users) better understand hurricane terminology?
- In what ways might we let people know to care about storm surge?
- How to (get general users more proficient at) reading maps?
- How to (get general users more proficient at) understanding what the hurricane track forecast cone means?
- Information Architecture *
- How to reduce navigation confusion?
- How to create entry points for experts that are different for general public?
- In what ways might we store presets specific to a user?
The education angle was of interest and certainly remains important, but tackling information architecture and navigation is particularly appropriate for the scope of our classes.
After sharing individual heuristic reviews of digital products, the class did a Stakeholder Mapping exercise to identify types of people who would benefit from using the National Hurricane Center’s website. We used the democratic method whereby all students were empowered with a stack of Post-It notes and wrote down several stakeholders but writing ideally 1 type of person per Post-It. We then organized the Post-It into similar categories, which has been translated into digital form using Lucid Chart (PDF here).
From here, students individually conducted interviews with people they knew had been affected by natural hazards: including longtime Miami residents affected by Hurricane Andrew, a friend in Texas affected by Katrina and Ike, a blind colleague who has to rely on friends and family for major weather-related information.
For the first project, in CIM 643/690, we threw students into the proverbial deep end with the objective to improve the usability of the rather large National Hurricane Center’s website. Below is the design brief, stay tuned to see what the students create!
Design Brief (also in PDF)
The objective for this assignment is to research and design solutions for improving the design of the National Hurricane Center (NHC) website (http://www.nhc.noaa.gov/). You will work in teams of 3-4 to do the research and concept ideation as part of CIM 643 and will build interactive prototypes of your final concept in CIM 690.
Your design goal is to improve the usability of the NHC site including prototyping a version of the site that is responsive (where the site’s design adapts to different devices) and accessible to users relying on screen readers to interpret the website.
The National Hurricane Center (NHC) is the division of the United States’ National Weather Service responsible for tracking and predicting weather systems within the tropics between the Prime Meridian and the 140th meridian west poleward to the 30th parallel north in the northeast Pacific ocean and the 31st parallel north in the northern Atlantic ocean (see image of zone). The NHC aims to be a trusted source, and first alert and preferred partner for environmental prediction services.
The NHC is a team of science, technical and administrative specialists dedicated to saving lives, mitigating property loss, and improving economic efficiency by issuing the best watches, warnings, forecasts and analyses of hazardous tropical weather, and by increasing understanding of these hazards. NHC is part of NCEP – National Centers for Environmental Prediction.
Research & Design
Before designing a solution, each team needs to understand the context for its use. We will employ human centered design (HCD) techniques both in-class and outside of class to identify target users, the objectives of the NHC, and the needs of its users. This includes but not limited to stakeholder mapping, interviewing, and heuristic review. You will have an opportunity to ask questions from a hurricane subject matter expert (SME) in class, and you will be required to identify and seek out additional key stakeholders.
You will learn principles for designing responsive and accessible websites in CIM 690.