SlideShare a Scribd company logo
presents



                       Kill The Noise
Prioritize your Website with Wireframes and Strategic
                Information Architecture

                                     Hosted by
     Kelley Jarrett, Marketing Manager and Web Strategist, GUIDE Creative
   Guest Panelist: Anthony Harris, Interactive Design Manager, GUIDE Creative
Why is Visual Strategy Important?
YOUR WEBSITE MAY SAY SO MUCH IT SAYS NOTHING AT ALL

PROVIDES AUDIENCE-CENTRIC CONTENT AND NAVIGATION

PROMOTES CLARITY AND FOCUS
The Importance of Prioritizing Your Content
Prepare to Reduce the Noise:
REVIEW YOUR WEBSITE AND ASK YOURSELF:

What three user tasks are the highest priority for your organization?

Are you giving that user task the loudest voice?

Are less important tasks competing with your critical tasks?
Visual Prioritization
    YOUR WEBSITE        YOUR AUDIENCE
Wireframes Help Prioritize
SHOULD BE COMPLETED AFTER AUDIENCE ANALYSIS AND BEFORE VISUAL
DESIGN

HELP TAKE YOUR WEBSITE FROM SUBJECTIVE TO OBJECTIVE.
Wireframes Help Prioritize
IDENTIFY THE TOP
10 TASKS AND PRIORITIZE
IMPORTANCE

WHEN CREATING A
WIREFRAME, CONSIDER:
  Position
  Size
  Contrast
  Calls to Action
DOCUMENT WHY DECISIONS WERE
MADE. PREVENTS COMPETITION
AND “CONTENT CREEP”
Audience-Centric Navigation
    YOUR WEBSITE      YOUR AUDIENCE
Online Card Sorting
                 Online Card Sorting gives your team the ability to determine
                 the ideal structure of your new navigation by grouping pages and
                 tasks into common categories and sorted by importance. This data
                 can be used to create a new sitemap and to drive the visual design
                 of the new interface of your site.
Onsite Card Sorting
                      The Onsite Card Sorting allows us
                      to work side by side with your team
                      in developing the navigation and
                      interface of your site. Unlike the
                      Online Card Sort, conducting the
                      exercise in person can lead to
                      revealing conversations about the
                      nature of your audience and the
                      deficiencies of your current navigation
                      scheme that can be solved by a
                      effective card sort.
Site Map




From the Onsite Card Sorting exercise, a new Site
Map is generated. This site map takes all the data
gathered during the card sort and compiles it into a
diagram of your site’s new navigation scheme,
allowing you to visualize how the user will navigate
through your content. This site map also acts as a
guide for the interface that is developed during the
Visual Design process.
Content
   YOUR WEBSITE   YOUR AUDIENCE
Analyze Your Content
ANALYZE CURRENT CONTENT
  Active Pages
  Broken Links
  # of pages
  Most commonly accessed
  Least accessed
  2 Clicks to Key tasks

DETERMINE KEEPERS AND TRASH
  What can you leave behind?
  What should you optimize with Calls to Action?
Plan Your Content Strategy
ANALYZE CURRENT STATE

DETERMINE WEAKNESSES
Recap
ANALYZE YOUR AUDIENCE

PRIORITIZE TASKS

CREATE A VISUAL HIERARCHY THROUGH WIREFRAMES

FORM AN AUDIENCE-CENTRIC NAVIGATION

ANALYZE YOUR CONTENT

DEFINE YOUR CONTENT STRATEGY
Next Session                    	

                                	

THE ART AND THE MAGIC

BEAUTIFUL DESIGN BASED ON SOLID STRATEGY
WHILE AUDIENCE-CENTRIC DESIGN IS KEY, YOU MUST NOT FORGET
    ABOUT YOUR GOALS AND WORK THEM INTO THE DESIGN.

YOUR AUDIENCE’S GOALS + YOUR ORGANIZATION GOALS = WELL
                   PRIORITIZED SITE




               REDUCING THE NOISE
Recap
IDENTIFY YOUR AUDIENCE

ANALYZE BEHAVIOR

CREATE PERSONAS

PRIORITIZE

OUTLINE YOUR TOP THREE GOALS

GET BUY-IN TO REDUCE THE NOISE
How Can You Learn More?
5 Tips to Strengthen Your Website’s Core Message (Blog by GUIDE Designer,
  Ben German)

Get Better Results from Your Website (Blog by GUIDE Creative Designer,
  Katherine Till)

The Importance of Strategic Web Design (Blog, webinar recordings and slide
  downloads) – Kelley Jarrett

Kill the Noise – the Importance of Wireframes for Website Prioritization – Blog by
   Ben Wong, Interactive Design Manager

Audience-Centric Design - How to Get There – Blog by Andrew Fort, Interactive
  Design Manager
