How a Web Redesign Drives Organizational Change: A Cautionary Tale

Few people set out to change their organization when they begin redesigning a website, but the process of creating an effective user experience can reveal gaps in an organization's strategy/business processes/etc.

To improve user experience in a sustainable way, while achieving business goals, your job may extend beyond wireframes and content outlines and require you take a seat at the table where business decisions are being made.

Transcript

1. How a Web Redesign
 Drives Organizational Change presented by Toni Bird — @tonibird
 Sorel Denholtz — @sorel
2. A Cautionary Tale In Which They Attempt to Redesign a Web Site, 
 and Discover Quagmires of Conflict, Overgrown Timelines, Creeping Scope, and Swamps of Despair
3. Once upon a time…
4. The marketing team wanted to bring their site into the 21st century. Audience-centric User-friendly Visually appealing Responsive And bound to be award-winning!
5. The path looked clear ahead.
6. Chapter 1 In which they define their approach
7. 
 2. Make the site audience-centric Organize information for audiences, rather than by departments 
 1. Improve look & feel New design with compelling visual elements. 
 Use existing copy to streamline the effort.
8. Our heroes worked hard…
9. A new information architecture! Beautiful layouts! Responsive designs!
10. Unknown to them, the journey was fraught with danger
11. Chapter 2 In which they share their work with others
13. Internal presentations were arranged.
14. Internal presentations were arranged. Approval was anticipated.
15. Internal presentations were arranged. Approval was anticipated. Soon, their vision would be reality.
16. They presented the smartly reorganized sitemap.
17. There were outcries! They presented the smartly reorganized sitemap.
19. “Where is MY section? Why is my content in three different places. Why is another group’s content here with mine?!?”
20. “Where is MY section? Why is my content in three different places. Why is another group’s content here with mine?!?” “How will I edit this? Who owns this content???”
21. “Where is MY section? Why is my content in three different places. Why is another group’s content here with mine?!?” “How will I edit this? Who owns this content???” “Why did you do this to us?!?!?”
22. 
 The marketing team was shocked. Their work had been thought through so carefully. Why didn’t people like it? Surely the visual design presentation would go better. The new design was fantastic.
23. And yet, when they presented, more outcries…
24. And yet, when they presented, more outcries… There are too many pictures! We won’t have enough good ones!
25. And yet, when they presented, more outcries… There are too many pictures! We won’t have enough good ones! Why is there so much copy? Who wrote it? 
 Why is it so long? Why is it so out of date?
26. And yet, when they presented, more outcries… There are too many pictures! We won’t have enough good ones! Why is there so much copy? Who wrote it? 
 Why is it so long? Why is it so out of date? This is unacceptable!!
27. Again, they were stunned. It was so beautiful. Highly visual, like everyone wanted. The parallax scrolling was fresh and new. They had used existing copy — which everyone had been happy with.
28. Chapter 3 In which they seek help from above
29. In desperation, they reached out to the CMO, the visionary who had initially requested a web redesign. The CMO loved the site, and was on board with their execution. Until…
30. …the CMO spoke to other leaders in the organization, and heard the complaints, questions, and concerns.
31. Others didn’t feel heard. These weren’t their changes. They weren’t at all sure these were the right changes.
32. The obstacles were overwhelming
33. They could no longer 
 move forward
34. Our heroes had neglected to consider the impact of the changes on their stakeholders
35. The moral is…
36. they who underestimate the impact of change will be sorely disappointed. The moral is…
38. It Was a Tragic Tale
39. “Oh no!! That sounds terrible! Why does it happen!?!”
40. Avoiding Tragic Outcomes in a Website Redesign Project
41. Recognize that organizational change is part of every web redesign
42. Anticipate what will change, 
 both directly and indirectly, 
 as a result of your work
43. Manage the change.
46. Three case studies No.1 Managing Expected Change No.2 Navigating Unexpected Change No.3 Intentionally Driving Organizational Change
47. Redesigning 
 Alumni Reunion Pages Case Study No.1
 Managing Expected Change
