1. 1 EERE Communications EERE Web Coordinators Meeting 11/19/2015

2. 2 Web Coordinators Meeting Around the Room — Carolyn, Alex New government-wide design standards Update from DOE Web Council Communication Standards: Update and Migration – Elizabeth Spencer Communication Standards: Lessons Learned – Theresa von Kuegelgen Agenda

3. 3 Web Coordinators Meeting Around the Room — Carolyn, Alex New government-wide design standards Update from DOE Web Council Communication Standards: Update and Migration – Elizabeth Spencer Communication Standards: Lessons Learned – Theresa von Kuegelgen Agenda

4. 4 Web Coordinators Meeting Around the Room — Carolyn, Alex New government-wide design standards Update from DOE Web Council Communication Standards: Update and Migration – Elizabeth Spencer Communication Standards: Lessons Learned – Theresa von Kuegelgen Agenda

5. 5 Web Coordinators Meeting Around the Room — Carolyn, Alex New government-wide design standards Update from DOE Web Council Communication Standards: Update and Migration – Elizabeth Spencer Communication Standards: Lessons Learned – Theresa von Kuegelgen Agenda

6. 6 Communication Standards Update and Migration Communication Standards has migrated to Energy.gov! You can find the new website at: http://energy.gov/eere/communicationstandards/ Remember to update your bookmarks! (You can also find a link on the Communications Team page on About us: energy.gov/eere/about-us/communications-team)energy.gov/eere/about-us/communications-team But how did we get here? This project ran throughout Fiscal Year 2015.

7. 7 Communication Standards Update and Migration Updating the Content and Migrating it to Energy.gov

8. 8 Communication Standards Update and Migration The Challenge By Fiscal Year 2015, many of EERE’s websites had migrated into Drupal. We had more than 90 content pages about developing websites, and most of them referred to websites outside of Drupal. EERE also had websites inside and outside of Energy.gov’s Drupal environment. How could we update Communication Standards in a way that helped everyone? Communication Standards needs to set a good example and be in the standard hosting environment.

9. 9 Communication Standards Update and Migration The Solution: A Complete Content Overhaul We worked with content specialists—particularly Drupal specialists. How can we make content accessible in Drupal? What can content specialists do by themselves (because that needs to be on Communication Standards!) What do people need Site Coordinators for? What should we do with our coding standards for websites outside of Energy.gov? Usability testing: What do our users expect to see?

10. 10 Communication Standards Update and Migration The Numbers We updated 91 pages, mostly in the Website and About the Communication Standards Website sections Deleted 18 pages Created 11 pages When the content updates were all complete on the old WWW1 website, we migrated 99 pages to Energy.gov.

11. 11 Communication Standards Update and Migration What’s New? The Website section is ALL about Drupal. The content about coding any website that’s outside of Drupal is in a small section, with no left navigation.

12. 12 Communication Standards Update and Migration

13. 13 Communication Standards Update and Migration What’s New? Lots of new content: How to code in Drupal, including page types, block types, linking in Energy.gov, creating webforms in Energy.gov, and more. Energy QA Checklist, for checking to see that your pages meet all of the EERE and federal website requirements Streamlined Web writing requirements and best practices.

14. 14 Communication Standards Update and Migration Title Tag Review

15. 15 Communication Standards Migration: Title Tag Review After the migration, we reviewed the title tags (H1s) in the Energy.gov template. During the review, we discovered that some of the title tags needed more specificity due to: Sites in the EERE template had their site names in the banners. In Energy.gov, users rely on left navigation and headers to let them know what site they are on. New context User experience

16. 16 BEFORE REVIEW Communication Standards Migration: Title Tag Review

17. 17 AFTER REVIEW Communication Standards Migration: Title Tag Review

18. 18 BEFORE REVIEW Communication Standards Migration: Title Tag Review

19. 19 AFTER REVIEW Communication Standards Migration: Title Tag Review

20. 20 BEFORE REVIEW Communication Standards Migration: Title Tag Review

21. 21 AFTER REVIEW Communication Standards Migration: Title Tag Review

22. 22 Communication Standards Update and Migration Lessons Learned from UX Research Study

23. 23 www1.eere.energy.gov/communicationstandards/ Website UX Study: Background

24. 24 Website UX Study: Purpose EERE had major content updates for its Websites section, which involved revising the information architecture (IA). Before finalizing the IA, we proposed a study to help ensure user friendly IA due to significant content changes.

25. 25 Website UX Study: Three Methodologies 1. Survey (Quantitative/Qualitative) Identify content of greatest interest Identify some common tasks Learn more about audience segments Determine user overall satisfaction with current website Collect comments/suggestions from users for improvements 2. Tree Testing (Quantitative) Test the IA with users and modify as needed 3. Usability Testing (Qualitative/Quantitative) Test the IA with users and modify as needed

26. 26 Website UX Study: Participant Recruitment Because the NREL Communications Office has a large number of actual users, we recruited participants via our email distribution lists.

