Having Fun with

Content and Design

Brian Young

Brian Young

Web Designer & Developer

University IT Communications

Stanford University

 

@auracreations

brianyoung@stanford.edu

About University IT

  • Administrative Systems
  • IT Services
  • Information Security Office
  • Shared Services

Current state

of our service catalog

and user documentation

Web Technologies

Over 100 services

Consistent categorization

of services

  • Service catalog 
    • itservices.stanford.edu
  • Incident reporting
    • italerts.stanford.edu
  • Problem management
    • helpsu.stanford.edu
  • Self-help knowledge base
    • answers.stanford.edu

Models for IT service management

  • Information Technology Infrastructure Library (ITIL)
  • Educause Center for Analysis and Research (ECAR)

IT service catalog model

Source: ECAR Research, The Higher Education IT Service Catalog: A Working Model for Comparison and Collaboration
http://www.educause.edu/visuals/shared/ECAR/ewg1502.pdf

ECAR

COMMUNICATION AND COLLABORATION

  • Email and Calendaring

    • Office 365

Proposed

EMAIL AND CALENDAR

  • Applications
    • Office 365

INFRASTRUCTURE

  • Storage
    • CrashPlan

SERVERS, DATABASES, AND STORAGE

  • Backup
    • CrashPlan
  1. ACCOUNTS AND ACCESS: Applications | ID Card Access | Online Access

  2. BUSINESS AND ENTERPRISE SYSTEMS: Asset Management | Document Imaging and Management | Finance and Procurement Systems | Human Resources | Identity and Access Management | IT Service Management | Middleware | Reporting and Analytics | Research Administration | Student Information Systems

  3. COLLABORATION: Communications | Document and Digital Asset Management | Websites and Web Tools

  4. COMMUNICATIONS: Collaboration | Conferencing | Contact Center Tools | Paging | Phones | Television

  5. COMPUTERS AND MOBILE DEVICES: Backup | Communications | Online Access | Professional Services | Security | Software | Storage | Support Tools

  6. DOCUMENT AND DIGITAL ASSET MANAGEMENT: Collaboration | Documents | Images

  7. EMAIL AND CALENDAR: Accounts | Applications |  Distribution Tools | Infrastructure | Security

  8. NETWORKS AND CONNECTIVITY: Access and Operational Tools | Network | Security | Wiring

  9. PROFESSIONAL SERVICES: Communications | Computers and Mobile Devices | Database | Project Management | Reporting | Security | Server Hosting | Software | Websites

  10. RESEARCH COMPUTING AND ADMINISTRATION: Computing | Administration

  11. SECURITY: Applications | Compliance | Computers and Mobile Devices | Consulting | ID Card Access | Online Access | Network | Server Hosting | Storage

  12. SERVERS, DATABASES, AND STORAGE: Backup | Database | Servers | Storage

  13. SUPPORT AND TRAINING: Documentation | Support | Training

  14. WEBSITES AND WEB TOOLS: Forms and Surveys | Publishing | Tools

Design Experimentation

We don't know unless we try.

Design Patterns

  • Top navigation
  • Card
  • Collapsible panel
  • Hero banner
  • Table

Service category specific

top navigation

  • Expose content within a service category
  • Consistent user experience across service pages

Service category specific

announcements and events

  • Tagged by service category 
  • Can be displayed on multiple service pages
  • Leverage feeds

Different types of guides

  1. How do I set up WordPress?
  2. Which web publishing service should I use?
  3. What do I need to do to be compliant?

How do I... guide

  • Step-by-step instructions
  • Table of contents

What should I use... guide

  • Scan
  • Compare and choose different options
  • Tables

Reference guide

  • Single Page Layout
  • Larger text size
  • Card
  • Tables

Launch Page

  • Hero banner with action link
  • Cards

Article Page

  • Hero banner
  • Image styles

Style consistency

  • Style Guide
  • Pattern Library

Emphasize search

  • Home page
  • Landing pages

Resources

Slide Deck
http://slides.com/hyperboy/content-design

Bootstrap

http://getbootstrap.com

Font Awesome

http://fortawesome.github.io/Font-Awesome/

Stanford Drupal Themes

https://drupalthemes.stanford.edu

University IT Website Editor's Guide

https://itservices.stanford.edu/userguide

 

Also check out:

Page Analytics (by Google) Chrome Extension

Having Fun with Content and Design

By Brian Young

Having Fun with Content and Design

Learn how to present content in different visual layouts as well as strategies for simplifying content for core use cases.

  • 813