Creating Sustainable Website Processes

147
CREATING SUSTAINABLE WEBSITE PROCESSES DPM Summit 2016 Natalie Semczuk @talkanatalka #dpmsummit2016

Transcript of Creating Sustainable Website Processes

Page 1: Creating Sustainable Website Processes

CREATING SUSTAINABLE WEBSITE PROCESSES

DPM Summit 2016Natalie Semczuk@talkanatalka#dpmsummit2016

Page 2: Creating Sustainable Website Processes

Hello

Page 3: Creating Sustainable Website Processes

SUSTAINABLE WEBSITE PROCESSES

Page 4: Creating 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

Page 5: Creating Sustainable Website Processes

SO, WHY DO WE NEED TO CARE?

Page 6: Creating Sustainable Website Processes

POST-LAUNCH IS IMPORTANT

Page 7: Creating Sustainable Website Processes

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

Page 8: Creating Sustainable Website Processes

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?

Page 9: Creating Sustainable Website Processes

LET’S TALK ABOUT CLIENTS

Page 10: Creating Sustainable Website Processes

WHO ARE YOUR CLIENTS?

Activity

Page 11: Creating Sustainable Website Processes

GENERALLY: OUR CLIENTS HAVE VERY DIFFERENT BACKGROUNDS

Page 12: Creating Sustainable Website Processes

HOW DO OUR CLIENTS UPDATE THEIR SITES?

Page 13: Creating Sustainable Website Processes

THESE VARIATIONS LEAD TO MANY DIFFERENCES IN SITE MANAGEMENT

Page 14: Creating Sustainable Website Processes

SITE MANAGEMENT DIRECTLY IMPACTS USER EXPERIENCE

Page 15: Creating Sustainable Website Processes

HOW?

Page 16: Creating Sustainable Website Processes

HOW?(We’re getting to that)

Page 17: Creating Sustainable Website Processes

BUT FIRST:

Page 18: Creating Sustainable Website Processes

CONTENT DEBT

Page 19: Creating Sustainable Website Processes

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.”

Page 20: Creating Sustainable Website Processes

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.”

Page 21: Creating Sustainable Website Processes

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.”

Page 22: Creating Sustainable Website Processes

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…”

Page 23: Creating Sustainable Website Processes

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…”

Page 24: Creating Sustainable Website Processes

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…”

Page 25: Creating Sustainable Website Processes

GREAT PROCESSES PREVENT CONTENT DEBT

Page 26: Creating Sustainable Website Processes

CONTENT DEBT CAN TAKE THE FORM OF:

Page 27: Creating Sustainable Website Processes

CONTENT DEBT CAN TAKE THE FORM OF:

Outdated content

Page 28: Creating Sustainable Website Processes

CONTENT DEBT CAN TAKE THE FORM OF:

Page 29: Creating Sustainable Website Processes

CONTENT DEBT CAN TAKE THE FORM OF:

Outdated contentDifficult to find content

Page 30: Creating Sustainable Website Processes

CONTENT DEBT CAN TAKE THE FORM OF:

Page 31: Creating Sustainable Website Processes

CONTENT DEBT CAN TAKE THE FORM OF:

Outdated contentDifficult to find contentBloated upload directories

Page 32: Creating Sustainable Website Processes

CONTENT DEBT CAN TAKE THE FORM OF:

Page 33: Creating Sustainable Website Processes

CONTENT DEBT CAN TAKE THE FORM OF:

Outdated contentDifficult to find contentBloated upload directoriesBroken links

Page 34: Creating Sustainable Website Processes

CONTENT DEBT CAN TAKE THE FORM OF:

Page 35: Creating Sustainable Website Processes

CONTENT DEBT CAN TAKE THE FORM OF:

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

Page 36: Creating Sustainable Website Processes

CONTENT DEBT CAN TAKE THE FORM OF:

Page 37: Creating Sustainable Website Processes

CONTENT DEBT IS PREVENTABLE

Page 38: Creating Sustainable Website Processes

CONTENT DEBT STARTS WITH US

Page 39: Creating Sustainable Website Processes

CONTENT DEBT STARTS WITH US

(Our teams, our work, our projects)

Page 40: Creating Sustainable Website Processes

LET’S DO AWAY WITH:

Hard-coded content

Page 41: Creating Sustainable Website Processes

LET’S DO AWAY WITH:

Page 42: Creating Sustainable Website Processes

LET’S DO AWAY WITH:

Hard-coded contentPoorly defined formatting options

Page 43: Creating Sustainable Website Processes

