Stories of Discovery: A responsive journey

162

description

Transforming a government website with 200 content authors, tens of thousands of pages, and close to 100 different content templates into a responsive design system is tricky business. In 2013, we led a project to update and future-proof one of Canada’s fastest-growing municipalities’ main communication channel: Surrey.ca. The responsive redesign achieved unanimous support from city staff, business stakeholders, council, and the mayor. Mobile traffic has increased by 300% since launch. The improved governance and content workflow processes have facilitated new collaborations between silo’d City departments. The Surrey Web Team described this as one of the most positive changes in recent history for the City’s external and internal communication. Most importantly, it created a sense of cohesion through a wholehearted responsive design process. This project required a new approach. We needed the ability to connect deeply with everyone on our project team: client, vendor, and audience. We needed to get comfortable with imperfection, and fight through difficult moments as a team. We let go of our usual need to protect ourselves and maintain control, and worked together to solve our responsive design and adaptive content problems. Our collaborative creativity was a catalyst for changing the way the City communicates. What you’ll take away from this talk: - Understand how a responsive design process impacts team dynamics and workflow - Learn how to encourage collaboration across departments and conquer organizational silos - Hear how a responsive discovery can change a project (and why that’s okay) - Get cozy with your customers, stakeholders, and content authors – we’re all allies in the fight to make the web a better place

Transcript of Stories of Discovery: A responsive journey

Page 1: Stories of Discovery: A responsive journey
Page 2: Stories of Discovery: A responsive journey

RepublicOfQuality.com

Page 3: Stories of Discovery: A responsive journey
Page 4: Stories of Discovery: A responsive journey
Page 5: Stories of Discovery: A responsive journey
Page 6: Stories of Discovery: A responsive journey
Page 7: Stories of Discovery: A responsive journey
Page 8: Stories of Discovery: A responsive journey
Page 9: Stories of Discovery: A responsive journey
Page 10: Stories of Discovery: A responsive journey
Page 11: Stories of Discovery: A responsive journey
Page 12: Stories of Discovery: A responsive journey
Page 13: Stories of Discovery: A responsive journey
Page 14: Stories of Discovery: A responsive journey
Page 15: Stories of Discovery: A responsive journey
Page 16: Stories of Discovery: A responsive journey
Page 17: Stories of Discovery: A responsive journey
Page 18: Stories of Discovery: A responsive journey
Page 19: Stories of Discovery: A responsive journey
Page 20: Stories of Discovery: A responsive journey
Page 21: Stories of Discovery: A responsive journey
Page 22: Stories of Discovery: A responsive journey
Page 23: Stories of Discovery: A responsive journey
Page 24: Stories of Discovery: A responsive journey
Page 25: Stories of Discovery: A responsive journey

vimeo.com/15266890

Page 26: Stories of Discovery: A responsive journey
Page 27: Stories of Discovery: A responsive journey
Page 28: Stories of Discovery: A responsive journey
Page 29: Stories of Discovery: A responsive journey
Page 30: Stories of Discovery: A responsive journey
Page 31: Stories of Discovery: A responsive journey
Page 32: Stories of Discovery: A responsive journey
Page 33: Stories of Discovery: A responsive journey
Page 34: Stories of Discovery: A responsive journey
Page 35: Stories of Discovery: A responsive journey
Page 36: Stories of Discovery: A responsive journey
Page 37: Stories of Discovery: A responsive journey
Page 38: Stories of Discovery: A responsive journey
Page 39: Stories of Discovery: A responsive journey

surrey.ca show map of lower mainland

Page 40: Stories of Discovery: A responsive journey
Page 41: Stories of Discovery: A responsive journey

The heroprocess they wanted

Page 42: Stories of Discovery: A responsive journey

The process they needed

Page 43: Stories of Discovery: A responsive journey

think about your message

Page 44: Stories of Discovery: A responsive journey
Page 45: Stories of Discovery: A responsive journey
Page 46: Stories of Discovery: A responsive journey
Page 47: Stories of Discovery: A responsive journey
Page 48: Stories of Discovery: A responsive journey
Page 49: Stories of Discovery: A responsive journey
Page 50: Stories of Discovery: A responsive journey
Page 51: Stories of Discovery: A responsive journey

the team

Page 52: Stories of Discovery: A responsive journey
Page 53: Stories of Discovery: A responsive journey

awwww

