This document summarizes a presentation about aligning a center's website with its mission and strategic goals. The presentation provides a process for website strategic planning that includes identifying goals, target audiences, user personas, calls to action, page tables, and wireframes. The objectives are to analyze how a website communicates its messages, discuss the multiple purposes of a center website, and describe a strategic process to ensure the website is connected to goals. The agenda covers identifying goals and audiences, creating personas and calls to action, using page tables to organize content, and wireframing pages.

1. cetl.kennesaw.edu
Aligning the Website with
Center's Mission
Kaleem Clarkson
Director of Operations and Strategic Initiatives
and
Michele DiPietro
Executive Director
Center for Excellence in Teaching and Learning
Kennesaw State University
Slides Are Available Here

2. cetl.kennesaw.edu
What’s wrong
with this website?
Real height of
page

3. cetl.kennesaw.edu
Motivation for this Session

4. cetl.kennesaw.edu
Motivation for this session
Age of the Network: “Centers will need to do
more with less”
• Emergence of the website as a primary
educational development tool next to
workshops and consultations (Sorcinelli
2005)
Yet center websites are largely unexamined
• 5 sessions in the past 10 years
• No TIA articles

5. cetl.kennesaw.edu
Who we are
Michele DiPietro
Executive Director
-Sets the vision, strategy, priorities for the center
-Co-Author, How Learning Works: 7 Research Based
Principles for Smart Teaching
Kaleem Clarkson
Director of Operations and Strategic Initiatives
-2 decades of experience in building websites
-DrupalCamp Atlanta Project Lead
@KaleemClarkson
@MDiPietroPhD

6. cetl.kennesaw.edu
Objectives & Agenda

7. cetl.kennesaw.edu
Session Objectives
1.Analyze a website and recognize the
intended and unintended messages it
communicates
2.Discuss the multiple purposes for a Center
website
3.Describe a process that ensures the
website is connected to strategic goals
disclaimer: this is not the complete web design process. This is the
strategic thinking and planning part.

8. cetl.kennesaw.edu
Agenda
1. Identify Goals for the website
2. Identify Target audiences
3. Create User Personas describing ways in which
different groups will interact with the website
4. Express goals as meaningful and measurable Calls-
To-Action (CTAs)
5. Create Page Tables to organize and prioritize
information for each specific page
6. Convert your ideas to visual organization in a
Wireframe

9. cetl.kennesaw.edu
Identifying Your Goals

10. cetl.kennesaw.edu
1. Identify goals for the website
What purposes do you currently use your website
for?
Go back to your strategic plan. What are the major
goals for the center?
How can you translate center goals into goals for
the website?

11. cetl.kennesaw.edu
1. Identify goals for the website
Kennesaw State’s CETL Strategic Goals:
1. Provide outstanding research-based educational
development opportunities that advance learning-centered
teaching.
2. Provide professional development, resources, and
recognition across the career span.
3. Advance and support institutional priorities that promote
excellence and innovation in education.
4. Raise CETL’s profile in the field of Educational
Development.

12. cetl.kennesaw.edu
Our CETL’s website goals:
1. Promote our programs and important
announcements
2. Showcase award winning faculty and their
projects
3. Advance Undergraduate Research by
connecting faculty with undergraduate
researchers
4. Maintain searchable pages of SOTL
Conferences and Journals
1. Identify goals for the website

13. cetl.kennesaw.edu
1. Identify goals for the website
Now you do it!
Jot down a couple of strategic goals for your
center:
How can you translate them into goals for the
website?
Activity

14. cetl.kennesaw.edu
1. Identify goals for the website
Jot down a couple of strategic goals for your
center:
How can you translate them into goals for the
website?

15. cetl.kennesaw.edu
• Communication/adv
ertising
• Build credibility
• Educate the faculty
• Event registration
• Showcase Faculty
• Create Community
1. Identify goals for the website
• Conference
Proposals
• Collect data
• Display Center Stats
• Help faculty
document their
professional
development
• Thank a professor
Additional purposes for
website