LET’S DO AWAY WITH:

Page 44: Creating Sustainable Website Processes

LET’S DO AWAY WITH:

Hard-coded contentPoorly defined formatting options Intensive image requirements

Page 45: Creating Sustainable Website Processes

LET’S DO AWAY WITH:

Page 46: Creating Sustainable Website Processes

LET’S DO AWAY WITH:

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

Page 47: Creating Sustainable Website Processes

LET’S DO AWAY WITH:

Page 48: Creating Sustainable Website Processes

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

Page 49: Creating Sustainable Website Processes

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

Page 50: Creating Sustainable Website Processes

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

Page 51: Creating Sustainable Website Processes

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

Page 52: Creating Sustainable Website Processes

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

Page 53: Creating Sustainable Website Processes

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

Page 54: Creating Sustainable Website Processes

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

Page 55: Creating Sustainable Website Processes

WE CAN REVERSE ENGINEER OUR PROCESSES TO INCLUDE EDUCATION + EXPECTATIONS

Page 56: Creating Sustainable Website Processes

LET’S TALK PROCESS!

Page 57: Creating Sustainable Website Processes

DISCOVERY, RESEARCH, AND PLANNING

Page 58: Creating Sustainable Website Processes

WHO MANAGES THE CONTENT?

Activity

Page 59: Creating Sustainable Website Processes

GOAL: IDENTIFY YOUR CLIENT’S CONTENT MANAGEMENT WORKFLOW

Who manages the content?

Page 60: Creating Sustainable Website Processes

GOAL: IDENTIFY YOUR CLIENT’S CONTENT MANAGEMENT WORKFLOW

Who manages the content?

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

Page 61: Creating Sustainable Website Processes

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

Activity

Page 62: Creating Sustainable Website Processes

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.

Page 63: Creating Sustainable Website Processes

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?

Page 64: Creating Sustainable Website Processes

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

Activity

Page 65: Creating Sustainable Website Processes

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

Activity

1. Needs discovered2. Creation3. Approval4. Publication

Page 66: Creating Sustainable Website Processes

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

Page 67: Creating Sustainable Website Processes

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

Page 68: Creating Sustainable Website Processes

SOME CAN BE EXTREMELY SIMPLE:

Page 69: Creating Sustainable Website Processes

OR IT COULD BE MUCH MORE COMPLEX:

csffct.co/RGfGOu

Page 70: Creating Sustainable Website Processes

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

Page 71: Creating Sustainable Website Processes

DESIGN PHASE

Page 72: Creating Sustainable Website Processes

DESIGNERS THINK IN PATTERNS TO CREATE MODULAR SYSTEMS

Page 73: Creating Sustainable Website Processes

DESIGNERS THINK IN PATTERNS TO CREATE MODULAR SYSTEMS

Style guides Pattern librariesFront-end frameworksAtomic design

Page 74: Creating Sustainable Website Processes

DESIGNERS THINK IN PATTERNS TO CREATE MODULAR SYSTEMS

Page 75: Creating Sustainable Website Processes

DESIGNERS THINK IN PATTERNS TO CREATE MODULAR SYSTEMS

csffct.co/iaYqPP

Page 76: Creating Sustainable Website Processes

DESIGNERS THINK IN PATTERNS TO CREATE MODULAR SYSTEMS

Page 77: Creating Sustainable Website Processes

DESIGNERS THINK IN PATTERNS TO CREATE MODULAR SYSTEMS

csffct.co/OuBxih

Page 78: Creating Sustainable Website Processes

WE CAN THINK OF DESIGN + CONTENT AS PATTERNS AS WELL

Page 79: Creating Sustainable Website Processes

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

Page 80: Creating Sustainable Website Processes

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

Page 81: Creating Sustainable Website Processes

HOW DO WE IDENTIFY THESE PATTERNS?

Discussion/Activity

Page 82: Creating Sustainable Website Processes

HOW DO WE IDENTIFY THESE PATTERNS?

Discussion/Activity

(and what do they look like?)

Page 83: Creating Sustainable Website Processes

INVISION APP MARKETING SITE

Page 84: Creating Sustainable Website Processes

INVISION APP MARKETING SITE

Page 85: Creating Sustainable Website Processes

FEATURE PAGES

Page 86: Creating Sustainable Website Processes

PATTERNS START TO EMERGE ACROSS PAGES

Page 87: Creating Sustainable Website Processes

WHAT CAN WE INFER FROM THESE SIMILARITIES?

Page 88: Creating Sustainable Website Processes

