Web Content Migration - Regis University

  • 5-7 year old site - 2 years to plan; 10 weeks to build
  • Nav = confusing
  • 7,000+ pages (duplicated and outdated)
  • 1,000 Undergrad -
  • 150+ editors - operating under silo (just like us)
  • No goals or strategy
  • No the “Regis” Story
  • ITS Owned; kept it functioning
  • New Architecture/Focus
  • New CMS Platform (error prone proprietary) - SiteCore
  • New Design and marketing/content strategies
  • Hired CMO after web project was started
  • Accountability (university asset; marketing ownership)
  • New governance
  • Project Teams
    • 3 Admissions Deans, CIO, communications director
    • Wrote request for proposal, chose vendor
    • Chose and purchased CMS
    • Guided discovery, strategy and creative processes
    • Approved new architecture and design
  • Web Advisory Committee (did not serve much; obligation to include)
    • 40-50 mid-level managers, faculty and student
    • Presentation and Q&A
  • Web Marketing Team
    • Accountable for build, strategy and branding
    • Built site in CMS and migrated content
    • Evolve content, design, strategy and function
    • Partner with ITS
    • Web analytics
    • Governance
    • Editor training
    • Assist with faculty/staff/student pages
  • Content Owner Meetings
    • Need content updated?
    • What it needs to say?
    • What forms do you need
    • Structure
    • Let’s talk strategy
  • Content Inventory and Mapping
  • Development of Image and PDF library (avoiding PDFS)
  • Forms Development
    • Moved to SharePoint…
  • Custom CMS Development
  • Server and software setup
  • Acquitted and integrated 3rd party software
  • Redeveloped custom apps
  • Processes and policies:
    • Content and Layout
    • Testing/implementing features and upgrades
    • Community COMM
    • Editor training/permissions
    • Governance policy
    • Visual/writing style guides
    • Mobile policies
  • Build and Launch
    • Built pages/layouts
    • Plunked (cut/paste) edited and wrote new content
    • Uploaded and placed images
    • Client content reviews
    • app integration
    • testing
    • launch announcement and celebration
  • Lessons:
    • Involve web experts in the entire process, not just the build (group of 5)
    • Insist on detailed costs, timelines and deliverables from vendors
    • Be aware of business referral partnerships
    • ITS was pushing for SharePoint! May not be the best thing!
    • Project went WAY over budget because PM did not know what was being promised
    • Evaluate business need and effectiveness or developing and/or redeveloping custom features
    • Clearly communicate new process and policies to community
    • Educate Leadership on process, milestones and resource requirements
    • Get leadership support, don’t be afraid to name drop
    • Make sure leadership is aware of consequences of change!
    • Insist on client review and sign off on content, document all client communication
      • Client is responsible for the content
    • Determine brand strategy BEFORE you develop the website
      • Clear, consistent voice and look/feel
    • Document details along the way
    • Really mean it when you ask for input and participation
  • Success Earned - Be transparent
    • Set up project site
    • post proposal, status reports, committee members
    • Hold update meetings
    • Make ITS your friends, meet with them and content owners early!
    • One team, same team policy
    • Emphasize partnership and common goals
    • TEDIOUS DOCUMENTATION IS WORTH THE EFFORT
      • Content Inventory
      • Content mapping
      • Detailed Site Map
      • timelines
      • status meetings
      • vendor website
    • Improvement is contagious!!!!!
  • Don’t get burned
    • Expect and plan for time and money shortage
    • Expect one major thing to go wrong
    • Sales pitches vs requirements
    • Stick to your story
    • Communicated causes and effects
    • Squash Rumors
    • Comprise team of people who care
    • Set up team support during overtime
    • head out before burn out
    • celebrate small wins
    • play = stress relief
    • participate
    • All other duties were forgone 10 weeks of web dev only

If you build it, will they come? - Grinnell College

Goals:

  • Smaller site
  • Easier publishing
  • represent brand
  • Express Grinnell brand
  • Bring users BACK to the site