16. cetl.kennesaw.edu
2. Identify target audiences
Target Image
Identify Your Target Audience
and Personas

17. cetl.kennesaw.edu
2. Identify target audiences
Who is your primary audience?
Who is (are) your secondary audience(s)?

18. cetl.kennesaw.edu
3. User Personas
The purpose of personas (Kriug 2014) is to create reliable
and realistic representations of your key audience segments
for reference. Remember, your personas are only as good as
the research behind them.

19. cetl.kennesaw.edu
3. User Personas
Effective personas:
• Represent a major user group for your website
• Express and focus on the major needs and expectations of the most
important user groups
• Give a clear picture of the user's expectations and how they're likely
to use the site
• Aid in uncovering universal features and functionality
• Describe real people with backgrounds, goals, and values
http://www.usability.gov/how-to-and-tools/methods/personas.html

20. cetl.kennesaw.edu
3. User Personas
Here are some resources to help you develop
your own personas:
http://www.usability.gov/how-to-and-
tools/methods/personas.html
http://www.smashingmagazine.com/2014/08/a
-closer-look-at-personas-part-1/
Hope Torkornoo
Activity

21. cetl.kennesaw.edu
3. User Personas
• Review the persona assigned to your table
• Based on the description, identify your
persona’s goals and needs
• Identify features of the website that can
help satisfy their goals and needs

22. cetl.kennesaw.edu
3. User Personas
Here are some resources to help you develop
your own personas:
http://www.usability.gov/how-to-and-
tools/methods/personas.html
http://www.smashingmagazine.com/2014/08/a
-closer-look-at-personas-part-1/

23. cetl.kennesaw.edu
4. Express goals as Calls-to-Action
A call-to-action (usually abbreviated as CTA) is an image or line of text that prompts your visitors, leads, and customers to
take action. It is, quite literally, a "call" to take an "action."
http://blog.hubspot.com/marketing/what-is-call-to-action-faqs-ht
http://offers.hubspot.com/call-to-action-templates
Calls to Action

24. cetl.kennesaw.edu
4. Express goals as Calls-to-Action
A call-to-action (usually
abbreviated as CTA) is
an image or line of text
that prompts your
visitors, leads, and
customers to take action.
It is, quite literally, a
"call" to take an "action."
http://blog.hubspot.com/marketing/what-is-call-to-action-faqs-ht
http://offers.hubspot.com/call-to-action-templates

25. cetl.kennesaw.edu
4. Express goals as Calls-to-Action
Identify CTAs for your persona that will result
in a direct action that meets their goals

26. cetl.kennesaw.edu
5. Page Table
“Page Tables are a powerful UX tool. They serve
as the key step between discovery and design.
They define the business goals, target
audiences, and content elements on a more
granular level for all template pages”
- Nica Lorber, Creative Director, Chapter Three
https://www.chapterthree.com/blog/using-page-tables-deliver-meaningful-design
UX Page Table” strategic design process (adapted from Chudley & Allen 2012)
Page
Tables

27. cetl.kennesaw.edu
5. Page Table
“Page Tables are a powerful UX tool. They serve
as the key step between discovery and design.
They define the business goals, target
audiences, and content elements on a more
granular level for all template pages”
- Nica Lorber, Creative Director, Chapter Three
https://www.chapterthree.com/blog/using-page-tables-deliver-meaningful-design
UX Page Table” strategic design process (adapted from Chudley & Allen 2012)

28. cetl.kennesaw.edu
5. Page Table

29. cetl.kennesaw.edu
5. Page table
Using the handout template, complete the
Page Table for the /programs page of your
website
Activity

30. cetl.kennesaw.edu
5. Page table
Using the handout template, complete the
Page Table for the programs page of your
website