48. Reunions page
49. Class reunion page
50. Reunion schedules
51. Reunion schedules
52. Reunion schedules
53. Reunion schedules
54. The problems
55. The problems Visual design was out-of-date
56. The problems Visual design was out-of-date Disorganized and redundant content and navigation
57. The problems Visual design was out-of-date Disorganized and redundant content and navigation Staff were entering the same content multiple times
58. The problems Visual design was out-of-date Disorganized and redundant content and navigation Staff were entering the same content multiple times Alumni were confused by reunion pages
59. The problems Visual design was out-of-date Disorganized and redundant content and navigation Staff were entering the same content multiple times Alumni were confused by reunion pages Mobile website was incomplete and cumbersome
60. The solutions
61. The solutions New visual design and information architecture
62. The solutions New visual design and information architecture Leverage Drupal content management system (CMS) to author once, display multiple times
63. The solutions New visual design and information architecture Leverage Drupal content management system (CMS) to author once, display multiple times Provide a tool for alumni to easily find their class reunion page
64. The solutions New visual design and information architecture Leverage Drupal content management system (CMS) to author once, display multiple times Provide a tool for alumni to easily find their class reunion page Use responsive templates
66. You guessed it.
67. You guessed it. Here be dragons.
68. These are the organizational changes 
 we expected
69. These are the organizational changes 
 we expected Authors would no longer be able to add pages or extend the navigation at will
70. These are the organizational changes 
 we expected Marketing would need to support authors when new pages were needed. Authors would no longer be able to add pages or extend the navigation at will
71. These are the organizational changes 
 we expected Class pages would no longer be unpublished between reunions Marketing would need to support authors when new pages were needed. Authors would no longer be able to add pages or extend the navigation at will
72. These are the organizational changes 
 we expected Content would be needed to maintain reunion pages at all stages of the cycle Marketing would need to support authors when new pages were needed. Class pages would no longer be unpublished between reunions Authors would no longer be able to add pages or extend the navigation at will
73. These are the organizational changes 
 we expected Authoring would be less redundant but would be require using the Drupal CMS Content would be needed to maintain reunion pages at all stages of the cycle Marketing would need to support authors when new pages were needed. Class pages would no longer be unpublished between reunions Authors would no longer be able to add pages or extend the navigation at will
74. These are the organizational changes 
 we expected Content would be needed to maintain reunion pages at all stages of the cycle The publishing tool was complex. Processes would need documentation. Marketing would need to support authors when new pages were needed. Class pages would no longer be unpublished between reunions Authoring would be less redundant but would be require using the Drupal CMS Authors would no longer be able to add pages or extend the navigation at will
75. The Approach Or, how we avoided the Swamps of Despair.
76. x-Framework @sorel @tonibird
77. x-Framework Anxious @sorel @tonibird
78. x-Framework Anxious Contented @sorel @tonibird
79. x-Framework Bored Anxious Contented @sorel @tonibird
80. x-Framework Bored Anxious Contented Happy & Excited @sorel @tonibird
81. After people reach a stable level of comfort, they are more tolerant of change, risk, and uncertainty. @sorel @tonibird
82. Communicate at all levels Cultivated executive sponsorship: CMO and director of alumni relations Partnered with the“do-ers:” director of alumni communications, alumni web manager
83. Use every channel available Large and small presentations Weekly check-ins Drop-ins Blog Email Brown-bag lunches
84. Shrink the change Step-by-step approach Divided our project into increments: Goals, target audience, content, design One presentation, one topic Built anticipation
85. Repeat yourself At every opportunity, we recapped Objectives Roles Responsibilities Process Definition of success Next Steps
86. Frame the project
 in your stakeholders’ language Built excitement and energy about coming improvements: social media integration, and stronger visual impact Described the project using their vocabulary 
 and priorities.
87. Success!
88. Before
89. After
90. After
91. After
92. Before
93. After Before
94. After Before
95. Before Every schedule was edited individually
96. Before Every schedule was edited individually
97. After: Class of 2011, 2006 & 2001 Many pages published at once
98. After: Class of 2011, 2006 & 2001 Many pages published at once
99. After: Class of 2011, 2006 & 2001 Many pages published at once
100. After: Class of 2011, 2006 & 2001 Many pages published at once
101. After: Class of 2011, 2006 & 2001 Many pages published at once
102. The Results
103. Site launched just before spring reunions. Alumni smoothly accessed their reunion pages on desktop and mobile.
104. Site authors were able to update easily in real time. And now spend less time updating content.
105. Help requests from alumni are way down.
106. Alumni now have a persistent page for their reunion information. Wherever they are in the cycle.
107. One year later, the site continues to be up-to-date, and has remained organized and easily navigable.
108. A shift occurred: 
 Marketing is seen as a 
 trusted and strategic partner.
