TECHNOLOGY ADVANCEMENT AND OUTREACH

1
TECHNOLOGY ADVANCEMENT AND OUTREACH

• Sarah Kirchen, Drew Bittner,
• Scott Minos DOE
• Michael Thomas, Billie Newland, Wendy Littman
  EES
• Chris Stewart NREL

• Web Coordinators Meeting

• June 30, 2009
• Call-in 301-903-0671

2
Agenda

• Around the Room 15 min (Sarah)
• New Web Project Process 20 min (Michael and
  Billie)
• Usability Testing 20 min (Wendy)
• Social Media Update 10 min (Drew)
• New DOE/EERE Branding 15 min (Scott)
• EERE Web Redesign 5 min (Chris)
• Wrapup 5 min (Sarah)

3
Project Review Team Process

• What is the Project Review Team?

It is a group of people assembled to help project
teams comply with government and EERE standards.
4
Project Review Team Process

• Stages of the Process

• Identification
• Initiation
• Development
• Project Testing / QA
• Post-Implementation Support

5
Project Review Team Process

• Identification

At the beginning of your project, you receive an
introductory email from us.
PROJECT REVIEWTEAM
You fill out a project information form.
PROJECTTEAM
We record the project in our database, and we
tell you about our process.
Your team meets with our team.
6
Project Review Team Process

• Initiation

• You write a project charter.
• You create a task list and schedule.
• You make a case for any elements you want that
  are outside the norm.
• You send these items to the project facilitator,
  then meet with us to review them.

7
Project Review Team Process

• Development

• You plan for the necessary approvals and start
  working on the project.
• You meet with us monthly with a status.
• You submit the technology and architecture for
  approval.
• Search code, stat code, news, events, library and
  features are installed.

8
Project Review Team Process

• Project Testing / QA

• The project goes through a QA process to assess
  content, technical standards, and security
  issues.
• Your EERE program reviews the project.
• You meet with the Project Review Team again at
  that point, and any post-launch points of action
  and milestones are established.
• We give you the go-live authorization.

9
Project Review Team Process

• Post-Implementation Support

• You meet with us monthly to run through any
  outstanding points of action and milestones.

10
Project Review Team Process

• Your Roles and Responsibilities as the Project
  Team

• Information
• Approvals
• Justification
• Updates

11
Project Review Team Process

• Provide us with all required information about
  your project.

• Project Information Form
• Project Charter
• Project Task List and Schedule
• Content and Architecture
• Justification of Nonstandard Requests
• Monthly Status

12
Project Review Team Process

• Schedule all necessary approvals on your end.

• You will develop a schedule with input from your
  clients, approvers and us, the Project Review
  Team.
• From this will come the needed approvals for the
  project.

13
Project Review Team Process

• Justify any nonstandard requests.

• Our communication standards keep a sharp,
  organized, consistent look and feel to the Web
  sites. Prepare to make a very good case for
  anything you need thats outside the norm.

14
Project Review Team Process

• Keep us informed.

• Let us know how the project is going at monthly
  status meetings during development, and in
  monthly status meetings after launch, to keep
  everything on track for any outstanding points of
  action and milestones.

15
Project Review Team Process

• One last note

• Refer to the Communication Standards site early
  and often during your project for
• Web Project Management Guidelines
• Web Content Guidelines
• Web Technical Guidelines

16
Usability in a Nutshell
Agenda

• What is usability?
• Why does it matter?
• Tools of the trade
• Getting the most bang for your buck

17
Usability in a Nutshell

• What is Usability, Anyway?

• Usability measures how easy it is to accomplish a
  particular task using a particular tool.
• Concept has been around longer than the Web.
• Used to evaluate many different types of
  products.
• Idea is simple
• Give users what they want, the way they want it.
• Dont create obstacles.

18
Usability in a Nutshell

• Why Bother?

• Incorporating usability techniques into your
  design process makes smart business sense
  because
• It allows you to align user goals and business
  goals.
• Customers who cant find information on your site
  will make uninformed decisions then you have to
  spend money correcting those decisions.
• Customers who have a bad experience on Web sites
  often view the sponsoring organizations as
  untrustworthy.
• Customers who cant complete tasks on your sites
  instead contact the information center, or email
  you all of which increase the cost of doing
  business.
• According to a 1983 software maintenance book
  80 of maintenance comes from unforeseen or unmet
  user requirements.
• Management cares about risk and embarrassment.

19
Usability in a Nutshell

• Less Usable Design More Hidden Costs

Training Help desk Product revision Implementatio
n Detailed design UI structure User tasks/ bus
goals
Increased downstream costs
Rush through these steps
Resource investment
Inspired by Human Factors International
20
Usability in a Nutshell