Page 54: Stories of Discovery: A responsive journey
Page 55: Stories of Discovery: A responsive journey
Page 56: Stories of Discovery: A responsive journey
Page 57: Stories of Discovery: A responsive journey
Page 58: Stories of Discovery: A responsive journey
Page 59: Stories of Discovery: A responsive journey
Page 60: Stories of Discovery: A responsive journey
Page 61: Stories of Discovery: A responsive journey
Page 62: Stories of Discovery: A responsive journey
Page 63: Stories of Discovery: A responsive journey
Page 64: Stories of Discovery: A responsive journey
Page 65: Stories of Discovery: A responsive journey

republicofquality.com/working-together

Silos are for farming, not web design

Page 66: Stories of Discovery: A responsive journey
Page 67: Stories of Discovery: A responsive journey

work together... weird, eh*?* Canadian content

Page 68: Stories of Discovery: A responsive journey
Page 69: Stories of Discovery: A responsive journey
Page 70: Stories of Discovery: A responsive journey
Page 71: Stories of Discovery: A responsive journey

be careful to watch your back :)

Page 72: Stories of Discovery: A responsive journey
Page 73: Stories of Discovery: A responsive journey

create an environment for unplanned moments of discovery

Page 74: Stories of Discovery: A responsive journey

audit all the things!

Page 75: Stories of Discovery: A responsive journey
Page 76: Stories of Discovery: A responsive journey
Page 77: Stories of Discovery: A responsive journey
Page 78: Stories of Discovery: A responsive journey
Page 79: Stories of Discovery: A responsive journey
Page 80: Stories of Discovery: A responsive journey

ux vision & design principles

Page 81: Stories of Discovery: A responsive journey
Page 82: Stories of Discovery: A responsive journey

collaborative sketching

Page 83: Stories of Discovery: A responsive journey
Page 84: Stories of Discovery: A responsive journey
Page 85: Stories of Discovery: A responsive journey

Call to action!

Page 86: Stories of Discovery: A responsive journey

Lost call to action...

Page 87: Stories of Discovery: A responsive journey

Call to action!

Page 88: Stories of Discovery: A responsive journey

Call to action!

Page 89: Stories of Discovery: A responsive journey
Page 90: Stories of Discovery: A responsive journey
Page 91: Stories of Discovery: A responsive journey
Page 92: Stories of Discovery: A responsive journey
Page 93: Stories of Discovery: A responsive journey
Page 94: Stories of Discovery: A responsive journey
Page 95: Stories of Discovery: A responsive journey

phone calls!!

Page 96: Stories of Discovery: A responsive journey
Page 97: Stories of Discovery: A responsive journey

mental models

Page 98: Stories of Discovery: A responsive journey
Page 99: Stories of Discovery: A responsive journey
Page 100: Stories of Discovery: A responsive journey
Page 101: Stories of Discovery: A responsive journey
Page 102: Stories of Discovery: A responsive journey
Page 103: Stories of Discovery: A responsive journey
Page 104: Stories of Discovery: A responsive journey
Page 105: Stories of Discovery: A responsive journey

http://bit.ly/11SF16J

Page 106: Stories of Discovery: A responsive journey
Page 107: Stories of Discovery: A responsive journey
Page 108: Stories of Discovery: A responsive journey
Page 109: Stories of Discovery: A responsive journey
Page 110: Stories of Discovery: A responsive journey
Page 111: Stories of Discovery: A responsive journey
Page 112: Stories of Discovery: A responsive journey
Page 113: Stories of Discovery: A responsive journey
Page 114: Stories of Discovery: A responsive journey
Page 115: Stories of Discovery: A responsive journey
Page 116: Stories of Discovery: A responsive journey

empathy & experience mapping

Page 117: Stories of Discovery: A responsive journey
Page 118: Stories of Discovery: A responsive journey
Page 119: Stories of Discovery: A responsive journey
Page 120: Stories of Discovery: A responsive journey
Page 121: Stories of Discovery: A responsive journey
Page 122: Stories of Discovery: A responsive journey
Page 123: Stories of Discovery: A responsive journey
Page 124: Stories of Discovery: A responsive journey

mappingexperiences.com

Page 125: Stories of Discovery: A responsive journey
Page 126: Stories of Discovery: A responsive journey
Page 127: Stories of Discovery: A responsive journey
Page 128: Stories of Discovery: A responsive journey
Page 129: Stories of Discovery: A responsive journey