109. Case Study No.2
 Navigating Unexpected Change Redesigning 
 Faculty Profiles
110. Faculty listing page
111. Faculty profile
112. The problems
113. The problems Visual design was out-of-date
114. The problems Visual design was out-of-date Profiles were difficult to scan
115. The problems Visual design was out-of-date Profiles were difficult to scan Content, such as journal articles, was not shared across the site
116. The problems Visual design was out-of-date Profiles were difficult to scan Content, such as journal articles, was not shared across the site Publication management system out-dated and difficult to use
117. The problems Visual design was out-of-date Profiles were difficult to scan Content, such as journal articles, was not shared across the site Publication management system out-dated and difficult to use Faculty were building profiles off-site with no benefit to institution
118. The solutions
119. The solutions Fresh new look: Bigger text, images
120. The solutions Fresh new look: Bigger text, images Improved page presentation for high scan-ability
121. The solutions Fresh new look: Bigger text, images Improved page presentation for high scan-ability Profiles would stay up-to-date as publications, books, courses, etc., were added to Drupal
122. The solutions Fresh new look: Bigger text, images Improved page presentation for high scan-ability Profiles would stay up-to-date as publications, books, courses, etc., were added to Drupal Given the complexity of the profiles in this new system, faculty assistants would be trained as authors
123. Yup, here be dragons.
124. Changing the profiles 
 would need to address several factors
125. Changing the profiles 
 would need to address several factors Faculty care deeply about how they are presented to the academic world
126. Changing the profiles 
 would need to address several factors We presented designs early and often; sought extensive input from faculty administration Faculty care deeply about how they are presented to the academic world
127. Changing the profiles 
 would need to address several factors Faculty vary widely. One size does not fit all
 We presented designs early and often; sought extensive input from faculty administration Faculty care deeply about how they are presented to the academic world
128. Faculty vary widely. One size does not fit all
 Changing the profiles 
 would need to address several factors We analyzed the content of profiles and planned for many variations We presented designs early and often; sought extensive input from faculty administration Faculty care deeply about how they are presented to the academic world
129. Faculty vary widely. One size does not fit all
 Changing the profiles 
 would need to address several factors Faculty are busy and are supported by faculty assistants We analyzed the content of profiles and planned for many variations We presented designs early and often; sought extensive input from faculty administration Faculty care deeply about how they are presented to the academic world
130. Faculty vary widely. One size does not fit all
 Faculty are busy and are supported by faculty assistants Changing the profiles 
 would need to address several factors We analyzed the content of profiles and planned for many variations We designed a system that would be easy for assistants to manage We presented designs early and often; sought extensive input from faculty administration Faculty care deeply about how they are presented to the academic world
131. We slew those dragons handily
132. And then, a new dragon appeared
133. And then, a new dragon appeared
134. The dean insisted that faculty be able to edit profiles themselves at launch. Relying on faculty assistants to edit would not work.
135. This had serious implications
136. This had serious implications Profiles are part of a system. Authors must also add publications, working papers, case studies, books, and more.
137. This had serious implications Profiles are part of a system. Authors must also add publications, working papers, case studies, books, and more. Faculty would not be expected to go through training. Site must be self-explanatory.
138. This had serious implications Profiles are part of a system. Authors must also add publications, working papers, case studies, books, and more. Faculty would not be expected to go through training. Site must be self-explanatory. An increase in the number of authors meant increased risk of inconsistency.
139. There were tears.
140. Then we made a plan.
141. The Approach Or, how we avoided the Swamps of Despair.
142. The IKEA Effect
143. People place a disproportionately high value on products they helped create. The IKEA Effect
144. Identify influencers Faculty trust their peers and key members of the academic administration team Certain faculty would vocally dissent — we could learn from those opinions
145. Engage influencers directly We partnered with academic administration early Vocal and influential faculty participated in usability testing of our authoring prototype
146. Individualize your approach to address individual needs
147. Track the big picture
148. Communicate individual details
149. It worked.
150. Before
151. After
152. Before
153. Before After
154. Before After
155. The Results
156. In the first two weeks, 
 125 faculty updated profiles and
 1000+ publications were added
157. Today, help requests 
 are way down
158. Faculty and their assistants easily 
 update profiles without compromising site consistency
159. Many faculty changed their attitude towards the website profiles
160. We shifted the perception of Marketing. We are seen as a trusted partner by the faculty and by their support teams.
161. Rethinking News Case Study No.3
 Intentionally Driving Organizational Change