31. cetl.kennesaw.edu
6. Wireframe
A wireframe is a two-dimensional illustration of a page’s interface that specifically focuses on space allocation and
prioritization of content, functionalities available, and intended behaviors. For these reasons, wireframes typically do
not include any styling, color, or graphics. Wireframes also help establish relationships between a website’s various
templates.
http://www.usability.gov/how-to-and-tools/methods/wireframing.html
Wireframes

32. cetl.kennesaw.edu
6. Wireframe
A wireframe is a two-dimensional illustration of a page’s
interface that specifically focuses on space allocation and
prioritization of content, functionalities available, and intended
behaviors. For these reasons, wireframes typically do not
include any styling, color, or graphics. Wireframes also help
establish relationships between a website’s various templates.
http://www.usability.gov/how-to-and-tools/methods/wireframing.html

33. cetl.kennesaw.edu
6. Wireframe

34. cetl.kennesaw.edu
6. Wireframe
“I’m here to tell you that the artistic quality of your sketches is
not the point. The real goal of sketching is functional. It’s about
generating ideas, solving problems, and communicating ideas
more effectively with others”. –Mike Rohde, A List Apart
http://www.alistapart.com/articles/sketching-the-visual-thinking-power-tool

35. cetl.kennesaw.edu
6. Wireframe
Kennesaw State Wireframe and Mockup

36. cetl.kennesaw.edu

37. cetl.kennesaw.edu
6. Wireframe
Individually, using the graph paper sheet,
sketch a wireframe for the /programs page
you just tabled.Activity

38. cetl.kennesaw.edu
6. Wireframe
Individually, using the graph paper sheet,
sketch a wireframe for the /programs page
you just tabled.

39. cetl.kennesaw.edu
Review
1. Align website goals with the center’s mission / vision
2. Identify Target audiences
3. Create User Personas describing ways in which
different groups will interact with the website
4. Express goals as meaningful and measurable Calls-
To-Action (CTAs)
5. Create Page Tables to organize and prioritize
information for each specific page
6. Convert and organizae your ideas visual into a
Wireframe

40. cetl.kennesaw.edu
Discussion
Questions, thoughts, ideas or concerns.

41. cetl.kennesaw.edu
References
Chudley, J., & Allen, J. (2012). Smashing UX Design: Foundations for
Designing Online User Experiences. Wiley and Sons.
Eisenberg, B., Eisenberg, J., and Davis, L. (2006) Call to Action: Secret
Formulas to Improve Online Results. Thomas Nelson.
Hamm, M., (2014) Wireframing Essentials. Packt.
Hativa, N. and Clarkson, K. (2011) Maximizing the Impact of the Center’s
Website. Presentation at 8th IINFD, Atlanta.
John, JR. (2014) 11 Ways To Dramatically Boost User Engagement On
Your Blog. Accessible at http://www.incomediary.com/how-to-boost-
user-engagement
Krug, S. (2014) Don't Make Me Think, Revisited: A Common Sense
Approach to Web Usability (3rd Ed.). New Riders.
Lorber, N. (2014) Using page tables to deliver meaningful design.
Available online at https://www.chapterthree.com/blog/using-page-
tables-deliver-meaningful-design

42. cetl.kennesaw.edu
References
McDaniel, R., and Bruff, D. (2010) Publicity 2.0: Creating an Efficient
Publicity Machine. 35th POD Network Conference.
Plank, K., and Kalish, A. (2011) Program Assessment for Faculty
Development. In K. Gillespie and D. Robertson (Eds.) A Guide to
Faculty Development (2nd ed). Jossey-Bass.
Sorcinelli, M. D., Austin, A., Eddy, P., and Beach, A. (2005) Creating the
Future of Faculty Development. Anker.
US Department of HEalth and Human Services. Personas. Available
online at http://www.usability.gov/how-to-and-
tools/methods/personas.html
Voorhees, G. (2014) Wireframing Smarter. Presentation at Bay Area
Drupal Camp.