CREATING SUSTAINABLE WEBSITE PROCESSES

DPM Summit 2016Natalie Semczuk@talkanatalka#dpmsummit2016

Hello

SUSTAINABLE WEBSITE PROCESSES

SUSTAINABLE WEBSITE PROCESSES

• Considers the content manager• Makes scaling the site easier• Helps your team provide support• Provides a better foundation for post-

launch site maintenance, growth and usage

SO, WHY DO WE NEED TO CARE?

POST-LAUNCH IS IMPORTANT

FOR YOUR CLIENT, THE SITE ONLY BEGINS TO EXIST AFTER LAUNCH

WEBSITES EVOLVE

Website changes and maintenance are inevitable. Why not make it as easy, consistent, and valuable as you can for both yourself and your clients?

LET’S TALK ABOUT CLIENTS

WHO ARE YOUR CLIENTS?

Activity

GENERALLY: OUR CLIENTS HAVE VERY DIFFERENT BACKGROUNDS

HOW DO OUR CLIENTS UPDATE THEIR SITES?

THESE VARIATIONS LEAD TO MANY DIFFERENCES IN SITE MANAGEMENT

SITE MANAGEMENT DIRECTLY IMPACTS USER EXPERIENCE

HOW?

HOW?(We’re getting to that)

BUT FIRST:

CONTENT DEBT

SUZANNE CHAPMANcsffct.co/uslib

“…Organizations with large websites have a growing problem with…“content debt.” And

like with “deferred maintenance” of buildings (the practice of postponing repairs to save costs), allowing too much…content

debt will result in costing you much more in the long run.”

SUZANNE CHAPMANcsffct.co/uslib

“…Organizations with large websites have a growing problem with…“content debt.” And

like with “deferred maintenance” of buildings (the practice of postponing repairs to save costs), allowing too much…content

debt will result in costing you much more in the long run.”

SUZANNE CHAPMANcsffct.co/uslib

“…Organizations with large websites have a growing problem with…“content debt.” And

like with “deferred maintenance” of buildings (the practice of postponing repairs to save costs), allowing too much…content

debt will result in costing you much more in the long run.”

MELODY KRAMERcsffct.co/18fcdb

“Buildup of content debt may not be as apparent as technical debt, because it’s

unlikely to initially cause software to break. Still, it could easily result in confusion…a greater need for customer support, slower

progress, the need for more meetings, more external and internal complaints, and wasted

time getting people on-boarded…”

MELODY KRAMERcsffct.co/18fcdb

“Buildup of content debt may not be as apparent as technical debt, because it’s

unlikely to initially cause software to break. Still, it could easily result in confusion…a greater need for customer support, slower

progress, the need for more meetings, more external and internal complaints, and wasted

time getting people on-boarded…”

MELODY KRAMERcsffct.co/18fcdb

“Buildup of content debt may not be as apparent as technical debt, because it’s

unlikely to initially cause software to break. Still, it could easily result in confusion…a greater need for customer support, slower

progress, the need for more meetings, more external and internal complaints, and wasted

time getting people on-boarded…”

GREAT PROCESSES PREVENT CONTENT DEBT

CONTENT DEBT CAN TAKE THE FORM OF:

CONTENT DEBT CAN TAKE THE FORM OF:

Outdated content

CONTENT DEBT CAN TAKE THE FORM OF:

CONTENT DEBT CAN TAKE THE FORM OF:

Outdated contentDifficult to find content

CONTENT DEBT CAN TAKE THE FORM OF:

CONTENT DEBT CAN TAKE THE FORM OF:

Outdated contentDifficult to find contentBloated upload directories

CONTENT DEBT CAN TAKE THE FORM OF:

CONTENT DEBT CAN TAKE THE FORM OF:

Outdated contentDifficult to find contentBloated upload directoriesBroken links

CONTENT DEBT CAN TAKE THE FORM OF:

CONTENT DEBT CAN TAKE THE FORM OF:

Outdated contentDifficult to find contentBloated upload directoriesBroken linksContent styling & display errors

CONTENT DEBT CAN TAKE THE FORM OF:

CONTENT DEBT IS PREVENTABLE

CONTENT DEBT STARTS WITH US

CONTENT DEBT STARTS WITH US

(Our teams, our work, our projects)

LET’S DO AWAY WITH:

Hard-coded content

LET’S DO AWAY WITH:

LET’S DO AWAY WITH:

Hard-coded contentPoorly defined formatting options

LET’S DO AWAY WITH:

LET’S DO AWAY WITH:

Hard-coded contentPoorly defined formatting options Intensive image requirements

LET’S DO AWAY WITH:

LET’S DO AWAY WITH:

Hard-coded contentPoorly defined formatting options Intensive image requirementsLack of documentation

LET’S DO AWAY WITH:

Outdated content

Difficult to find content

Bloated upload directories

Broken links

Content styling & display errors

