UX Design for Content Management Systems

43
tzk-design.com • Twitter: @danigrrl • [email protected] UX FOR CONTENT MANAGEMENT SYSTEMS Dani Nordin, Bentley UXC/the zen kitchen

description

 

Transcript of UX Design for Content Management Systems

Page 1: UX Design for Content Management Systems

tzk-design.com • Twitter: @danigrrl • [email protected]

UX FOR CONTENT MANAGEMENT SYSTEMS Dani  Nordin,  Bentley  UXC/the  zen  kitchen  

Page 2: UX Design for Content Management Systems

tzk-design.com • Twitter: @danigrrl • [email protected]

Hi. I’m Dani. UX Designer/Researcher, Bentley UXC Grad Student, Bentley University UXD Teacher, General Assembly (Boston) UX Lead, Drupal Community Tools Team Author, Drupal for Designers (O’Reilly, 2012) Co-Organizer, Design 4 Drupal Camp Boston danigrrl on Twitter and D.o

Page 3: UX Design for Content Management Systems

tzk-design.com • Twitter: @danigrrl • [email protected]

Let’s talk about…!

A tale of two projects

Page 4: UX Design for Content Management Systems

tzk-design.com • Twitter: @danigrrl • [email protected]

Page 5: UX Design for Content Management Systems

tzk-design.com • Twitter: @danigrrl • [email protected]

Page 6: UX Design for Content Management Systems

tzk-design.com • Twitter: @danigrrl • [email protected]

Page 7: UX Design for Content Management Systems

tzk-design.com • Twitter: @danigrrl • [email protected]

12 weeks 3-5 user interviews 1 designer A few rounds of feedback and iteration

Process  

15-page PDF 15 minute presentation

Deliverables  

Page 8: UX Design for Content Management Systems

tzk-design.com • Twitter: @danigrrl • [email protected]

Page 9: UX Design for Content Management Systems

tzk-design.com • Twitter: @danigrrl • [email protected]

Reorganized navigation and content for 98 departments.

Page 10: UX Design for Content Management Systems

tzk-design.com • Twitter: @danigrrl • [email protected]

Reorganize permissions so students, faculty and staff could log into the site

Page 11: UX Design for Content Management Systems

tzk-design.com • Twitter: @danigrrl • [email protected]

Set up Workbench editorial workflow and training for 250 content editors

Page 12: UX Design for Content Management Systems

tzk-design.com • Twitter: @danigrrl • [email protected]

Completely reorganize how departments are presented, including both public and internal content

Page 13: UX Design for Content Management Systems

tzk-design.com • Twitter: @danigrrl • [email protected]

Set up an internal Announcements model that allowed users to subscribe to specific announcement categories

Page 14: UX Design for Content Management Systems

tzk-design.com • Twitter: @danigrrl • [email protected]

Redesign an internal directory in Drupal using data from user profiles

Page 15: UX Design for Content Management Systems

tzk-design.com • Twitter: @danigrrl • [email protected]

Rearchitect the college magazine, Berklee Today, using a custom taxonomy and content type for display

Page 16: UX Design for Content Management Systems

tzk-design.com • Twitter: @danigrrl • [email protected]

Page 17: UX Design for Content Management Systems

tzk-design.com • Twitter: @danigrrl • [email protected]

Page 18: UX Design for Content Management Systems

tzk-design.com • Twitter: @danigrrl • [email protected]

Page 19: UX Design for Content Management Systems

tzk-design.com • Twitter: @danigrrl • [email protected]

8 months 3 months of meetings 98 departments around the college Constant feedback and iteration cycles

Process  

Page 20: UX Design for Content Management Systems

tzk-design.com • Twitter: @danigrrl • [email protected]

30+ pages of site maps Axure prototypes for 6 new features Content models for 3 new areas 6 Training videos 60+ pages of training documentation 4-6 training sessions for content managers

Deliverables  

Page 21: UX Design for Content Management Systems

tzk-design.com • Twitter: @danigrrl • [email protected]

What’s the difference between them?

Page 22: UX Design for Content Management Systems

tzk-design.com • Twitter: @danigrrl • [email protected]

Mobile APP UX •  Can  start  solo  or  in  small  teams  •  Easier  to  see  patterns  in  functionality/content  • Often  dealing  with  1-­‐3  personas  •  Mostly  end  users  &  those  interacting  with  them  •  Tasks  are  fairly  broad/limited  

•  Easier  to  start  small  and  ramp  up  

Page 23: UX Design for Content Management Systems

tzk-design.com • Twitter: @danigrrl • [email protected]

UX for content management systems •  Team  dynamics  are  important,  but  messy  •  Projects  can  represent  a  huge  effort  among  a  lot  of  people  •  Involves  increasingly  complex  content  and  interaction  patterns  •  End  users  are  just  the  tip  of  the  iceberg  •  Content  creators  •  Department  managers  •  Permissions  need  to  be  managed  carefully  