The GUIDE Series Continues…

More Related Content

PDF
The Top Ten Elements Your Noprofit's Strategic Website Should Have
PDF
Guide Series Interactive Design_PastPresentAndFuture
PDF
WordPress for NonProfits: Top Ten Elements Every Website Should Have
PDF
TopTenWebTricksForYourSchool
PDF
The Top Ten Elements Every School's Website Should Have
PDF
Design your website with your mission in mind
PPT
P4 L Presentation 09012011
PPT
Designing With Usability In Mind
The Top Ten Elements Your Noprofit's Strategic Website Should Have
Guide Series Interactive Design_PastPresentAndFuture
WordPress for NonProfits: Top Ten Elements Every Website Should Have
TopTenWebTricksForYourSchool
The Top Ten Elements Every School's Website Should Have
Design your website with your mission in mind
P4 L Presentation 09012011
Designing With Usability In Mind

What's hot (20)

PPTX
Basics of Interaction Design and Strategy
PDF
Designing for a Better User Experience
PDF
Grande Prairie-Fort McMurray 2010 - MyCharityConnects On the Road
PDF
Directions - Council for Vocational Services Society - Halifax [2010-10-07]
PDF
Community Sector Provincial Forum - St. John's [2010-10-01]
KEY
Decrap Your Application
PPT
CPA presentation
PDF
Is your website design current
PPTX
Planning your design
PPTX
Designing The Interface For Use
PPTX
Designing for web & beyond – don’t get caught with your browser down finalclean
PPT
10 Principles Of Effective Web Design
PPTX
Teachback on Global Business
PPSX
A SharePoint User eXperience
PPTX
Seo & UX
PDF
Social Web Application Design
PDF
Yvonne Doll, Designing Content for Usability
PPT
Doxia Web Samples
PDF
Web Application Page Hierarchy
PDF
Abi Jones : Visual Resume
Basics of Interaction Design and Strategy
Designing for a Better User Experience
Grande Prairie-Fort McMurray 2010 - MyCharityConnects On the Road
Directions - Council for Vocational Services Society - Halifax [2010-10-07]
Community Sector Provincial Forum - St. John's [2010-10-01]
Decrap Your Application
CPA presentation
Is your website design current
Planning your design
Designing The Interface For Use
Designing for web & beyond – don’t get caught with your browser down finalclean
10 Principles Of Effective Web Design
Teachback on Global Business
A SharePoint User eXperience
Seo & UX
Social Web Application Design
Yvonne Doll, Designing Content for Usability
Doxia Web Samples
Web Application Page Hierarchy
Abi Jones : Visual Resume
Ad

Viewers also liked (20)

PPT
sharad mishra acoustic ,sliding folding partition,envirotech systems pvt.ltd,...
PPT
O'Reilly Webcast: Ten Things Every Software Architect Should Know
PDF
Guide series creating the ultimate interactive experience through social media
PDF
2013 Web Design Trends for Nonprofits
PDF
Corporate Identity Manuals
PDF
Brand architecture
PDF
The Importance of Analyzing Your Audience in Strategic Nonprofit Web Design
PPTX
How can NGOs use Social Media for Marketing and for Raising Funds
PDF
Communicating Your Nonprofit's Brand
PDF
Defining Your Nonprofit's Brand: Strategy_pdf
PDF
Social Media Marketing Nonprofits and NGO
PDF
Nonprofit Marketing Plan Template
PDF
Building your brand – A practical guide for nonprofit organizations
DOC
Nonprofit Marketing Plan Template - Summary
PPTX
Nonprofit Communication Plan: Oxfam International
PDF
Non-Profit Marketing Communications Strategy
PPT
Checklist Communication Strategy Development
PDF
Strategic Communications Planning - A Free eBook
PDF
Developing a Communications Strategy for Your Nonprofit
PPTX
Climatology in architecture
sharad mishra acoustic ,sliding folding partition,envirotech systems pvt.ltd,...
O'Reilly Webcast: Ten Things Every Software Architect Should Know
Guide series creating the ultimate interactive experience through social media
2013 Web Design Trends for Nonprofits
Corporate Identity Manuals
Brand architecture
The Importance of Analyzing Your Audience in Strategic Nonprofit Web Design
How can NGOs use Social Media for Marketing and for Raising Funds
Communicating Your Nonprofit's Brand
Defining Your Nonprofit's Brand: Strategy_pdf
Social Media Marketing Nonprofits and NGO
Nonprofit Marketing Plan Template
Building your brand – A practical guide for nonprofit organizations
Nonprofit Marketing Plan Template - Summary
Nonprofit Communication Plan: Oxfam International
Non-Profit Marketing Communications Strategy
Checklist Communication Strategy Development
Strategic Communications Planning - A Free eBook
Developing a Communications Strategy for Your Nonprofit
Climatology in architecture
Ad