audience profiles

Page 130: Stories of Discovery: A responsive journey

Project Analysis

Page 131: Stories of Discovery: A responsive journey
Page 132: Stories of Discovery: A responsive journey

be willing to adapt yourself

Page 133: Stories of Discovery: A responsive journey
Page 134: Stories of Discovery: A responsive journey
Page 135: Stories of Discovery: A responsive journey
Page 136: Stories of Discovery: A responsive journey
Page 137: Stories of Discovery: A responsive journey
Page 138: Stories of Discovery: A responsive journey

real discovery happens between the planned activities

Page 139: Stories of Discovery: A responsive journey
Page 140: Stories of Discovery: A responsive journey
Page 141: Stories of Discovery: A responsive journey
Page 142: Stories of Discovery: A responsive journey
Page 143: Stories of Discovery: A responsive journey
Page 144: Stories of Discovery: A responsive journey
Page 145: Stories of Discovery: A responsive journey

in-browser wireframes

Page 146: Stories of Discovery: A responsive journey

http://en.wikipedia.org/wiki/Comparison_of_Android_devices

Page 147: Stories of Discovery: A responsive journey
Page 148: Stories of Discovery: A responsive journey

Surrey.ca

Page 149: Stories of Discovery: A responsive journey

in-browser designs

Page 150: Stories of Discovery: A responsive journey

Surrey.ca

Page 151: Stories of Discovery: A responsive journey

celebrate successes together

Page 152: Stories of Discovery: A responsive journey
Page 153: Stories of Discovery: A responsive journey

don’t stop discovering

Page 154: Stories of Discovery: A responsive journey
Page 155: Stories of Discovery: A responsive journey
Page 156: Stories of Discovery: A responsive journey

lunch & learns

Page 157: Stories of Discovery: A responsive journey
Page 158: Stories of Discovery: A responsive journey
Page 159: Stories of Discovery: A responsive journey

WEB TEAMALL TEAM

WORKING WITH THE CITY OF SURREY WEB TEAM

BUSINESS UNIT

DOCUMENT FUNCTIONALREQUIREMENTS

DOCUMENT CONTENT REQUIREMENTS

KICK-OFF MEETING

APPROVE CONTENT REQUIREMENTS

GATHER CONTENT REQUIREMENTS

CONTENT REQUEST

BU EDITOR:

BU MANAGER

BU + WEB TEAM: Meet to discuss project requirements and timeline.

Marketing should be present for campaignsIT should be present for applications

2 MONTHS BEFORE LAUNCH

WT SPECIALIST:Document all functional andtechnology requirements

Sign-off by BU and WTrequired

WT EDITOR:Document all content andeditorial requirements

Sign-off by BU and WTrequired

BU EDITOR:Gather initial content and functional requirements.

Fill out “Starting a web project”questionnaire (forthcoming)

BU MANAGER

Page 160: Stories of Discovery: A responsive journey

CREATE FUNCTIONAL REQUIREMENTS

EDITCONTENT

PUBLISH

FINAL APPROVAL

REVIEW/EDIT/ARCHIVE CONTENT[EVERY 12 MONTHS]

REVIEW ANALYTICS[EVERY 6 MONTHS]

SUBMIT TO WORKFLOW

CONTENT ENTRYAND MIGRATION

CONTENT APPROVAL

BU EDITOR:Migrate all new contentinto OpenText CMS

1 WEEK BEFORE LAUNCH

BU EDITOR:Migrate all new contentinto OpenText CMS

BU MANAGER:Approve all editorial content

1 MONTH BEFORE LAUNCH

WEB TEAM:Compile analytics data from past 6 months

BU + WEB TEAM:Meet with BU to review and recommend next steps –edit or archive content

WEB TEAM:Compile analytics data from past 6 months

BU + WEB TEAM:Meet to review and recommend changes

WT EDITOR OR WT SPECIALIST

WT EDITOR + WT SPECIALIST

WT EDITOR:Edit editorial content for adherance to web writing guideand semantic content (if neccessary)

in parallel:

WT SPECIALIST:Build all necessary functionaland technical requirements

Page 161: Stories of Discovery: A responsive journey

collaboration is the key !

there is only one team

Page 162: Stories of Discovery: A responsive journey

Thanks! !

republicofquality.com @hellofisher