Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Guidelines for a Campus Website Refresh

bpollak
December 13, 2014

Guidelines for a Campus Website Refresh

Delivered to Mount Sac Collegge

bpollak

December 13, 2014
Tweet

More Decks by bpollak

Other Decks in Technology

Transcript

  1. #AItraining
    Brett Pollak | University of California, San Diego | [email protected]
    Website Refresh best practices, governance, stats,
    predictions and other good stuff 

    View full-size slide

  2. 2
    My Background
    • Director, Campus Web Office (CWO) at
    UC San Diego
    • 5 ½ years at UC San Diego
    • Web Development field since ’01
    • 4 years supporting mobile devices
    WHO AM I?

    View full-size slide

  3. 3
    Experience delivering to higher education
    • High Ed Web
    • EduWeb
    • Eduniverse
    • Higher Ed Live
    • LINK Journal for Higher Education
    WHO AM I?

    View full-size slide

  4. Campus Web Office

    View full-size slide

  5. 5
    About the CWO…
    Chancellor
    Business Affairs
    Admin
    Computing
    CWO
    Academic Affairs Health Sciences Communications

    View full-size slide

  6. 6
    Qualifying academic &
    administrative units can host
    and maintain their websites
    with us free of charge
    Our Services

    View full-size slide

  7. 7
    OUR MODEL AND PHILOSOPHY
    • Funded centrally by state money
    - No recharge
    • Emphasis on self-service, self-sustaining
    technology
    • We provide the tools, training, and frameworks
    • Clients provide the content and maintenance
    ABOUT THE CWO…

    View full-size slide

  8. Manage over 140 websites in the CMS

    View full-size slide

  9. Support over 900 CMS users

    View full-size slide

  10. cwo.ucsd.edu

    View full-size slide

  11. 11
    A BRIEF HISTORY OF WEB DESIGN
    The past and present…

    View full-size slide

  12. 12
    • Single text column using HTML
    • Mostly text and hyperlinks
    • Embedded images around 1994
    Early 1990’s Web Design

    View full-size slide

  13. 13
    • Table based layouts allowed for
    multiple columns
    • Websites were a combination of
    sliced images and HTML
    Mid 1990’s Web Design
    ucsd.edu in 1995

    View full-size slide

  14. 14
    Late 1990 & 2000’s Web Design
    • Animation
    • Flash
    • CSS/JavaScript
    • Web 2.0!

    View full-size slide

  15. June 9, 2007

    View full-size slide

  16. 17
    2011
    2012
    2013
    Page views from mobile devices

    View full-size slide

  17. 18
    2011
    2012
    2013
    Percent of views from mobile devices

    View full-size slide

  18. 19
    In 3 years
    50% of website views
    will come from mobile
    Prediction

    View full-size slide

  19. m.ucsd.edu
    Responsive website

    View full-size slide

  20. 68,351 Downloads 54,091 Downloads

    View full-size slide

  21. 22
    May ‘11 – ‘12
    3.1 M
    May ‘12 – ‘13
    UCSD mobile Page views

    View full-size slide

  22. LEARNING OUTCOME
    QUESTIONS
    23

    View full-size slide

  23. 24
    WHAT DO THEY EXPECT?
    Prospective Students

    View full-size slide

  24. Spring 2013 phone survey of 2,018 college-bound high school juniors & seniors

    View full-size slide

  25. 26
    78% of respondents have regular access to a mobile device
    43% of students reported using their mobile devices as the primary
    device for browsing the web
    Trends in college bound students’ research

    View full-size slide

  26. 27
    Students felt the
    website impacted
    their perception of
    the institution
    How is your institution perceived?

    View full-size slide

  27. 28
    82 percent said they preferred to look at college Web sites
    on a PC/laptop instead of a mobile device.
    However, 68 percent said they have viewed college Web
    sites on a mobile device.
    Trends in college bound students’ research

    View full-size slide

  28. 29
    The impact of mobile devices

    View full-size slide

  29. 30
    College website is most
    influential to prospective
    students but it’s not the
    only thing they consider
    What influences prospective students?

    View full-size slide

  30. 31
    2012: 79% of respondents used Facebook in their research
    2013: 67% of respondents use Facebook in their research
    Facebook is losing steam…

    View full-size slide

  31. 33
    Top college planning websites
    1. CollegeXpress
    2. College Board
    3. Peterson's
    4. The Princeton Review
    5. FastWeb
    6. U.S.News & World Report
    College Planning Websites

    View full-size slide

  32. 36
    Top 5 things prospective students are looking for
    1. Does the school offer what I’m interested in academically?
    2. How much does it cost?
    3. What are the dates and deadlines for enrollment?
    4. How do I apply?
    5. What’s campus life like?
    In Summary, your website is important

    View full-size slide

  33. 37
    Consider having entry
    points for students
    who are at different
    stages of the
    admissions process
    The impact of mobile devices

    View full-size slide

  34. 38
    Allow prospective
    students to
    interact with your
    site and calculate
    cost of attendance
    The impact of mobile devices

    View full-size slide

  35. 39
    • Optimize the user experience for mobile devices using adaptive or responsive
    design
    • Allow prospective students to opt-in to receive communications via email, text,
    and social media
    • Ensure email communications also are designed and tested for mobile
    • Your website says a lot to prospective students about your institution. Errors and
    unprofessional content or images hurt your brand.
    • Keep content fresh and showcase what makes your university unique
    • Make the top content accessible through clear action paths
    Conclusions

    View full-size slide

  36. LEARNING OUTCOME
    QUESTIONS
    40

    View full-size slide

  37. 41
    IDENTIFYING EXAMPLES & BEST
    PRACTICES

    View full-size slide

  38. 42
    Clear action paths to Apply and visit the campus
    Examples & best practices

    View full-size slide

  39. 43
    Examples & best practices

    View full-size slide

  40. 44
    Examples & best practices
    Think from the
    prospective students’
    point of view. Consider
    the stage of applying
    they may be in

    View full-size slide

  41. 45
    Examples & best practices
    Use infographics to showcase unique characteristics
    about your university

    View full-size slide

  42. 46
    Examples & best practices
    Use responsive web design to make sure your site is optimized for all resolutions

    View full-size slide

  43. 47
    • One website who’s layout automatically
    conforms to the resolution of the device
    accessing the site
    • One set of code to maintain
    • Cross platform: works on all modern
    browsers
    • Frameworks include Twitter Bootstrap,
    Foundation3, HTML5 Boilerplate, etc.
    RESPONSIVE WEBSITE

    View full-size slide

  44. 48
    • SEO friendly: duplicate content isn’t
    indexed twice like with mobile site
    • Link friendly: sending or sharing links are
    optimized for the device the recipient
    uses
    • Optimizes website not just for mobile but
    for larger screens
    RESPONSIVE WEBSITE

    View full-size slide

  45. LEARNING OUTCOME
    QUESTIONS
    49

    View full-size slide

  46. 50
    A PROCESS FOR REFRESHING YOUR SITE

    View full-size slide

  47. 51
    Your website is not an encyclopedia for your school
    Less is more
    Your audience doesn’t read, they scan your site
    The content you provide is far more important to your
    users than your logo or any images
    Website refresh mantras

    View full-size slide

  48. 52
    Your website is not for you
    (or your boss)
    Identify your key target audience

    View full-size slide

  49. 53
    A website for everyone serves no one
    very well.
    • Current Students?
    • Prospective Students?
    • Parents?
    • Staff?
    • Faculty?
    • Alumni?
    Prioritize your audience

    View full-size slide

  50. 54
    1. Does the school offer what I’m
    interested in academically?
    2. How much does it cost?
    3. What are the dates and deadlines for
    enrollment?
    4. How do I apply?
    5. What’s campus life like?
    Develop 2-3 goals for the site

    View full-size slide

  51. 55
    Examples:
    1. Funnel prospective students to our
    Admissions site for conversion to our
    CRM
    2. Showcase achievements to enhance
    prestige to all audiences
    Develop 2-3 goals for the site

    View full-size slide

  52. 56
    Student workers are a great resource
    for feedback
    Doesn’t have to be formal
    Involve them in the redesign
    Engage your users

    View full-size slide

  53. 57
    Websites are one component of marketing

    View full-size slide

  54. 58
    Should map to your website goals
    Shouldn’t be about how the website
    looks but how it works
    Put content goals ahead of design
    goals
    Develop project goals

    View full-size slide

  55. 59
    Be Specific…
    Words like “streamline” usually
    indicate the site has too much
    text/clutter
    Optimize the website for mobile
    devices
    Develop project goals

    View full-size slide

  56. 60
    Use analytics to
    determine
    frequently accessed
    content on your site
    Feature appropriate
    content during
    stages of the
    admissions cycle
    Benchmark with analytics

    View full-size slide

  57. 61
    Look at user
    behavior flow to
    identify how
    prospective students
    are traversing the
    site
    Ensure this flow
    meets your
    expectations
    If not, adjust
    Analytics

    View full-size slide

  58. 62
    Determine your
    level of mobile
    traffic
    This info can be
    used to pitch senior
    mgmt. to fund RWD
    Analytics

    View full-size slide

  59. 63
    Measure page
    load time to be
    sure you’re not
    losing visitors
    Users expect
    page load times
    of less than 5
    seconds
    Analytics

    View full-size slide

  60. 64
    Google has some
    nifty new tools to
    suggest how to
    optimize your site
    The tools link from
    Google Analytics
    Analytics

    View full-size slide

  61. 65
    Analytics
    Google has some
    nifty new tools to
    suggest how to
    optimize your site
    The tools link
    from Google
    Analytics

    View full-size slide

  62. 66
    In-page analytics
    visually shows where
    users are clicking
    Remove buttons or
    links nobody uses to
    reduce cognitive load
    Analytics

    View full-size slide

  63. 67
    Use real-time
    analytics to see the
    current impact of
    admissions cycles
    or marketing
    campaigns
    Analytics

    View full-size slide

  64. 68
    Judging by analytics, how well does
    your current site align with your site
    goals?
    Are users going to the pages you
    expect them to?
    Are there pages that can be
    eliminated?
    Perform a gap analysis

    View full-size slide

  65. 69
    Categorize content in a logical way
    Logical to your users, not necessarily
    to you
    Think the way your users think
    Create a website outline

    View full-size slide

  66. 70
    Don’t use jargon your target
    audience won’t understand
    Avoid acronyms
    Create a website outline

    View full-size slide

  67. 71
    Keywords are excellent top
    navigation labels
    Search terms are good resources for
    navigation labels
    Create a website outline

    View full-size slide

  68. 72
    Rewrite your content outside of the
    CMS (Word documents) to help focus
    on the messaging and not the
    formatting
    You can more easily route it around
    and/or refine it
    Write (or rewrite) the content

    View full-size slide

  69. LEARNING OUTCOME
    QUESTIONS
    73

    View full-size slide

  70. 74
    VISIONING EXERCISE

    View full-size slide

  71. LEARNING OUTCOME
    ACTIVITY
    75
    What would the Mt. SAC website be like if
    we had the power to make it any way we
    wanted?
    Visioning Exercise

    View full-size slide

  72. LEARNING OUTCOME
    ACTIVITY
    76
    How can the website support prospective
    students?
    Visioning Exercise

    View full-size slide

  73. LEARNING OUTCOME
    ACTIVITY
    77
    How can the website support current
    students?
    Visioning Exercise

    View full-size slide

  74. LEARNING OUTCOME
    ACTIVITY
    78
    How can the website support employees?
    Visioning Exercise

    View full-size slide

  75. LEARNING OUTCOME
    ACTIVITY
    79
    How can the website support alumni and the
    broader community?
    Visioning Exercise

    View full-size slide

  76. 80
    GROUNDING QUESTIONS

    View full-size slide

  77. LEARNING OUTCOME
    ACTIVITY
    81
    The top 3 priorities for the web project
    should be ...
    Grounding Exercise

    View full-size slide

  78. LEARNING OUTCOME
    ACTIVITY
    82
    It is important the Mt. SAC web should be ...
    Grounding Exercise

    View full-size slide

  79. LEARNING OUTCOME
    ACTIVITY
    83
    When using the web to speak to students,
    Mt. SAC should remember...
    Grounding Exercise

    View full-size slide

  80. LEARNING OUTCOME
    ACTIVITY
    84
    Potential challenges the Web Redesign
    should consider are...
    Grounding Exercise

    View full-size slide

  81. LEARNING OUTCOME
    ACTIVITY
    85
    When updating the web, please don't change ...
    Grounding Exercise

    View full-size slide