162. News landing page
163. News landing page Editorial
164. News landing page School news Editorial
165. Editorial/
 Research article
166. Editorial/
 Research article Press release/ Announcement
167. The problems
168. The problems Visual design was out-of-date
169. The problems Visual design was out-of-date Navigation did not invite further exploration
170. The problems Visual design was out-of-date Navigation did not invite further exploration Articles appeared nowhere else on site
171. The problems Visual design was out-of-date Navigation did not invite further exploration Articles appeared nowhere else on site Users were unable to distinguish between editorial content and news about the school
172. The solutions
173. The solutions Fresh new look
174. The solutions Fresh new look Leverage CMS to dynamically provide related articles, and to showcase articles across the site
175. The solutions Fresh new look Leverage CMS to dynamically provide related articles, and to showcase articles across the site Encourage site exploration from stories
176. The solutions Fresh new look Leverage CMS to dynamically provide related articles, and to showcase articles across the site Encourage site exploration from stories Use navigation, functionality, and design to distinguish between editorial and news stories
177. Yup, here be dragons.
178. The Approach
179. It wasn’t just readers who were confused. Internal stakeholders were unclear about the distinctions.
180. We would have to actively change the way stakeholders thought about articles
181. Existing stories were on a spectrum
182. Existing stories were on a spectrum Mostly about
 the research
183. Existing stories were on a spectrum Mostly about
 the school Mostly about
 the research
184. The new approach would be 
 audience-centric, designed for specific needs
185. Editorial The new approach would be 
 audience-centric, designed for specific needs Audience is interested in learning and exploring ideas
186. School news Editorial The new approach would be 
 audience-centric, designed for specific needs Audience is interested in learning and exploring ideas Audiences want information about the school
187. School news Editorial They could no longer be interchangeable Audience is interested in learning and exploring ideas Audiences want information about the school
188. Use navigation, functionality, and design to distinguish types of content School news Editorial
189. Use navigation, functionality, and design to distinguish types of content Story encourages exploration: 
 Has related topics and 
 editor’s picks School news Editorial
190. Use navigation, functionality, and design to distinguish types of content Story encourages exploration: 
 Has related topics and 
 editor’s picks Story encourages follow-up: 
 Has links to programs, media toolkit, other school information School news Editorial
191. Use navigation, functionality, and design to distinguish types of content School news Editorial
192. Use navigation, functionality, and design to distinguish types of content Context would be editorial: Navigation includes other 
 business topics School news Editorial
193. Use navigation, functionality, and design to distinguish types of content Context would be editorial: Navigation includes other 
 business topics Context would be school- related: Navigation includes information about the school School news Editorial
194. Use navigation, functionality, and design to distinguish types of content School news Editorial
195. Use navigation, functionality, and design to distinguish types of content Tone is journalistic. Appropriate for syndication in other business media. School news Editorial
196. Use navigation, functionality, and design to distinguish types of content Tone is journalistic. Appropriate for syndication in other business media. Tone is approachable and informative. Invites audiences to explore further. School news Editorial
197. Use navigation, functionality, and design to distinguish types of content School news Editorial
198. Use navigation, functionality, and design to distinguish types of content Simple link for general media inquiries School news Editorial
199. Use navigation, functionality, and design to distinguish types of content Simple link for general media inquiries Contact info for a specific
 media relations team member School news Editorial
200. There was resistance to this new approach, particularly from media relations.
201. There was resistance to this new approach, particularly from media relations. We needed to understand why.
203. Keep asking “why?” to get to the root of the problem
205. Why did the media relations team want editorial articles to stay the same?
206. Why did the media relations team want editorial articles to stay the same? They didn’t want to lose the media contact name from the articles.
208. Why did the media relations team feel it was important to keep the media contact name on articles?
209. Why did the media relations team feel it was important to keep the media contact name on articles? It was the only way they could connect the press with the media relations team.
211. Why was it important to use the articles to connect the press to the media team?
212. Why was it important to use the articles to connect the press to the media team? They sent the articles out on BusinessWire as press releases.
214. Why were they sending them out on BusinessWire as press releases?
215. Why were they sending them out on BusinessWire as press releases? They needed to reach journalists, and it was the only distribution channel they had access to.
217. Why did they need to distribute the research to reach journalists?
218. Why did they need to distribute the research to reach journalists? There was no place on the site for the press to find information specifically for them.
219. Think beyond 
 the scope of your project
