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. Presented 4.28.16 at University of Illinois WebCon #UofIWebCon

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

94. AfterBefore

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 newsEditorial
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 newsEditorial
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 newsEditorial

189. Use navigation, functionality, and design to
distinguish types of content
Story encourages exploration:
Has related topics and
editor’s picks
School newsEditorial

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 newsEditorial

191. Use navigation, functionality, and design to
distinguish types of content
School newsEditorial

192. Use navigation, functionality, and design to
distinguish types of content
Context would be editorial:
Navigation includes other
business topics
School newsEditorial

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 newsEditorial

194. Use navigation, functionality, and design to
distinguish types of content
School newsEditorial

195. Use navigation, functionality, and design to
distinguish types of content
Tone is journalistic.
Appropriate for syndication in
other business media.
School newsEditorial

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 newsEditorial

197. Use navigation, functionality, and design to
distinguish types of content
School newsEditorial

198. Use navigation, functionality, and design to
distinguish types of content
Simple link for general media
inquiries
School newsEditorial

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 newsEditorial

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