27. 27 Methodology #1 – User Survey Survey Monkey Thirty-four respondents Nine questions: 1.What best describes your role? 2.How often do you visit the website? 3.When you have visited the website, what information were you looking for or what task were you trying to accomplish? 4.Were you successful in accomplishing your task? 5.How likely is it you would recommend the website to a colleague? (Net Promoter Score) 6.How interested are you in the following Web governance information? 7.How interested are you in the requirements/process for creating the following? 8.How interested are you in requirements and guidance on the following? 9.Do you have any comments or suggestions for the website?

28. 28 Q3: When you have visited the website, what information were you looking for or what task were you trying to accomplish? Top Tasks PDFs Style guide Logos WGT guidance/requirements User Survey Helped Determine Top Tasks on Website

29. 29 Net Promoter Score A Net Promoter Score measures a website’s overall user loyalty and satisfaction. Also it provides a score for benchmarking. EERE Communications Standards score: 7.44. How the score is calculated: Promoters (score 9-10) are loyal, enthusiastic users Passives (score 7-8) are satisfied, but unenthusiastic users Detractors (score 0-6) are dissatisfied/unhappy users.

30. 30 Web Governance, Roles & Responsibilities Federal Requirements Project Process & Approvals Navigation Web Writing PDFs Graphics & Images Videos, Animations, & Audio Content Management System Applications Development Templates Maintenance Content Analysis User Experience Research Tools Newsletters Social Media Survey Results: Information Architecture – v.1

31. 31 Will users find information about application templates? Will users be able to find Content Analysis? Will users know to go to Content Management System for energy.gov Drupal information? Will users look under User Experience Research>Tools to find information on Crazy Egg, etc.? Will users look under Social Media for Widgets? Survey Results: New Research Questions

32. 32 Treejack (and other IA testing tools) allows you to remotely test IA without visual distractions or navigation aids. The tool answers: – Is my information hierarchy well structured? – Are the taxonomy and navigation labelling appropriate? – Can people find what they’re looking for? Methodology #2 – Tree Testing Tool

33. 33 Tree Test Results

34. 34 Web Governance, Roles & Responsibilities Federal Requirements Project Process & Approvals Templates Widgets Navigation Web Writing PDFs Graphics & Images Videos, Animations & Audio Energy.gov Content Management System Coding Requirements Widgets Maintenance Content Analysis User Experience Research Tools Newsletters Social Media Tree Test Results: Information Architecture – v.2

35. 35 Will users find Templates under Project Process & Approvals? Why do some users think Content Analysis is related to UX/UCD or Content Management System? Will users find Crazy Egg under User Experience Research>Tools? Should we keep Content Management System spelled out or use CMS? Tree Test Results: New Research Questions

36. 36 Methodology #3 – Usability Testing Recruited five participants who hadn’t participated in tree testing Moderated, in-person usability testing Morae software – Recorded video of participants mouse movements and clicks, and facial expressions – Surveyed participants after test (System Usability Scale questionnaire)

37. 37

38. 38 The System Usability Scale (SUS) provides a “quick and dirty,” reliable tool for measuring usability. Originally created by John Brooke in 1986, it allows you to evaluate a wide variety of products and services, including hardware, software, mobile devices, websites and applications. Benefits of using a SUS SUS has become an industry standard, with references in over 1300 articles and publications. The noted benefits of using SUS include that it: Is a very easy scale to administer to participants Can be used on small sample sizes with reliable results Is valid – it can effectively differentiate between usable and unusable systems. SUS Score A SUS score above a 68 is considered above average. Anything below 68 is below average. Source: Usability.gov System Usability Scale

39. 39 Concern# of Ps Affected RationaleSeverityQuick or Long-Term Fix Recommendation Most Ps couldn’t find “Templates” under “Project Process & Approvals.” 4It’s an important task when developing an application. HighQuickMove up to 1 st level left nav on its own or use existing “Templates & Navigation.” Note: some users may still go to “Publications...Templates” first in the top nav; suggest providing link to this page from the pub templates page. There was some hesitancy finding “QA Checklists” for Videos. 1Webinars are commonly posted on EERE websites. LowQuickProvide links to QA checklists from the Videos, Audio, and Animations pages. This will accommodate users who might go to the Video page to find the checklist, etc. When looking for info. on CMS, the P who failed and the P who hesitated were looking for “content” in terminology. 2This is new info. on the website. LowQuickSpell out CMS as intended and per best practice. Some users might not know what a “Content Analysis” is, confusing it with UX research. They may have done so in the survey as well. Some might not know what UX research is. 3Because UX is of great interest per survey, it’s important for users to distinguish between the two. HighQuick/Long- Term Because it might be a comprehension issue, needs more research, possibly a card sort. Overall, the term “analysis” needs to be carefully used. Potential quick fixes: 1) change “Content Analysis” to “Content Inventory & Strategy” as H1? 2) Change “User Experience Research” to “User Experience Research & Analysis” ? Usability Concerns and Recommendations

40. 40 Web Governance, Roles & Responsibilities Federal Requirements Project Process & Approvals Templates Navigation Web Writing PDFs Graphics & Images Videos, Animations & Audio Energy.gov Content Management System Maintenance Content Inventory & Strategy (in process of being updated) User Experience Research & Statistics Newsletters Social Media User Testing: Information Architecture – v.3

41. 41 Next meeting: December 17, 1:00-2:00 ET 11-12 Mountain Golden: X300 & HQ: 5E-069