220. Think beyond 
 the scope of your project They needed a dissemination channel for research
221. Think beyond 
 the scope of your project Social media and email could be the primary dissemination channel They needed a dissemination channel for research
222. Think beyond 
 the scope of your project Social media and email could be the primary dissemination channel They needed a place on the site for the press to contact them directly They needed a dissemination channel for research
223. Think beyond 
 the scope of your project Social media and email could be the primary dissemination channel Adding a Newsroom to the site would help media find the information and contacts they wanted They needed a dissemination channel for research They needed a place on the site for the press to contact them directly
224. Eventually, we achieved alignment. We were ready to move forward with the new content structure.
225. Keep stakeholders engaged to avoid backsliding
226. Achievement Unlocked: Site Launch
227. Before: News landing page
228. Before: News landing page School news
229. After: School news
230. After: School news
231. Before School news story
232. Before After School news story
233. Before After School news story
234. Before: News landing page Editorial
235. Before: News landing page Editorial
236. After: Insights
237. After: Insights
238. Before Insights story
239. Before After Insights story
240. Before After Insights story
241. After: Newsroom
242. The Results
243. The team has clarity about press releases versus editorial content
244. Processes established at launch continue today
245. Editorial team now includes an art director
246. Social media proves to be effective at disseminating knowledge
247. Social media proves to be effective at disseminating knowledge
248. Site metrics show longer and deeper visits to the site
249. Stanford Business Insights 
 was nominated for a Webby award
250. “Ok, how do I do this?”
251. It’s simple. 

252. It’s simple. 
 Tame the dragons.
253. It’s simple. 
 Tame the dragons stakeholders.
254. The 50:50 Rule
255. The 50:50 Rule 50% 
 of your time: 
 project tasks
256. The 50:50 Rule 50% 
 of your time: 
 project tasks 50% 
 of your time: 
 stakeholders
257. How to tame the dragons?
258. How to tame the dragons? Plan for and manage change.
259. Your stakeholders will be anxious about change.
260. Bring them to excitement.
261. Bringing stakeholders to excitement
262. Bringing stakeholders to excitement Communicate at all organizational levels
263. Bringing stakeholders to excitement Communicate at all organizational levels Use every channel
264. Bringing stakeholders to excitement Communicate at all organizational levels Use every channel Shrink the project
265. Bringing stakeholders to excitement Communicate at all organizational levels Use every channel Shrink the project Repeat yourself
266. Bringing stakeholders to excitement Communicate at all organizational levels Use every channel Shrink the project Repeat yourself Frame the project in your 
 stakeholders’ language
267. Invite stakeholders into the process
268. Inviting stakeholders into the process
269. Inviting stakeholders into the process Identify influencers and engage them directly
270. Inviting stakeholders into the process Identify influencers and engage them directly Individualize your approach to address individual needs
271. Inviting stakeholders into the process Identify influencers and engage them directly Individualize your approach to address individual needs Track the big picture and communicate the details
272. Address the root problems
273. Addressing the root problems
274. Addressing the root problems Ask “why?” And then ask “why?” again
275. Addressing the root problems Ask “why?” And then ask “why?” again Think beyond the scope of your project
276. Follow through. Keep your stakeholders focused and engaged. Lather, rinse, repeat.
277. 5 major launches later
278. 5 major launches later
279. 5 major launches later
280. 5 major launches later
281. 5 major launches later
282. 5 major launches later
283. 5 major launches later
284. 5 major launches later
285. 5 major launches later
286. 5 major launches later
287. 5 major launches later
288. 5 major launches later
289. 5 major launches later
290. 5 major launches later
291. 5 major launches later New roles & responsibilities across the school
292. 5 major launches later New roles & responsibilities across the school Fewer web authors overall; marketing can easily support most departments
293. 5 major launches later New roles & responsibilities across the school Fewer web authors overall; marketing can easily support most departments Site remains consistent, easily navigated, highly usable, content-rich
294. 5 major launches later New roles & responsibilities across the school Fewer web authors overall; marketing can easily support most departments Site remains consistent, easily navigated, highly usable, content-rich Marketing is seen as an effective and valuable partner across the organization
295. – from The Little Prince by Antoine de Saint-Exupéry “If you tame me we’ll need each other.”
296. Thank you. Toni Bird
 @tonibird tonibird@stanford.edu Sorel Denholtz
 @sorel soreld@stanford.edu