SlideShare a Scribd company logo
Strategic Web Design:
Visual Strategy
Ben Wong, Interactive Design Manager
Kelley Jarrett, Market Manager
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
Kill The Noise: 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 Steps

THE ART AND THE MAGIC

BEAUTIFUL DESIGN BASED ON SOLID STRATEGY

More Related Content

PDF
Strategic_Web_Design-VIsualDesign
PDF
Strategic_Web_Design-AudienceAnalysis
PDF
The Importance of Analyzing Your Audience in Strategic Nonprofit Web Design
PDF
Eyefortravel prague like_cube
PDF
Future of Digital Marketing: Brand Communities (Webinar)
PDF
No Panic workshop
PDF
Redesigning Our Intranet
PPTX
Top Google Analytics reports
Strategic_Web_Design-VIsualDesign
Strategic_Web_Design-AudienceAnalysis
The Importance of Analyzing Your Audience in Strategic Nonprofit Web Design
Eyefortravel prague like_cube
Future of Digital Marketing: Brand Communities (Webinar)
No Panic workshop
Redesigning Our Intranet
Top Google Analytics reports

What's hot (18)

PDF
How to Increase Your Site Usability to Drive Leads
PPT
The Purpose-Driven Website
PPTX
Website Proposal for Demure Dental Clinic
PPTX
Harlem Arts Alliance
PPTX
Hotel Digital Marketing Snapshot and How to Budget for 2016 Webinar
PPTX
Gumtree website evaluation group c
PPT
How to Increase Web Site Conversions with Persuasive Design
PDF
Fort Walton Beach Chamber of Commerce Search Engine Marketing Symposium Oct 2011
PPTX
Nonprofit fundraising - Harlem Arts Alliance
PPT
Local Search Is a Buzz
PDF
WordCamp Atlanta 2015: Planning your website from concept to launch
PPT
local_search_optimization-justin_sanger.ppt
PPTX
Customer engagement and analytics
PPT
Evolution Of Search And Its Impact On Marketing
PPTX
Proposed solutions
PPTX
Fa 102 b customer journey map
PDF
Media strategy proposal
How to Increase Your Site Usability to Drive Leads
The Purpose-Driven Website
Website Proposal for Demure Dental Clinic
Harlem Arts Alliance
Hotel Digital Marketing Snapshot and How to Budget for 2016 Webinar
Gumtree website evaluation group c
How to Increase Web Site Conversions with Persuasive Design
Fort Walton Beach Chamber of Commerce Search Engine Marketing Symposium Oct 2011
Nonprofit fundraising - Harlem Arts Alliance
Local Search Is a Buzz
WordCamp Atlanta 2015: Planning your website from concept to launch
local_search_optimization-justin_sanger.ppt
Customer engagement and analytics
Evolution Of Search And Its Impact On Marketing
Proposed solutions
Fa 102 b customer journey map
Media strategy proposal
Ad

Viewers also liked (13)

PDF
Socialize Your Nonprofit
PPTX
Bag of Tricks
PDF
Guide Creative - Tour of Sites
PDF
Strategic_Web_Design-TestingYourVisualStory
PDF
Living Your Nonprofit's Brand
PDF
Guide Series Interactive Design_PastPresentAndFuture
PDF
Guide series creating the ultimate interactive experience through social media
PDF
The Top Ten Elements Every School's Website Should Have
PDF
TopTenWebTricksForYourSchool
PDF
Kill The Noise - Prioritizing Content for Strategic Nonprofit Websites
PDF
The Top Ten Elements Your Noprofit's Strategic Website Should Have
PDF
GUIDE_Series_Mobilize_Your_Nonprofit
PDF
Defining Your Nonprofit's Brand: Strategy_pdf
Socialize Your Nonprofit
Bag of Tricks
Guide Creative - Tour of Sites
Strategic_Web_Design-TestingYourVisualStory
Living Your Nonprofit's Brand
Guide Series Interactive Design_PastPresentAndFuture
Guide series creating the ultimate interactive experience through social media
The Top Ten Elements Every School's Website Should Have
TopTenWebTricksForYourSchool
Kill The Noise - Prioritizing Content for Strategic Nonprofit Websites
The Top Ten Elements Your Noprofit's Strategic Website Should Have
GUIDE_Series_Mobilize_Your_Nonprofit
Defining Your Nonprofit's Brand: Strategy_pdf
Ad

Similar to Strategic_Web_Design-VisualStrategy (20)