Similar to Kill The Noise - Prioritizing Content for Strategic Nonprofit Websites (20)

PDF
Strategic_Web_Design-VisualStrategy
PPTX
Functional Design Lab
PDF
Strategic_Web_Design-TestingYourVisualStory
PDF
Strategic_Web_Design-VIsualDesign
PDF
Taug 2013 presentation master
PPS
Substance151 Best Web Practices
PDF
Activities and Exercises for Workshops that Work (Confab 2019)
PDF
Msu college-natural-science
PDF
Key Steps in Website Design and Development presentation
PPTX
15 years, 15 lessons
PPT
Aaom 2012 smith and wagner
PDF
TechOut_Generalized Workflow
PDF
The Essential Guide to Web Planning
KEY
Building Usable Websites
PPT
Web Design & Internet Marketing Basics - Brody Dorland, Something Creative, Inc.
PDF
Create A Solid Strategy For Your Website (Higher Ed)
PDF
Strategic_Web_Design-AudienceAnalysis
PDF
Web Design Company in Bangalore - Vistasadindia.com
PDF
Harnessing the Value of UX
PPTX
Design: the new expectation
Strategic_Web_Design-VisualStrategy
Functional Design Lab
Strategic_Web_Design-TestingYourVisualStory
Strategic_Web_Design-VIsualDesign
Taug 2013 presentation master
Substance151 Best Web Practices
Activities and Exercises for Workshops that Work (Confab 2019)
Msu college-natural-science
Key Steps in Website Design and Development presentation
15 years, 15 lessons
Aaom 2012 smith and wagner
TechOut_Generalized Workflow
The Essential Guide to Web Planning
Building Usable Websites
Web Design & Internet Marketing Basics - Brody Dorland, Something Creative, Inc.
Create A Solid Strategy For Your Website (Higher Ed)
Strategic_Web_Design-AudienceAnalysis
Web Design Company in Bangalore - Vistasadindia.com
Harnessing the Value of UX
Design: the new expectation

More from guidecreative (8)

PDF
GUIDE_Series_Mobilize_Your_Nonprofit
PDF
GUIDE_Series_WordPressForNonprofits
PPTX
Bag of Tricks
PPTX
Top Ten Elements Your School's Website Should Employ
PDF
Guide Creative - Tour of Sites
PDF
Expanding Your Nonprofit's Brand: Milestone Logos
PDF
Living Your Nonprofit's Brand
PDF
Socialize Your Nonprofit
GUIDE_Series_Mobilize_Your_Nonprofit
GUIDE_Series_WordPressForNonprofits
Bag of Tricks
Top Ten Elements Your School's Website Should Employ
Guide Creative - Tour of Sites
Expanding Your Nonprofit's Brand: Milestone Logos
Living Your Nonprofit's Brand
Socialize Your Nonprofit

Recently uploaded (20)

PPTX
Understanding_Digital_Forensics_Presentation.pptx
PDF
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
PDF
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
PDF
The Rise and Fall of 3GPP – Time for a Sabbatical?
PDF
Advanced methodologies resolving dimensionality complications for autism neur...
PPTX
Digital-Transformation-Roadmap-for-Companies.pptx
PDF
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
PPTX
MYSQL Presentation for SQL database connectivity
PDF
KodekX | Application Modernization Development
PDF
Machine learning based COVID-19 study performance prediction
PDF
MIND Revenue Release Quarter 2 2025 Press Release
PDF
Chapter 3 Spatial Domain Image Processing.pdf
PPT
Teaching material agriculture food technology
PDF
Optimiser vos workloads AI/ML sur Amazon EC2 et AWS Graviton
PDF
Reach Out and Touch Someone: Haptics and Empathic Computing
PDF
How UI/UX Design Impacts User Retention in Mobile Apps.pdf
PDF
Encapsulation_ Review paper, used for researhc scholars
PDF
Building Integrated photovoltaic BIPV_UPV.pdf
PDF
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
PPTX
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
Understanding_Digital_Forensics_Presentation.pptx
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
The Rise and Fall of 3GPP – Time for a Sabbatical?
Advanced methodologies resolving dimensionality complications for autism neur...
Digital-Transformation-Roadmap-for-Companies.pptx
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
MYSQL Presentation for SQL database connectivity
KodekX | Application Modernization Development
Machine learning based COVID-19 study performance prediction
MIND Revenue Release Quarter 2 2025 Press Release
Chapter 3 Spatial Domain Image Processing.pdf
Teaching material agriculture food technology
Optimiser vos workloads AI/ML sur Amazon EC2 et AWS Graviton
Reach Out and Touch Someone: Haptics and Empathic Computing
How UI/UX Design Impacts User Retention in Mobile Apps.pdf
Encapsulation_ Review paper, used for researhc scholars
Building Integrated photovoltaic BIPV_UPV.pdf
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx

Kill The Noise - Prioritizing Content for Strategic Nonprofit Websites

  • 1. presents Kill The Noise Prioritize your Website with Wireframes and Strategic Information Architecture Hosted by Kelley Jarrett, Marketing Manager and Web Strategist, GUIDE Creative Guest Panelist: Anthony Harris, Interactive Design Manager, GUIDE Creative
  • 2. Why is Visual Strategy Important? YOUR WEBSITE MAY SAY SO MUCH IT SAYS NOTHING AT ALL PROVIDES AUDIENCE-CENTRIC CONTENT AND NAVIGATION PROMOTES CLARITY AND FOCUS
  • 3. The Importance of Prioritizing Your Content
  • 4. Prepare to Reduce the Noise: REVIEW YOUR WEBSITE AND ASK YOURSELF: What three user tasks are the highest priority for your organization? Are you giving that user task the loudest voice? Are less important tasks competing with your critical tasks?
  • 5. Visual Prioritization YOUR WEBSITE YOUR AUDIENCE
  • 6. Wireframes Help Prioritize SHOULD BE COMPLETED AFTER AUDIENCE ANALYSIS AND BEFORE VISUAL DESIGN HELP TAKE YOUR WEBSITE FROM SUBJECTIVE TO OBJECTIVE.
  • 7. Wireframes Help Prioritize IDENTIFY THE TOP 10 TASKS AND PRIORITIZE IMPORTANCE WHEN CREATING A WIREFRAME, CONSIDER: Position Size Contrast Calls to Action DOCUMENT WHY DECISIONS WERE MADE. PREVENTS COMPETITION AND “CONTENT CREEP”
  • 8. Audience-Centric Navigation YOUR WEBSITE YOUR AUDIENCE
  • 9. Online Card Sorting Online Card Sorting gives your team the ability to determine the ideal structure of your new navigation by grouping pages and tasks into common categories and sorted by importance. This data can be used to create a new sitemap and to drive the visual design of the new interface of your site.
  • 10. Onsite Card Sorting The Onsite Card Sorting allows us to work side by side with your team in developing the navigation and interface of your site. Unlike the Online Card Sort, conducting the exercise in person can lead to revealing conversations about the nature of your audience and the deficiencies of your current navigation scheme that can be solved by a effective card sort.
  • 11. Site Map From the Onsite Card Sorting exercise, a new Site Map is generated. This site map takes all the data gathered during the card sort and compiles it into a diagram of your site’s new navigation scheme, allowing you to visualize how the user will navigate through your content. This site map also acts as a guide for the interface that is developed during the Visual Design process.
  • 12. Content YOUR WEBSITE YOUR AUDIENCE
  • 13. Analyze Your Content ANALYZE CURRENT CONTENT Active Pages Broken Links # of pages Most commonly accessed Least accessed 2 Clicks to Key tasks DETERMINE KEEPERS AND TRASH What can you leave behind? What should you optimize with Calls to Action?
  • 14. Plan Your Content Strategy ANALYZE CURRENT STATE DETERMINE WEAKNESSES
  • 15. Recap ANALYZE YOUR AUDIENCE PRIORITIZE TASKS CREATE A VISUAL HIERARCHY THROUGH WIREFRAMES FORM AN AUDIENCE-CENTRIC NAVIGATION ANALYZE YOUR CONTENT DEFINE YOUR CONTENT STRATEGY
  • 16. Next Session THE ART AND THE MAGIC BEAUTIFUL DESIGN BASED ON SOLID STRATEGY
  • 17. WHILE AUDIENCE-CENTRIC DESIGN IS KEY, YOU MUST NOT FORGET ABOUT YOUR GOALS AND WORK THEM INTO THE DESIGN. YOUR AUDIENCE’S GOALS + YOUR ORGANIZATION GOALS = WELL PRIORITIZED SITE REDUCING THE NOISE
  • 18. Recap IDENTIFY YOUR AUDIENCE ANALYZE BEHAVIOR CREATE PERSONAS PRIORITIZE OUTLINE YOUR TOP THREE GOALS GET BUY-IN TO REDUCE THE NOISE
  • 19. How Can You Learn More? 5 Tips to Strengthen Your Website’s Core Message (Blog by GUIDE Designer, Ben German) Get Better Results from Your Website (Blog by GUIDE Creative Designer, Katherine Till) The Importance of Strategic Web Design (Blog, webinar recordings and slide downloads) – Kelley Jarrett Kill the Noise – the Importance of Wireframes for Website Prioritization – Blog by Ben Wong, Interactive Design Manager Audience-Centric Design - How to Get There – Blog by Andrew Fort, Interactive Design Manager
  • 20. The GUIDE Series Continues…