HARD-CODED CONTENT

POORLY DEFINED FORMATTING OPTIONS

INTENSIVE IMAGE REQUIREMENTS

LACK OF DOCUMENTATION

Outdated content

Difficult to find content

Bloated upload directories

Broken links

Content styling & display errors

HARD-CODED CONTENT

POORLY DEFINED FORMATTING OPTIONS

INTENSIVE IMAGE REQUIREMENTS

LACK OF DOCUMENTATION

Outdated content

Difficult to find content

Bloated upload directories

Broken links

Content styling & display errors

HARD-CODED CONTENT

POORLY DEFINED FORMATTING OPTIONS

INTENSIVE IMAGE REQUIREMENTS

LACK OF DOCUMENTATION

Outdated content

Difficult to find content

Bloated upload directories

Broken links

Content styling & display errors

HARD-CODED CONTENT

POORLY DEFINED FORMATTING OPTIONS

INTENSIVE IMAGE REQUIREMENTS

LACK OF DOCUMENTATION

Outdated content

Difficult to find content

Bloated upload directories

Broken links

Content styling & display errors

HARD-CODED CONTENT

POORLY DEFINED FORMATTING OPTIONS

INTENSIVE IMAGE REQUIREMENTS

LACK OF DOCUMENTATION

Outdated content

Difficult to find content

Bloated upload directories

Broken links

Content styling & display errors

HARD-CODED CONTENT

POORLY DEFINED FORMATTING OPTIONS

INTENSIVE IMAGE REQUIREMENTS

LACK OF DOCUMENTATION

= FRUSTRATION

GIVING OUR CLIENTS THE TOOLS TO MANAGE THEIR SITES MAKES FOR BETTER USER EXPERIENCE

WE CAN REVERSE ENGINEER OUR PROCESSES TO INCLUDE EDUCATION + EXPECTATIONS

LET’S TALK PROCESS!

DISCOVERY, RESEARCH, AND PLANNING

WHO MANAGES THE CONTENT?

Activity

GOAL: IDENTIFY YOUR CLIENT’S CONTENT MANAGEMENT WORKFLOW

Who manages the content?

GOAL: IDENTIFY YOUR CLIENT’S CONTENT MANAGEMENT WORKFLOW

Who manages the content?

Tools: 1. Questions & the 5 Whys2. Content Workflow and Responsibilities map

CREATE A POOL OF QUESTIONS YOU MIGHT ASK YOUR CLIENT ABOUT CONTENT MANAGEMENT

Activity

CREATE A POOL OF QUESTIONS YOU MIGHT ASK YOUR CLIENT ABOUT CONTENT MANAGEMENT

Activity

Hint: Use “the 5 whys” to dig into the root of your questions.

DISCUSS:What questions did everyone come up with?What sort of questions did you end up needing to break down?Did these lead to further questions?What is a common unclear area that might be resolved with questions?

SORT YOUR QUESTIONS INTO A CHRONOLOGICAL CHART: WHERE IN THE CONTENT PROCESS DO THESE QUESTIONS FIT?

Activity

SORT YOUR QUESTIONS INTO A CHRONOLOGICAL CHART: WHERE IN THE CONTENT PROCESS DO THESE QUESTIONS FIT?

Activity

1. Needs discovered2. Creation3. Approval4. Publication

DISCUSS:Where you able to see these distinct stages of content creation in your questions? Did you identify gaps in your questions?

WE CAN USE THESE TECHNIQUES TO CREATE A CONTENT WORKFLOW & RESPONSIBILITIES MAP

SOME CAN BE EXTREMELY SIMPLE:

OR IT COULD BE MUCH MORE COMPLEX:

csffct.co/RGfGOu

OVERALL GOALS:

• Educate ourselves and our clients about their content management workflow

• Get clients thinking about their own process

• Manage expectations from the start • Provide value prior to final launched

product

DESIGN PHASE

DESIGNERS THINK IN PATTERNS TO CREATE MODULAR SYSTEMS

DESIGNERS THINK IN PATTERNS TO CREATE MODULAR SYSTEMS

Style guides Pattern librariesFront-end frameworksAtomic design

DESIGNERS THINK IN PATTERNS TO CREATE MODULAR SYSTEMS

DESIGNERS THINK IN PATTERNS TO CREATE MODULAR SYSTEMS

csffct.co/iaYqPP

DESIGNERS THINK IN PATTERNS TO CREATE MODULAR SYSTEMS

DESIGNERS THINK IN PATTERNS TO CREATE MODULAR SYSTEMS

csffct.co/OuBxih

WE CAN THINK OF DESIGN + CONTENT AS PATTERNS AS WELL

RECOGNIZE CONTENT BLOCKS THAT ARE USED IN THE SAME WAY WHEN WE REVIEW DESIGN

BY THINKING IN CONTENT PATTERNS, WE CAN CONNECT FRONT-END USABILITY WITH BACK-END SUSTAINABILITY