PPTX
Introducing Communication Sites for Communicators #spfestchi #CM101
PPTX
Building a Best-in-Class Economic Development Website.
PPTX
Building a Best-in-Class Economic Development Website
PPTX
Information Architecture by Chris Farnum - LA2M 9/9/09
PPT
Storyboarding and planning_your_website
PPT
Web Design Phase
PPS
Substance151 Best Web Practices
PDF
Wireframing The Key to Successful Web and App Development.pdf
PDF
Web Design
DOCX
Purpose of the Website
PPTX
SBDC Digital Bootcamp Website Review
PPTX
Empowerment Technology - Basic Web Design Principles and Elements
PDF
Principles of good website design
PPT
Intro to IA/IxD/UXD in the agency world
PPT
Information Architecture for Drupal
PPTX
new UID module one(1) in the ppt format.
PDF
IA workshop
PDF
UX Lesson 6: Visual Hierarchy
DOC
Why hire an information architect consultant for your business by emanuel bai...
PPTX
Top 7 Ways To Improve Teams And SharePoint Navigation In Your Digital Workplace
Introducing Communication Sites for Communicators #spfestchi #CM101
Building a Best-in-Class Economic Development Website.
Building a Best-in-Class Economic Development Website
Information Architecture by Chris Farnum - LA2M 9/9/09
Storyboarding and planning_your_website
Web Design Phase
Substance151 Best Web Practices
Wireframing The Key to Successful Web and App Development.pdf
Web Design
Purpose of the Website
SBDC Digital Bootcamp Website Review
Empowerment Technology - Basic Web Design Principles and Elements
Principles of good website design
Intro to IA/IxD/UXD in the agency world
Information Architecture for Drupal
new UID module one(1) in the ppt format.
IA workshop
UX Lesson 6: Visual Hierarchy
Why hire an information architect consultant for your business by emanuel bai...
Top 7 Ways To Improve Teams And SharePoint Navigation In Your Digital Workplace

More from guidecreative (6)

PDF
2013 Web Design Trends for Nonprofits
PDF
WordPress for NonProfits: Top Ten Elements Every Website Should Have
PDF
GUIDE_Series_WordPressForNonprofits
PPTX
Top Ten Elements Your School's Website Should Employ
PDF
Expanding Your Nonprofit's Brand: Milestone Logos
PDF
Communicating Your Nonprofit's Brand
2013 Web Design Trends for Nonprofits
WordPress for NonProfits: Top Ten Elements Every Website Should Have
GUIDE_Series_WordPressForNonprofits
Top Ten Elements Your School's Website Should Employ
Expanding Your Nonprofit's Brand: Milestone Logos
Communicating Your Nonprofit's Brand

Recently uploaded (20)

PPTX
YV PROFILE PROJECTS PROFILE PRES. DESIGN
DOCX
actividad 20% informatica microsoft project
PPTX
areprosthodontics and orthodonticsa text.pptx
PPT
WHY_R12 Uaafafafpgradeaffafafafaffff.ppt
PPTX
Entrepreneur intro, origin, process, method
PDF
The Advantages of Working With a Design-Build Studio
PDF
UNIT 1 Introduction fnfbbfhfhfbdhdbdto Java.pptx.pdf
PPTX
CLASS_11_BUSINESS_STUDIES_PPT_CHAPTER_1_Business_Trade_Commerce.pptx
PPTX
AC-Unit1.pptx CRYPTOGRAPHIC NNNNFOR ALL
PPTX
Tenders & Contracts Works _ Services Afzal.pptx
PPTX
12. Community Pharmacy and How to organize it
PDF
SEVA- Fashion designing-Presentation.pdf
PPT
UNIT I- Yarn, types, explanation, process
PPTX
building Planning Overview for step wise design.pptx
PPTX
Wisp Textiles: Where Comfort Meets Everyday Style
PDF
YOW2022-BNE-MinimalViableArchitecture.pdf
PPTX
ANATOMY OF ANTERIOR CHAMBER ANGLE AND GONIOSCOPY.pptx
PPTX
DOC-20250430-WA0014._20250714_235747_0000.pptx
DOCX
The story of the first moon landing.docx
PPTX
LITERATURE CASE STUDY DESIGN SEMESTER 5.pptx
YV PROFILE PROJECTS PROFILE PRES. DESIGN
actividad 20% informatica microsoft project
areprosthodontics and orthodonticsa text.pptx
WHY_R12 Uaafafafpgradeaffafafafaffff.ppt
Entrepreneur intro, origin, process, method
The Advantages of Working With a Design-Build Studio
UNIT 1 Introduction fnfbbfhfhfbdhdbdto Java.pptx.pdf
CLASS_11_BUSINESS_STUDIES_PPT_CHAPTER_1_Business_Trade_Commerce.pptx
AC-Unit1.pptx CRYPTOGRAPHIC NNNNFOR ALL
Tenders & Contracts Works _ Services Afzal.pptx
12. Community Pharmacy and How to organize it
SEVA- Fashion designing-Presentation.pdf
UNIT I- Yarn, types, explanation, process
building Planning Overview for step wise design.pptx
Wisp Textiles: Where Comfort Meets Everyday Style
YOW2022-BNE-MinimalViableArchitecture.pdf
ANATOMY OF ANTERIOR CHAMBER ANGLE AND GONIOSCOPY.pptx
DOC-20250430-WA0014._20250714_235747_0000.pptx
The story of the first moon landing.docx
LITERATURE CASE STUDY DESIGN SEMESTER 5.pptx

Strategic_Web_Design-VisualStrategy

  • 1. Strategic Web Design: Visual Strategy Ben Wong, Interactive Design Manager Kelley Jarrett, Market Manager
  • 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. Kill The Noise: 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 Steps THE ART AND THE MAGIC BEAUTIFUL DESIGN BASED ON SOLID STRATEGY