The Audit:

  • Survey of students/faculty/staff
  • Brand was strong by Grinnellians; but not for the uninitiated
  • Navigation was a mess
  • Drupal was a mess - Drupal 6
    • Unable to be maintained - hacked the system; couldn’t easily update site
    • Hard to find what you were looking for
    • Over 200 administrators - could do nearly anything they wanted
    • Wasn’t dynamically going where you wanted
  • User Engagement
    • Bring students back onto the website; not separate areas
  • It looks like the website for a bank
  • I can’t find anything! –Like us
  • Infrastructure was terribly organized - So deep, large lists of links
  • Posters were huge on campus
  • “A brand we can be proud of” - idea behind the redesign
  • Concept Statements
    • Home and Horizon
    • Unexpected learning environment
    • Individuality and Self Governance: customizable experience
  • Office and Department Pages
    • They all look different, we want them to be similar
    • What areas do we lock? These are must haves, you cannot change them
    • You can focus on OTHER areas of the site, we handle the global stuff
    • Build it into the wireframing
    • Dynamic site on HOW you TAG and FILTER
      • Services Taxonomy
      • Groups Taxonomy
    • Infrastructure
      • 27,000 pages to 5,000 pages
        • Content needed to be cleaned; was redundant, old or irrelevant
      • You have a great portal to customize; We handle the homepage content
        • Macro/Block to get things ONTO the homepage
      • You don’t WANT people to use the search immediately
        • Track their usage - continue to create great content
    • To Replicate
      • Sell it internally
      • Agreed upon brand
      • Buy in from departments
      • Site that evolves
      • Assign Product Owner
      • FEATURE FREEZE
        • Build dynamic pieces instead of setting content manually

Building a Cohesive Website Experience from Scratch

Where do you start?

  • R&D aka W.T.F.
    • General sense of what the needs are
    • Big Bad Wolf (that’s us) - Fac/Staff are the little pigs
    • Stakeholder interviews (Be the pied piper; make them follow you)
    • Web Group Lunch or Tea
      • Talk about OTHER websites; eliminate the politics
      • Meet every 3rd friday in the campus cafeteria
  • Phase ONE - Simple, quick redesign to clean everything up
  • “Hey, why don’t we hang out?”
  • Macro Changes
  • Jack and the Beanstalk - Find ALL the magic, climb to the top
  • Find your CMS
  • Drupal was installed by an advertising agency
  • CONTENT
  • Whatever you can support and use as a CMS use it.
  • Empower your editors
  • Don’t go too slow or too fast
  • Four workshops EVERY semester
    • Wordpress Intro
    • Images Only
    • How to write for the web - Not to use scanned PDF
    • Advanced WordPress
      • Widgets, tables using the editor
    • Have a sandbox site to trash!

Micro Changes

  • Fine tune and readjust
  • Make them Unique but consistent
  • Create once; Publish Everywhere
  • Multiple Data points
    • One CMS
    • RSS Feeds and .ics Import/Export
    • Presentation layer goes out to ALL sites necessary
  • Small groups CAN in fact work
  • Hire Interns!
    • Helping go from print to digital
  • Stabilize things, then waterfall it out!
  • Project requests

Build a calendar that doesn’t suck - LiveWhale Calendar