Page 24: UX Design for Content Management Systems

tzk-design.com • Twitter: @danigrrl • [email protected]

What happens when 98 departments need to train

staff and student employees to enter content?

Page 25: UX Design for Content Management Systems

tzk-design.com • Twitter: @danigrrl • [email protected]

A PROCESS …and  some  perspective  

Page 26: UX Design for Content Management Systems

tzk-design.com • Twitter: @danigrrl • [email protected]

Identify the users and the stakeholders • What  is  the  goal  of  the  project?  How  does  it  relate  to  the  business  priorities?  • Who  will  be  using  this  site?  • Who  will  be  maintaining  the  content?  How  are  they  feeling  about  the  change?  • What  safeguards/permissions  need  to  be  built  into  the  system  so  that  content  managers  can’t  break  things?  

Page 27: UX Design for Content Management Systems

tzk-design.com • Twitter: @danigrrl • [email protected]

Stakeholder Meetings

Page 28: UX Design for Content Management Systems

tzk-design.com • Twitter: @danigrrl • [email protected]

Task Anon/NTF

Potential Traveler

Single Traveler

Group Leader

Booked/BND

Past Traveler

Site Editor

Access information about Vantage

Learn about becoming a group leader

Learn about single traveler matching program

Learn about traveling with Vantage

Search for trips

View specific trips

View trip accommodations

View trip itinerary

View trip pricing

View trip departures

Access Vantage contact information

Create an account on the site

Bookmark trips/Add to “wish list”

Download an E-Travel Guide

Request a Vantage catalog

Create a “social” profile

Create a “travel” profile

Vantage Travel - Functional priorities by user role! Created Thursday, February 3, 2011

High priority Medium priority Low priority Question priority Not applicable Requires account setup

Anonymous Prospect Customer Functional Priorities

Page 29: UX Design for Content Management Systems

tzk-design.com • Twitter: @danigrrl • [email protected]

Personas

Page 30: UX Design for Content Management Systems

tzk-design.com • Twitter: @danigrrl • [email protected]

Evaluate the content • Where  is  it  coming  from?  • What  needs  to  be  updated  or  deleted?  • What  formatting  needs  exist?  •  File  uploads?  •  Image  uploads?  •  Music  or  video  Siles?  

• Who  is  responsible  for  getting  it  into  the  system?  • Who  will  be  maintaining  it?  

Page 31: UX Design for Content Management Systems

tzk-design.com • Twitter: @danigrrl • [email protected]

Site Maps

Page 32: UX Design for Content Management Systems

tzk-design.com • Twitter: @danigrrl • [email protected]

Stakeholder Meetings

Page 33: UX Design for Content Management Systems

tzk-design.com • Twitter: @danigrrl • [email protected]

Establish your content types •  Identify  commonalities  in  the  content  •  Blog  posts  •  Announcements  or  News  Items  •  Events  •  Staff  Pages  •  Policies  or  Handbooks?  •  Forms?  

•  Each  will  have  its  own  needs  for  formatting  and  display  

Page 34: UX Design for Content Management Systems

tzk-design.com • Twitter: @danigrrl • [email protected]

Content Models

Page 35: UX Design for Content Management Systems

tzk-design.com • Twitter: @danigrrl • [email protected]

Architecture Workshops

Page 36: UX Design for Content Management Systems

tzk-design.com • Twitter: @danigrrl • [email protected]

Start prototyping • Working  in  Axure  helps  establish  patterns  and  priorities  before  code  gets  written  • Annotating  as  you  go  gives  developers  something  to  work  from,  and  avoids  miscommunication  • Breaking  down  work  into  functional  “chunks”  allows  you  to  focus  on  one  piece  while  the  developers  are  working  on  another  piece.  

Page 37: UX Design for Content Management Systems

tzk-design.com • Twitter: @danigrrl • [email protected]

Prototypes

Page 38: UX Design for Content Management Systems

tzk-design.com • Twitter: @danigrrl • [email protected]

Architecture Workshops

Page 39: UX Design for Content Management Systems

tzk-design.com • Twitter: @danigrrl • [email protected]

Stakeholder Meetings

Page 40: UX Design for Content Management Systems

tzk-design.com • Twitter: @danigrrl • [email protected]

Understand the political implications •  Your  team  is  building  the  system,  but  other  people  have  to  maintain  this  content.  • Redesigns  signal  a  large  change  in  the  organization  •  You’re  asking  departments  to  put  in  a  lot  of  extra  work.  

Page 41: UX Design for Content Management Systems

tzk-design.com • Twitter: @danigrrl • [email protected]

Content Manager Training

Page 42: UX Design for Content Management Systems

tzk-design.com • Twitter: @danigrrl • [email protected]

Stakeholder Meetings

Page 43: UX Design for Content Management Systems

tzk-design.com • Twitter: @danigrrl • [email protected]

User Experience is not the work of one person

… it’s the work of everyone in the business.