WE CAN UNDERSTAND HOW THIS MIGHT BE CODED MODULARLY

Page 89: Creating Sustainable Website Processes

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

Page 90: Creating Sustainable Website Processes

HOMEPAGE

Page 91: Creating Sustainable Website Processes

ENTERPRISE PAGE

Page 92: Creating Sustainable Website Processes

TAKE THESE PATTERNS AND MAP THEM

Page 93: Creating Sustainable Website Processes
Page 94: Creating Sustainable Website Processes
Page 95: Creating Sustainable Website Processes
Page 96: Creating Sustainable Website Processes
Page 97: Creating Sustainable Website Processes
Page 98: Creating Sustainable Website Processes
Page 99: Creating Sustainable Website Processes
Page 100: Creating Sustainable Website Processes
Page 101: Creating Sustainable Website Processes

LET’S TRY ONE TOGETHER

Discussion/Activity

(quickly)

Page 102: Creating Sustainable Website Processes
Page 103: Creating Sustainable Website Processes
Page 104: Creating Sustainable Website Processes

SO, WHAT ARE WE ACTUALLY DOING HERE WITH THIS?

Page 105: Creating Sustainable Website Processes
Page 106: Creating Sustainable Website Processes

DEVELOPMENT PROCESS

Page 107: Creating Sustainable Website Processes

BY IDENTIFYING THOSE CONTENT PATTERNS IN THE DESIGN, WE:

Define content with existing design and front-end patterns

Page 108: Creating Sustainable Website Processes

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

Page 109: Creating Sustainable Website Processes

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

Page 110: Creating Sustainable Website Processes

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

Page 111: Creating Sustainable Website Processes

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

Page 112: Creating Sustainable Website Processes

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

Page 113: Creating Sustainable Website Processes

CONTENT WORKFLOW MAPS + PATTERNS

Helps prioritize development needs

Page 114: Creating Sustainable Website Processes

THIS HELPS CREATE LESS MAINTENANCE OVERHEAD FOR OUR CLIENTS

Page 115: Creating Sustainable Website Processes

WHICH ENSURES A MORE USABLE SITE POST-LAUNCH

Page 116: Creating Sustainable Website Processes

PROCESSES NEED FEEDBACK LOOPS

Page 117: Creating Sustainable Website Processes

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

Page 118: Creating Sustainable Website Processes

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

Page 119: Creating Sustainable Website Processes

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

Page 120: Creating Sustainable Website Processes

THANK YOU!

Natalie Semczuk@[email protected]

causeeffect.cotalkanatalka.com

Page 121: Creating Sustainable Website Processes

A CASE STUDY

Page 122: Creating Sustainable Website Processes

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

Page 123: Creating Sustainable Website Processes

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

Page 124: Creating Sustainable Website Processes

WHAT WE STARTED WITH:

Page 125: Creating Sustainable Website Processes

WHAT WE STARTED WITH:

• Individual pages with specialized fields and elements

Page 126: Creating Sustainable Website Processes

WHAT WE STARTED WITH:

• Individual pages with specialized fields and elements

• Elements defined per page or channel

Page 127: Creating Sustainable Website Processes
Page 128: Creating Sustainable Website Processes
Page 129: Creating Sustainable Website Processes
Page 130: Creating Sustainable Website Processes
Page 131: Creating Sustainable Website Processes

INITIAL IMPRESSIONS

Page 132: Creating Sustainable Website Processes

BUT WE REIMAGINED THIS ALL

Page 133: Creating Sustainable Website Processes

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

Page 134: Creating Sustainable Website Processes
Page 135: Creating Sustainable Website Processes
Page 136: Creating Sustainable Website Processes
Page 137: Creating Sustainable Website Processes
Page 138: Creating Sustainable Website Processes

THIS WAS AN ONGOING, AGILE-LIKE PROCESS

Page 139: Creating Sustainable Website Processes

WHY THIS WORKED

Page 140: Creating Sustainable Website Processes

THE RESULT

Page 141: Creating Sustainable Website Processes

SITE IS FLEXIBLE, CUSTOMIZABLE TO ALMOST ALL CONTENT MANAGEMENT NEEDS

Page 142: Creating Sustainable Website Processes

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

Page 143: Creating Sustainable Website Processes

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

Page 144: Creating Sustainable Website Processes

CONTENT MANAGER CAN SUPPORT MANY NEW MARKETING INITIATIVES

Page 145: Creating Sustainable Website Processes

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

Page 146: Creating Sustainable Website Processes

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

Page 147: Creating Sustainable Website Processes

EVERYONE WINS!