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