• More Usable Design Less Hidden Costs

Reduced downstream costs
Training Help desk Product revision Implementatio
n Detailed design User interface structure User
task analysis/business goals
Incorporating usability techniques early on
Resource investment
Inspired by Human Factors International
21
Usability in a Nutshell

• If You Take Nothing Else Away from This.

• Anything you can do is better than doing nothing!
  
• You (or your boss) are not the typical user.

22
Usability in a Nutshell

• Tools of the Trade Initial Research Phase

• Questions
• Who is my audience?
• What do they want to do?
• Can they do what they want to do successfully on
  our current site?
• What are our business goals?
• Usability techniques
• User profiles and personas
• Surveys
• Interviews
• Focus groups
• User observation

23
Usability in a Nutshell

• User Profiles, Personas, and Scenarios

• User profiles Description of a particular user
  group, including demographic information,
  experience, expectations.
• Persona A fictitious person created to represent
  the information from the user profile.
• Scenario A description of a task your user (or
  persona) may want to accomplish, and the
  requirements/constraints your user may have in
  accomplishing that task.
• Useful for
• Focusing in on who your target audience is.
• Clarifying assumptions about those users and
  their tasks.
• Understanding how a user might perform a task,
  and the design implications that has.

24
Usability in a Nutshell

• Sample Persona and Scenario

• Persona John Greene, Business Traveler
• 37 years old software engineer
• Travels for work 3-4 times each year, and for
  pleasure 1-2 times each year.
• Has a wife and two children, ages 2 and 4.
• Enjoys his job, but his family comes first.
• Is considered firm and fair.
• Is fairly computer savvy.
• Scenario Find a Flight
• John wants to plan a trip from Chicago to LA to
  visit family. He is bringing his wife and kids
  along, and wants to go for about 4 days. It will
  have to be over the weekend, because his wife
  doesnt have much leave left this year. He wants
  the cheapest fare he can get, and hell need to
  rent a car big enough to haul luggage for 4.
  Hes staying with family, so no hotel is needed.
• He prefers to use Jet Blue, but is flexible if
  the price is right. He has 30 minutes during his
  lunch hour to research his travel, so hes in a
  hurry. If the price looks good, he also hopes to
  book some or all of his reservations with a
  credit card.

25
Usability in a Nutshell

• Surveys

• Useful for
• Casting a wide net quickly.
• Fast and cheap way to establish top tasks and/or
  problems with a current site.
• Weaknesses
• Can be difficult to get a representative sample.
• No opportunity for follow up questions.

26
Usability in a Nutshell

• Interviews

• Useful for
• Getting more in depth information.
• Ability to ask open ended questions and follow up
  questions.
• Weaknesses
• Can be time consuming.
• Interact with fewer participants.

27
Usability in a Nutshell

• Focus Groups

• Best done with 8-10 participants.
• Useful for
• Brainstorming, generating ideas and getting
  feedback.
• Best used very early in the development process.
• Weaknesses
• Participants may influence each other.
• Talking is different from doing.

28
Usability in a Nutshell

• User Observation

• Useful for
• Understanding how users try to accomplish
  particular tasks, and seeing roadblocks they
  encounter.
• Best done after youve got a good understanding
  of the task, and perhaps have done interviews.
• Weaknesses
• Can be time consuming.
• Interact with fewer participants.

29
Usability in a Nutshell

• Tools of the Trade Preparing for Design

• Questions
• What are the steps users would take to accomplish
  their tasks?
• How should I organize the site so it is intuitive
  to users?
• Usability techniques
• Task analysis
• Card sort

30
Usability in a Nutshell

• Task Analysis

• Useful for
• Identifying all the tasks that will be performed,
  the steps to completion, and the order of
  completion.
• Streamlining tasks to remove steps or other
  barriers to task completion.
• Differs from the scenarios because this covers
  all tasks, while a scenario describes one
  possible path through the range of tasks.
• Often shown as a flow chart or table.

31
Usability in a Nutshell

• Card Sort

• Useful for
• Understanding how your users group and label the
  information that will go on your site.
• Can be done online or by hand.

32
Usability in a Nutshell

• Tools of the Trade Testing your Design

• Question
• Can my users accomplish their top tasks with my
  architecture?
• Usability techniques
• Reverse card sort
• Paper prototyping

33
Usability in a Nutshell
Reverse Card Sort

• Useful for
• Validating the way you are grouping and labeling
  the information on your site.
• Done the same way a regular card sort is, except
  that you predefine the categories into which the
  user can sort items.

