Web strategy
- 1. Presented by Barbara Pritchard Coordinated by Alex Green Website Strategy Planning for Nonprofits
- 2. 501 Commons HandsOn Tech brown bag Website Strategy Did you know? Online giving grew 10.7% in 2012 compared to 2011 ⢠Large nonprofits up 7.2% ⢠Medium sized nonprofits up 14.3% ⢠Small nonprofits up 11.8% Source: Blackbaud 2012 Charitable Giving Report Source: Dunham+Company, Direct Mail Study
- 3. 501 Commons HandsOn Tech brown bag Website Strategy But where to start? Always rememberâŚ. You are not designing for yourself. Strategies to help develop your digital plan for your audience: ⢠Stakeholder & User Interviews ⢠Personas ⢠Heuristic Analysis ⢠User Experience Design Overview
- 4. 501 Commons HandsOn Tech brown bag Website Strategy Information Architecture IA is aâŚ. âOn the internet, information architecture means how a website's content is organized and presented to its users to facilitate navigation and search functions.â Source: BusinessDictionary.com
- 5. 501 Commons HandsOn Tech brown bag Website Strategy Stakeholder Interviews A stakeholder is anybody who is part of an organization and can affect or is affected by its web content, branding and/or the information provided through the organizationâs digital offerings.
- 6. 501 Commons HandsOn Tech brown bag Website Strategy Stakeholder Interviews 1. Identify primary the stakeholders. Examples: Executive Director, Board Members, Fundraisers, Accounting, Content Mangers, Marketing Managers, Volunteer Coordinators, IT. 2. Prep your questions Examples: ⢠From your perspective, what are some of the critical audiences for the website? ⢠What are the most important things people can do, or actions they can take on the website? ⢠How can the website support our organizations mission? ⢠How do you personally use the website? ⢠What kind of information, features or functionality needs to be there that isnât now? ⢠What new initiatives do you have planned for the next 1-3 years? ⢠Who would you consider competitors of the organization? 3. Listen & Take notes Your opinion matters, but should not during these interviews. Verbalize your understanding (âIf I understood youâŚâ), Use neutral phrases to encourage the interviewee (âI seeâ), Listen actively for meaning and emotion as well as for the facts.
- 7. 501 Commons HandsOn Tech brown bag Website Strategy User Interviews & Usability testing Get to know the End Users of your organizations digital offerings â the people that visit your site. Who are they and what do they need from your website? Examples: Beneficiaries, Donors, Volunteers.
- 8. 501 Commons HandsOn Tech brown bag Website Strategy User Interviews & Usability testing 1. Surveys â Find out whatâs most important to your users Rule of thumb â Keep it simple, write questions at 7th grade reading level. Examples using a 5 point scale: ⢠How often do you <topic>?âŚNever, Rarely, Occasionally, Frequently, Often ⢠How important is <topic>?...Not at all, A little, Somewhat, Very much, Extremely. ⢠How much do you agree or disagree with <statement>? Strongly disagree, Disagree, Neutral, Agree, Strongly Agree. Examples of open ended questions: ⢠What is the purpose of your visit to our website? ⢠Were you able to complete your task today? ⢠If you were not able to complete the task, please explain why. 2. User Testing Define a specific task or tasks and ask the user to walk you through achieving the task. Do not lead the test subject. ⢠Were they able to achieve the task? ⢠How long did it take them? ⢠Were there points of frustration? ⢠Did you uncover what the user was expecting to happen?
- 9. 501 Commons HandsOn Tech brown bag Website Strategy Personas User Experience definition of Personas: âPersonas are fictional characters created to represent the different user types within a targeted demographic, attitude and/or behavior set that might use a site, brand or product in a similar way.â Source: Wikipedia, Persona (User Experience)
- 10. 501 Commons HandsOn Tech brown bag Website Strategy Persona Examples Profile Gender Age Occupation Character Description Site Usage Web Confidence & Context Brand Association Environmental Attitude Source: Boagworld, âAn experience with User Personasâ
- 11. 501 Commons HandsOn Tech brown bag Website Strategy Persona Examples Age Location Salary Online Activies Offline Activities Bio Technical Comfort Social Comfort (online) Mobile Usage Key entre trigger puts Motivation to use client, brand or project Goals Brands Source: Dylaunx.com, âCorporate site redesign, A process Case Studyâ
- 12. 501 Commons HandsOn Tech brown bag Website Strategy Persona Examples Source: Advertising Communication Technology, âTargetâ
- 13. 501 Commons HandsOn Tech brown bag Website Strategy Personas As you map out your site keep asking questionsâŚ. Examples: ⢠Does feature X benefit a persona? ⢠What do I need to explain to support this persona? ⢠What sort of language should I use to make sure this persona understands the message? ⢠What tone should be used to communicate to this persona? ⢠Will this persona be able to achieve their goal quickly and easily? ⢠Does my homepage speak to each persona? Can they get to where they need to go easily?
- 14. 501 Commons HandsOn Tech brown bag Website Strategy Heuristic Evaluation âHeuristic evaluation (Nielsen and Molich, 1990; Nielsen 1994) is a usability engineering method for finding the usability problems in a user interface design so that they can be attended to as part of an iterative design process.â Source: Nielsen Norman Group, âHow to conduct a Heuristic Evaluationâ Can be performed on⌠⢠Your existing website. ⢠Competitor websites ⢠Wireframes or design comps
- 15. 501 Commons HandsOn Tech brown bag Website Strategy Heuristic Evaluation First, define use cases (ideally of personas) Examples: ⢠Joe is researching volunteer opportunities and found our website via a Google Search. He doesnât know anything about us yet, and is trying to determine if weâre a fit. ⢠Betty, a potential client, heard about our services and is seeking our support. Sheâs heard good things, but hasnât reached out for help before. ⢠Jane is deciding on her holiday contributions. Sheâs donated to us annually, and is familiar with our mission. Sheâs also been considering setting up monthly automatic donations, but hasnât done that before.
- 16. 501 Commons HandsOn Tech brown bag Website Strategy Heuristic Evaluation Template provided by Jason Levine, UX Director at Ramp, UX & Usability Instructor at the University of Washington
- 17. 501 Commons HandsOn Tech brown bag Website Strategy Heuristic Evaluation Template provided by Jason Levine, UX Director at Ramp, UX & Usability Instructor at the University of Washington
- 18. 501 Commons HandsOn Tech brown bag Website Strategy Heuristic Evaluation Template provided by Jason Levine, UX Director at Ramp, UX & Usability Instructor at the University of Washington
- 19. 501 Commons HandsOn Tech brown bag Website Strategy Additional IA Terminology User Experience Design includes: ⢠Content Analysis â What content do you have? What do you need? Start with an inventory. This is usually done in Excel or some sort of Matrix. ⢠Site Mapping â Defining pages, subpages, and overall hierarchy of content. ⢠User Interaction flows â The movement of your user trough a task. For example, what steps need to be taken to send a donation, sign up to volunteer, login to the siteâŚ. ⢠Wireframes â Defining the content to include per page and the overall structure of the individual pages. ⢠Functional Specification â Annotating the wireframe to explain user interaction (rollover states, where things should link to, how things should function) as well as defining system requirements (what browsers it must work on, what framework should it be build in, etc).
- 20. 501 Commons HandsOn Tech brown bag Website Strategy Q & A Thank You! Barbara Pritchard [email protected] Alex Green [email protected]
- 21. 501 Commons HandsOn Tech brown bag Website Strategy Resources We can help you further! ⢠For info on: o Future workshops on technological applications, social media methods, and other topics o Participating in a free tech assessment of your nonprofit ⢠Contact us: [email protected]
Editor's Notes
- #2: Intro â about me and about the session.
- #4: When kicking off a new website or planning a redesign of an existing site, one of the toughest areas youâll face is just where to begin. Today weâll go over a few things you can do that will help you develop your strategy and be able to effectively work with designers and developers to achieve your digital goals. The topics covered will help you design for your audience, not for yourself.
- #5: All the topics weâll discuss lead to the overarching goal of developing your sites information architecture so I want to make sure everyone knows this term. Some people equate it to Site Maps, but itâs so much more. Everything weâll touch on today is part of IA planning.
- #6: Stakeholders offer expertise and insight into what their specific digital needs are. These are casual conversations with a single individual or a small group. If possible have someone with you that can take notes allowing you to focus on the conversation.
- #7: Stakeholders offer expertise and insight into what their specific digital needs are. These are casual conversations with a single individual or a small group. If possible have someone with you that can take notes allowing you to focus on the conversation.
- #9: Surveyâs are a great way to gauge the priorities of your website users. There are free tools out there, such as Surveymonkey.com that allow you easily gather this data. User testing can be done on your site, but also consider seeing how user interact with competitor sites during your planning phase.
- #14: Personas give you a ârealâ person that keeps you focused and helps when you are making design decisions.
- #15: A Heuristic Evaluation can be done on your existing site, but I also recommend that you do it on competitor sites. You may discover that a feature or design you admired, isnât achieving the goals. This exercise can help you determine what does and doesnât work based on the scenarios you created for your personas.
- #17: There are a number of templates online for Heuristic evaluation. With a simple google search you can find a few. This is one of my favorites that I originally received from Jason Levine (UX Director at Ramp & MCDM Instructor at the University of Washington). With each one take specific notes on why you ranked it the way you did. Specific call outsâŚClear indication â Breadcrumbs, highlighted state on navigation
- #18: Examples of metaphors:Tabs as navigation Icons: Shopping cart button, âHelpâ question mark, Calendar icons, Map iconDropbox iconTasks are in terms familiar to the user â make sure language is simple, and terms will make sense to Joe, Jane & Betty.
- #19: Based on the use cases, are goals being supported?
- #20: What weâve discussed are tools and tips on how to wrap your head around your site planning. Iâm not going to dive into these topics, but I wanted to provide you with a few terms youâll hear in reference to web design. Iâm then curious to hear from you if youâd like any of these topics to offered in a separate presentation.