National Hurricane Center 2.0

Creating Wireframes

Beginning to restructure the National Hurricane Center for class, we reviewed how wireframes can lead to organization and an easy mock-up or prototype for several media forms. Reviewing the website was quite extensive and for user testing there had to be a focus or objective as to work on the whole site is time consuming. For this reason, research into stakeholders led to concerns about outdoor pets and activities involving children and the elderly. During stakeholder interviews, it was seen that some receive their information from others and chose to target groups that have even further limit on information access or use it for safety procedures. By beginning with simple boxes, I was able to layout a map of the pages that were needed to be adapted or created. After, I created images using Adobe Illustrator and linked them using hotspots using Invision.

Aesthtetics and a grid system were used to help with better symmetry as I continue to improve with Illustrator. Practice makes perfect!
Aesthtetics and a grid system were used to help with better symmetry as I continue to improve with Illustrator. Practice makes perfect!

This mock website was sent to an Oceanographer from CUNY that uses the NHC website for his work, an IT/app developer and a Web/graphics designer. They were given three tasks to complete using the mock website and were not given a time limit. They were immediately completed.

The website can be seen and interacted with here : https://invis.io/468ZG1G2F#/197689993_Nhc_Home

Tasks for Usability Test

The three testers were contacted by email or instant message and directed to use the site on a desktop computer.

Here are the 3 tasks you have to do for this easy clicking website. It is very basic but just give feedback on the tasks you were asked to do. Should take 3-5 minutes. 5-7min total, including feedback. Thank you.

1. What are the ways that you can find immediate information and/or advisories for children, outdoor pets and activities?

 

2. Is there supplemental information that is not located in the education section about hurricane preparation?

3. What are the different ways to turn off notifications and where does this lead you?

Outdoor plants, flying debris were also motivators to make sure high wind advisories are highlighted. Also, a practical education guide was focused on as the simple preparations many times are overlooked or go with lack of planning.
Outdoor plants, flying debris were also motivators to make sure high wind advisories are highlighted. Also, a practical education guide was focused on as the simple preparations many times are overlooked or go with lack of planning.
User Feedback

Findings:

There needs to be a more natural flow

  • Suggestion: IT and Web designer suggested Add/fix up navbar for better orientation

The short snippets of education that were to be located as part of the task were found to be too little. As this was for task execution, it is a good example of how the education portion is focused on and how different information is valuable for different people.

Notifications were easy to find and information was quickly attainable

  • Suggestion: Oceanographer suggested to reincorporate levels of advisory into notifications to compare current state on a scale so that viewers can note how severe an advisory might be in comparison. Referred me back to NHC as part of feedback.

Each user answered differently for the first question yet all answers were correct; there are several ways to get information for child and pet safety

Supplemental information was not easily accessible or misunderstood as task. Need to be more specific in task about what supplemental information is being asked for

  • Recommended by IT and Web Designer: continue to work on layout and clean any pixilation that may still be on sight. Maps, text, logos
    • Suggestion: Next cleanup of website for second wave testing, improve integrity and look of website
  • Recommended by Oceanographer: If safety and education are a focus, there should be a notification if my area should evacuate.
    • Suggestion: Implement Storm severity scale and evacuation map by zip code under Notifications

Notes:

Task 1: What are the ways that you can find immediate information and/or advisories for children, outdoor pets and activities?

This task was quickly performed as intended by 2 of 3 users. Information is located under Education and Notifications – Special Precautions section

One user stated map on home screen displays enough information and used local search to check weather in area.

Task 2 question may lead users to return and change answer as it is a continuation. The Notifications – Special Precautions was answered by 2 of 3 but reliability testing questions if Task 2 effected response.

Task 2: Is there supplemental information that is not located in the education section about hurricane preparation?

While users did information for Task 1, this question was vague for all three users and they attempted their best response. The Oceanographer made suggestions that are very valuable in continuing the construction of the website by referring back to the site.

Task must be clarified as the Editor’s Article feature has supplemental information. It may be that the feature was glossed over looking for information that is categorized differently or expected to be in a clustered or more official format. Eye-tracking technology would be a great insight into this question as to see how long or little did users look at Editor’s Article Headline.

Reading an article may also be unattractive to some users as it involves time and the word article can be intimidating for those looking for quick information

Task 3: What are the different ways to turn off notifications and where does this lead you?

Users were able to turn off the notification bar by clicking it and seeing what is urgent.

One user (It and Web Designer) said he had no idea, however, they spent a lot of time searching and experimenting for Task 1 or 2. I question whether this was task exhaustion and/or the notification counter was restarted by the testing website which could have led to his confusion. Their advanced knowledge of web design and little knowledge of the project left expectations of more interactivity and options.

User was able to go to Notification Bell and also used Notification Footer. They stated they did not know how to turn on/off notifications which is a great additional feature for someone who visits the website daily for work. They may not want notifications each time.

Thoughts at the end:

Different users have different levels of needs.

  • Profile feature so website recognizes who is visiting and preferences
  • Notification on/off switch for profiles
  • Profile would allow for customization of layout, favorites or “Go To” options

Add complexity

  • Notifications section should have a spectrum showing where the advisory is compared to other categories of storm for comparison
  • Make education section seem fuller so that users do not have to rely on outside sources

Work on web designing skills

  • Work on navigation bar and drop down menus
  • Continue developing aesthetics and grid system practice
The next round of user testing will be focusing on Pirate Captains as they must be aware of the dangers that landlubbers don't be knowin'.
The next round of user testing will be focusing on Pirate Captains as they must be aware of the dangers that landlubbers don’t be knowin’.