34
Usability in a Nutshell
Paper Prototyping

• A paper prototype, or wireframe, is a very simple
  black and white illustration showing the location
  and labels for the major elements on your user
  interface.
• Useful for
• Determining if users can find information on your
  new user interface.
• Catching biggest usability problems before
  spending on graphical mockups.
• Quick to develop and test.
• Weaknesses
• Will miss issues resulting from colors/layout
  can get around this by also testing an advanced
  prototype.

35
Usability in a Nutshell
Sample Paper Prototype (Wireframe)
36
Usability in a Nutshell
Tips for Getting the Most Bang for your Buck

• Remember Anything you can do is better than
  doing nothing!
• Focus first on what will make the most difference
  to the most users.
• Test as early as possible in the process.
• Test several times throughout the course of your
  project.
• Test with a minimum of 5 people use more if you
  can.
• If data appears inconsistent, do a few more
  sessions.
• Example of an inexpensive site redesign that
  incorporates usability
• Do an online survey to get info from users on top
  tasks/whats not working.
• Interview 5 users and watch them try to
  complete top tasks from survey.
• Maybe ask 5-10 users to complete an online card
  sort.
• Use the feedback to develop your info
  architecture and paper prototypes.
• Test paper prototypes with 5 people alter
  wireframes.
• Build site watch a few users complete top tasks
  on new site tweak.

37
Usability in a Nutshell
Contact Information

• Wendy Littman
• wendy.littman_at_hq.doe.gov
• 301-525-7521

38
Social Media Update

• EERE Blogging Tool
• We used Typepad to pilot blogs
• EERE is moving forward with installing its own
  blogging tool
• Programs will have the ability to create and
  administer blogs of their own
• EEREs blogging guidance is in review with DOE
  General Counsel
• EEREs blog charter is being reviewed by EEREs
  cybersecurity specialists.
• Facebook, Twitter, and YouTube
• DOE is still developing guidance for social media
  applications
• This is an excellent time to develop your
  strategy.
• Social Media Strategy
• Social media tools should be part of a
  comprehensive communications plan
• EERE wants a coordinated social media presence
• Submit your ideas to Drew Bittner for review and
  approval.

39
DOE/EERE Branding

• Purpose of Updated Branding

• DOE/EERE research, development, and deployment
  activities are in forefront of the public,
  politics, and industry
• DOE/EERE needs to update its design to improve
  accessibility of information to public, media,
  and other stakeholders
• Current identity is 7 years old
• Dated look may negatively impact effectiveness of
  message
• Use EERE funds efficiently by having one set of
  templates for everyone to use
• Not pay for multiple unique design systems

40
DOE/EERE Branding

• Project Goals

• Provide unified, professional, and modern
  identity system for all DOE/EERE communications
  products
• Create an engaging design to inspire audiences to
  take action
• Take DOE/EERE to the next level in terms of look
  and feel while still representing the
  organization as the federal governments premier
  authority on RE/EE technologies
• Create an identity system and guidance for
  programs to implement

41
DOE/EERE Branding

• Elements

• New color palette
• New typeface
• New DOE/EERE logo
• Program logos positioned below DOE/EERE logo to
  establish branding hierarchy
• Marketing URLs
• No more bluelines
• No more A Strong Energy Portfolio for a Strong
  America statement

42
DOE/EERE Branding

• Templates

• Technical documents (e.g fact sheets)
• Outreach documents (e.g, case studies and pocket
  folders)
• Exhibits
• PowerPoint
• Business cards
• Web banners
• Web template

43
DOE/EERE Branding
44
DOE/EERE Branding

• Typefaces

• Gotham is a modern, clean, geometric typeface
• EERE to use Gotham for headlines, Times Roman for
  body copy
• Arial used in electronic communications

45
DOE/EERE Branding

• Color Palette

• Updated colors are contemporary and relevant
• Color palette is flexible and able to address
  different tones of messages

46
DOE/EERE Branding

• Rollout to Programs

• Posting new templates and information on the
  Communication Standards site in July
• Soft launch
• Phil West approved use of new identity and
  templates
• Formal launch after the new Assistant Secretary
  Cathy Zoi approves the new identity
• Formal launch
• Once approved, formal roll out to the programs
  via
• E-mail announcements
• Webcast
• Contact Scott Minos at scott.minos_at_ee.doe.gov

47
EERE Web Redesign

• Project goals
• Process is underway
• Iterative improvements
• We invite your feedback and comments

48
Wrap Up

• Next Meeting

• Thursday July 23, 2009
• 130 300 pm
• Room 6A-110