Why calendars are what they are:

  • Most calendars on the web are byproducts of EMS, Room reservation systems and resource scheduling systems.
  • For some, these are products are an afterthought
  • Room reservation is like meth (if you never have it, it’s fine;
  • People think of events as a marketing item
  • Every audience depends on events, but everyone’s needs are different

Ideas and Suggestions:

  • Tell everyone who will listen that events are crucially important part of marketing

    • Three most overlooked opportunities
    • What do students do on the weekends
    • Is it boring to live in ___ (Terre Haute)
    • What is my alma mater doing with my money
    • These are questions that people ACTUALLY ask

  • Don’t go anywhere near a calendar solution that doesn’t export data in open formats like RSS

  • A perfect calendar has to be all things to everyone, it can’t be done

  • Calendar will disappoint someone; even if it doesn’t suck

  • Some will love it; something that addresses their needs!

Go out and “Not suck”

THE SCROLL #getscrolled - hamilton.edu/thescroll - Hamilton College

All the different online media/social accounts/email etc. At the institutional level. SO MANY DIFFERENT THINGS

Not a lot of give and take with the audience

Use found content - It’s on social media, but not on our site…how do we get it there?

What’s the problem?

  • Who’s the audience? - specific things at specific times/ you DO have a specific audience
  • Trying to communicate?
  • Success looks like?
  • Current Preferences? How do they WANT to engage with us
  • Infuence mentions and engagement - Brand inconsistencies; Not artsy etc. etc.
  • Flip the way people see you by using Social Media
  • FB/TW/Instagram - were the most used
  • FB is pages/groups/events (brand, authentic in what’s shared with us)

TEACH strategy

  • This is how we communicate from here on out - everyone goes into one pot
  • Support their projects - It’s “our” project, it’s EVERYONE’s responsibility to keep up with it
  • Top down/Bottom Up
  • Time Commitments
    • Who has control? Depends on the place
    • Technical issues

BRANDING focus - campaign is not marketing…it’s capital campaigns in Higher Ed

  • No one voice outshining
  • Watch the ‘one offs’
  • Everything supports larger brand ira
  • Brand business and outcome
  • The scroll pulls mentions - hash tags and a variety of other accounts
  • No gimmicks
  • Low barrier to entry
  • The good and the Bad - Not too much of a problem anymore because it’s REAL
  • Timeliness is crucial
  • They do NOT autopost or schedule - Why not at all? Doing it responsibly?

Every event has a Hashtag - it goes on EVERYTHING print email everything

  • 1 year ahead of time
  • Coordinating conversations with various hashtags - They are useful everywhere now

Social media directory - We need to build this…NOW

  • The Scroll
  • My Hamilton

ASK for audience ideas

  • Continue education
  • Policy vs Guidelines - If you do it, here’s how you are expected to behave
    • Before you are our community member, this is how you do it
    • Use social and Here’s how - not Come to us to do social

Comment and content guidelines - Basic premise, if you don’t say it to your mom; don’t say it

Measurement: Defining Goals

  • NOPE Vanity metrics (likes/followers)
  • Positive Sentiment
  • “The scroll” itself is probably the 10th most trafficked page.

EVERYTHING is hand-picked; nothing is added via aggregator

Orientation: From in-Person to Online - Xavier University

Old orientation 8:00a-5:00p Why The change?

  • Started from on high
  • More convenient
  • Budget - for everyone!
  • Other schools are doing it and like it
  • What if we were to start from scratch

Conversion Process

  • Provost called on IT to implement soluciont
  • IT Began conversations internally and with University Communications
  • Blackboard?
  • R2X?
  • Other Products
  • Settled on R2X
  • Steering committee
    • Admission
    • Director of Student Life
    • Advising
  • Big Group Meetings

New Orientation - Road to Xavier - Homegrown home coded website

  • Talks to Videos and Quizzes
    • Where is Res Life talk?
    • Diversity - Old & New
  • E-Advising
  • Info tables to static pages
  • Social Experiences to R2X, FB and Room Selection
  • Shifted some things to Manresa (Move-In)

Incentives to complete - Gamification, offered points for successful completion

  • Contests
  • R2X, the game

Analytics and Stats

  • Parents and Student Survey
    • 198 Students
    • 216 Parents
    • 43 Students
    • 44 (s), 50% (p) good
    • 39 (s),30%(p) Excellent
  • Advising Issues
    • Waste of Time for advisors
    • Who is in charge?
    • Limited to one room (limiting process)
  • Housing Issues - res life issues were unanswered
  • Hard to know until we get questions
    • Bursar - Fewer, longer calls
  • No more lunch money
  • Was this the right decision - Yes!
  • First year is rough

#GIT -

DIY Revision Control

  • Duplicate each day
  • Auto Revision from MS Word etc
  • Pull recovery file

Revision Control Systems

  • Track changes
  • Better for source code

Why Choose Git?

  • Open Source and free
  • Distributed gives you autonomy
  • Easy branching for experimenting
  • The Delta It’s Efficient
  • Revisions, not versions
  • Repo stores all changes
    • 1st change: git init
  • Each change links to previous
  • The 3 Areas
  • Working Copy
    • Anytime I change or add to a repo
    • Select things from the working copy and go to staging; then submit to the repo
  • Staging Index
  • Repo

Analogy - Packing a suitcase

  • Take shirts out of closet, lay on bed - working copy

  • Pick shirts from - From working put in pile ready to fold - staging area

  • Fold it then “commit” to the suitcase - repo

  • Choose pants from closet

  • Choose from Pile and Fold

  • Folded pants go into suitcase - repo & commit

Commands

  • Take socks out of the drawer
  • Command: none
    • Last time I looked, there were no socks; they were in the drawer
  • Get socks; roll them up
    • Command: git add
      • Moves changes to stage from working copy
    • Command git commit
      • Records the changes to repo
      • Can commit one or multiple changes
  • Step 4: Put unused clothes away
  • Command: git checkout
    • Erases changes from the working copy
    • A good way to get out of a bad situation

Commit 1: Shirts

Commit 2: Shirts Pants

Commit 3: Shirts Pants Socks

Commits are sequential

“The Head” - Detached Head

  • Points at the most recent commit for the branch you are on
  • The head will pick up where you left off (like a cassette or video tape)

Branches

  • Use Git within what you are already doing

    • Command: git branch

  • Clones your repo up until the most recent

  • OR you can rewind it and clone from previous state

  • New working copy and staging index

    • clean working copy

  • Git Flow - a branching model

  • Switching Branches

    • git checkout
    • Quickly swap to different branch
    • Changes what’s in your editor
    • Changes what’s in the browser

  • An Example: Trip to Jamaica

  • git checkout

  • Set the HEAD to commit #2 (back to shirts and pants)

  • Branch the rewind

    • git checkout - b

  • Get a passport

    • New item, not yet tracked

  • Command: git add, put it right in the staging index

  • Pack passport with git commit

  • Merging changes

    • git merge
    • Take changes and merge them into the Master Branch
    • ALL items can come into both branches; or be selective

  • Passive voices

    • 60-70 characters long
    • Learn Git Flow if working with other users

  • Learn more: http://try.github.io

  • Git Essential Training on Lynda.com

  • http://git-scm.com/book

Forking - when you clone a remote repo and do your OWN changes to it.

Digital Asset Management

Who should be included using the system?

How do you know what assets you have and what you go in

Practical Tips for IA with RWD:

  • Kill the page…
  • IA / Discovery phase
  • Planning for function design and content while disregarding ALL assumptions about the device
  • Content Modeling
    • Content types separate from design - NOTHING to do with design
    • What it is, what it says, and what attributes are assigned
    • Prepared for future friendly world
    • Device and platform agnostic
      • Consider size range of screens
      • Smart Watches/Car/Big screen/Smart TV/Small screens/Digital Signage
    • The accordion factor
      • Meaningful messages that can be used in our world
      • computers integrate more with humans
    • 77% of MOBILE searches take place at home or work, 17% on the-go according to Google.
    • Low-income/HS educated are more likely to be mobile-only
  • How do we plan?
    • Kill the Page.
    • Blobs - Free for all WYSIWYG
      • Hand-me-down from print era; Insert (page) content here
      • No context when removed from form
      • “But I pasted a table from Word”
      • A blob is limiting and won’t survive without a page!
    • Chunk - content removed, it still makes sense
      • Structured content with meta-data to give context
      • Removed from form, and still make sense (chunk and falfor, never ending story!)
      • Future friendly content = the never ending story
      • HOW do we create it?
        • structured content
        • semantic metadata
        • content packages
        • new user experience for content editors
      • Chunk content plan
        • Content matrix that separates out each piece of content type = content modeling
        • includes recommendations, attributes and suggestions
        • removes all notion of (page) location
        • Client uses as a worksheet to gather content regardless of where it goes
        • Enables us to implement the COPE method (create once publish everywhere)
          • Client never
      • Excel Breakdown
        • General Content Needs - Questions that needs to get answered
          • What is ____
          • History of ____
          • About the space
          • Who can use it
          • How can a new person get involved
          • Why should someone get involved (prospective)
        • Deliverables: client returns content entered into worksheet - separated from form
          • Focus is shifted to content alone!
        • This results in a path for structured content
  • The How

Phases:

  • Discovery
    • IA Questionnaire (who, what, when, why, wtf is the point!)
    • Analytics and peer site review
    • Deliverables: 10 Content priorities, “our” perspective - easier to edit than work together…
      • what is the most important piece to communicate?
  • Sitemap/Annotated Sitemap
    • With a non device specific approach. Streamlined navigation. No 3rd level navigation if we can help it
    • Client deliverables:
      • PDF of proposed navigation structure
    • Internal Deliverable:
      • Annotated sitemap: excel document that lists my vision for what should go on each page. Column for functional requirements and for graphic needs. Keeping mobile in mind.
  • Chunk content plan
    • Follow the chunk life cycle for { Project Team Title } and { Fun Fact } in the following
    • Semantic Metadata - entity relationship diagram for project teams
  • Wireframe/IA
    • Mobile first - sit with iPhone in hand “how do I want to do this”
    • Project Team page first
    • Using UX Pin
  • Design
    • Styling Chunks
    • Design the nag
  • Dev - gives chunk content plan life!
    • Dev team took chunk plan and created a new type of field
    • Content packaages…tagging things..
    • Modules/Macros for inserting youtube links. Setup the MAX width/height to be specific
    • Should all chunks be viewable on mobile: ABSOLUTELY
  • Training/Content Entry
  • Launch

Content Strategy for Mobile! Learn to love excel

Files - Email Julie.Grundy@duke.edu and @Julie_Away

The Nittany Leopard - Usability Testing and the Penn State Redesign

Using Drupal (7)

February 2013 - First site redesign in 10+ years

Groups were formed (volunteers) and different teams

  • Research & more…

The people part: Developing usable co-workers, committees, bosses, stakeholders

  • We have to talk - are they ready to hear bad or not awesome news?
  • Don’t oversell - small quick tests can be a hard sell in academics
  • Data and video are hard to ignore
  • 2-ish years of planning

Look at the things that DON’t work - even stuff that you’ve built.

small groups aren’t effective; but 8 would be effective (quick iterative testing)

  • Best we can know at this point in time

ARGUE LESS. TEST MORE.

  • we can argue over what a link is, but let’s test it and have data tomorrow to move forward
  • Instead of us talking; let’s do a test and get information
  • Know what you can know when you can know it
    • Know everything you can BEFORE the site goes live. Test WHILE you IA, design, wireframe etc
  • Redesign Objectives
    • Get applicants
    • Outward focused
    • Help raise awareness of Penn State as a public research university that serves pennsylvania and the world
    • Increase efficiency
    • Communicate PSU’s identity to a global community through visual design and content that reinforces mission
    • Results should reflect the overall branding initiatives of academics research and global
    • drive….
  • Benchmarking
  • Big Ten Institutions
  • Universities with a campus system
  • Aspirational peers
  • Non-higher ed institutions with complex structures
  • Visual appeal/brand strength
  • Steve Krug (don’t make me think) layout/navigation
    • Create a clear visual hierarchy on each page
    • advantage of conventions
    • break up pages into clearly defined areas
    • make it obvious what’s clickable
    • minimize noise
  • Ranking things (1-7) of priorities and appeal
  • Inventory the site and what the High Ed website looks like
  • Convention not conformity
  • Devil is in the details - many ways to implement, some are more effective
  • Content strategy: What do we want the user to DO not just click or read
  • Social Media can be more than a button - YES!

Best results come from testing no more than 5 users to get results

“Need a degree to figure out how to navigate the website” - actual user

Ask qualitative questions

  • What’s your impression of the site based on this page? watch users complete specific tasks
  • Useful to confirm suspicions
  • Small sample: 5-8 users at a time

Old site, first impressions:

  • What’s your initial impression
    • Not professional…amateur
    • Not much on the page; not very prestigious. Two fonts, two colors that’s it. Not big at all. Rolling pictures of students being happy. Seems like there isn’t much here
    • Unexpected results:
      • Some kind of cat on the left…
      • I remember the color blue and the cat…
      • Cat thing…
      • Nitany lion WOULD have been in the new design without these comments
  • Design Elements, Very Blue:
    • They knew it was too blue, but didn’t realize how MUCH so…
  • Lists and Words and Words….
    • Simple website, separation of things, you have to read; no intuitive way of seeing what’s what. No pictures. All words.
    • Too many options within a list. Programs and admissions should be highlighted.
    • Links are NOW prioritized 5 links we want people to see; plus 20 others in different areas of priory
  • Card Sorting! Usabila test - does the math connected to your cards
  • Usabila - 50-90 a month; Click tracking https://usabilla.com
  • Flat image, ask a question and people click on
    • Where would you click for (financial aid/ admissions/donations/etc)
    • Flat Images before anything else is developed
    • Where would you request information
    • Make sure this label = this thing
    • Can people easily find this men/button/item on the page
    • Did we get the labels right?
    • Do they understand how to find things

Wireframe and Design Testing:

  • Takeaways
    • Placement and labels for research global this is pen state academics were working
    • User knew to click on academics to find degree programs
    • Apply now buttons
    • Super footer - 25% of users navigated to it
  • Where would you click on this design if you were considering attending Penn State
    • Prospect
    • Admissions etc..
  • Loop 11 - $350 / test
  • Give it tasks and tell it the correct answer…
  • Where they go, how they got to answer, how quickly and if they thought they got there
  • One test old; one test new
  • OLD SITE:
    • Find a list of Masters degree programs available through Penn state (40% success)
    • 53.8% Graduate School - paths: 15% to PSI.edu; 13% Fail/abandon; 10% Bulletin; 5% grad school prospective; 18% other
  • NEW SITE:
    • 58% success rate

Overall results:

  • New site efficiently bounced them to the appropriate area; but still went to the old places

Software:

  • Usertesting.com - Full site with video and people thinking out loud; They have the test panel; Rate experience 1-10
  • Usabilla - Click tracking on Flat Files; You provide the people (5-10 each test)
  • Usabilitest - Not recommended; Though card sorting
  • Loop11 - Full site; task based tracking

NO MOBILE USER TESTING….pushed off to the side because of timing; moving too fast, didn’t want to do.

Dave Housley

ddh16@psu.edu