HOW DO WE IDENTIFY THESE PATTERNS?

Discussion/Activity

HOW DO WE IDENTIFY THESE PATTERNS?

Discussion/Activity

(and what do they look like?)

INVISION APP MARKETING SITE

INVISION APP MARKETING SITE

FEATURE PAGES

PATTERNS START TO EMERGE ACROSS PAGES

WHAT CAN WE INFER FROM THESE SIMILARITIES?

WE CAN UNDERSTAND HOW THIS MIGHT BE CODED MODULARLY

WE CAN ALSO SEE WHERE CONTENT IS USED CONSISTENTLY IN THE SAME MANNER

HOMEPAGE

ENTERPRISE PAGE

TAKE THESE PATTERNS AND MAP THEM

LET’S TRY ONE TOGETHER

Discussion/Activity

(quickly)

SO, WHAT ARE WE ACTUALLY DOING HERE WITH THIS?

DEVELOPMENT PROCESS

BY IDENTIFYING THOSE CONTENT PATTERNS IN THE DESIGN, WE:

Define content with existing design and front-end patterns

BY IDENTIFYING THOSE CONTENT PATTERNS IN THE DESIGN, WE:

Define content with existing design and front-end patternsFlag content that does not fit well within patterns

BY IDENTIFYING THOSE CONTENT PATTERNS IN THE DESIGN, WE:

Define content with existing design and front-end patternsFlag content that does not fit well within patternsIdentify content that will be used and updated similarly

BY IDENTIFYING THOSE CONTENT PATTERNS IN THE DESIGN, WE:

Define content with existing design and front-end patternsFlag content that does not fit well within patternsIdentify content that will be used and updated similarlyCreate specs for content field and entry types

BY IDENTIFYING THOSE CONTENT PATTERNS IN THE DESIGN, WE:

Define content with existing design and front-end patternsFlag content that does not fit well within patternsIdentify content that will be used and updated similarlyCreate specs for content field and entry types

IDENTIFYING COMMONLY-USED DESIGN + CONTENT BLOCKS HELPS INFORM MODULAR DEVELOPMENT OF CONTENT BLOCKS

CONTENT WORKFLOW MAPS + PATTERNS

Helps prioritize development needs

THIS HELPS CREATE LESS MAINTENANCE OVERHEAD FOR OUR CLIENTS

WHICH ENSURES A MORE USABLE SITE POST-LAUNCH

PROCESSES NEED FEEDBACK LOOPS

Planning —> Research —> Design —> Development —> Launch —> Maintenance

Planning —> Research —> Design —> Development —> Launch —> Maintenance

Planning —> Research —> Design —> Development —> Launch —> Maintenance

THANK YOU!

Natalie Semczuk@talkanatalkanatalie@causeeffect.co

causeeffect.cotalkanatalka.com

A CASE STUDY

A LARGE PRODUCT STARTUP NEEDED A MARKETING SITE FOR CLOUD-BASED PRODUCT OFFERINGS

SITE CONSIDERATIONS AND DISCOVERIES:

• Uses Craft CMS • Has strong, clear company branding

guidelines• Creates many one-off marketing

landing pages• Uses CTA, product marketing, and

resource messaging repeatedly throughout the site

• Has a content-heavy site, but with new content offerings and a growing marketing plan

• Relies on a small team & tight deadlines to administer the site

WHAT WE STARTED WITH:

WHAT WE STARTED WITH:

• Individual pages with specialized fields and elements

WHAT WE STARTED WITH:

• Individual pages with specialized fields and elements

• Elements defined per page or channel

INITIAL IMPRESSIONS

BUT WE REIMAGINED THIS ALL

WE BEGAN CONCEPTUALIZING CONTENT AS A SERIES OF REPEATABLE, FLEXIBLE BLOCKS

THIS WAS AN ONGOING, AGILE-LIKE PROCESS

WHY THIS WORKED

THE RESULT

SITE IS FLEXIBLE, CUSTOMIZABLE TO ALMOST ALL CONTENT MANAGEMENT NEEDS

CMS IS BEING EXTENDED WITH ADVANCED DEVELOPMENT TO FURTHER CONTROL CONTENT MANAGEMENT EXPERIENCE AND ORGANIZATION OF CONTENT

CONTENT MANAGER IS ABLE TO GROW PAGES AND CONTENT WITH COMPANY’S NEEDS

CONTENT MANAGER CAN SUPPORT MANY NEW MARKETING INITIATIVES

THE SITE IS NOW SCALABLE FOR ALL OF THE COMPANY’S NEEDS IN THE FORESEEABLE FUTURE

THIS MEANS THE CONTENT MANAGER IS HAPPY, THE CONTENT MANAGER’S COMPANY IS HAPPY, AND THE WEB DEVELOPMENT TEAM IS HAPPY

EVERYONE WINS!