how a web redesign drives organizational change: a cautionary tale

How a Web Redesign Drives Organizational Change

presented by

Toni Bird — @tonibird Sorel Denholtz — @sorel

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

Once upon a time…

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!

The path looked clear ahead.

Chapter 1

In which they define their approach

2. Make the site audience-centricOrganize information for audiences, rather than by departments

1. Improve look & feelNew design with compelling visual elements. Use existing copy to streamline the effort.

Our heroes worked hard…

A new information architecture!

Beautiful layouts!

Responsive designs!

Unknown to them, the journey was fraught with danger

Chapter 2

In which they share their work with others

Internal presentations were arranged.


Approval was anticipated.


Approval was anticipated.

Soon, their vision would be reality.

They presented the smartly reorganized sitemap.

There were outcries!

They presented the smartly reorganized sitemap.

“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???”


“How will I edit this? Who owns this content???”

“Why did you do this to us?!?!?”

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.

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?



Why is there so much copy? Who wrote it? Why is it so long? Why is it so out of date?

This is unacceptable!!

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.

Chapter 3

In which they seek help from above

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…

…the CMO spoke to other leaders in the organization, and heard the complaints, questions, and concerns.

Others didn’t feel heard.

These weren’t their changes.

They weren’t at all sure these were the right changes.

The obstacles were overwhelming

They could no longer move forward

Our heroes had neglected to consider the impact of the changes on their

stakeholders

The moral is…

they who underestimate the impact of change will be

sorely disappointed.

The moral is…

It Was a Tragic Tale

“Oh no!! That sounds terrible! Why does it happen!?!”

Avoiding Tragic Outcomes in a Website Redesign Project

Recognize that organizational change is part of every web redesign

Anticipate what will change, both directly and indirectly,

as a result of your work

Manage the change.

Three case studies

No.1 Managing Expected Change

No.2 Navigating Unexpected Change

No.3 Intentionally Driving Organizational Change

Redesigning Alumni Reunion Pages

Case Study No.1Managing Expected Change

Reunions page

Class reunion page

Reunion schedules

The problems

The problems

Visual design was out-of-date

The problems


Disorganized and redundant content and navigation

The problems



Staff were entering the same content multiple times

The problems




Alumni were confused by reunion pages

The problems




Alumni were confused by reunion pages

Mobile website was incomplete and cumbersome

The solutions

The solutions

New visual design and information architecture

The solutions


Leverage Drupal content management system (CMS) to author once, display multiple times

The solutions



Provide a tool for alumni to easily find their class reunion page

The solutions



Provide a tool for alumni to easily find their class reunion page

Use responsive templates

You guessed it.

You guessed it. Here be dragons.

These are the organizational changes we expected


Authors would no longer be able to add pages or extend the navigation at will


Marketing would need to support authors when new pages were needed.



Class pages would no longer be unpublished between reunions




Content would be needed to maintain reunion pages at all stages of the cycle





Authoring would be less redundant but would be require using the Drupal CMS







The publishing tool was complex. Processes would need documentation.



Authoring would be less redundant but would be require using the Drupal CMS


The Approach

Or, how we avoided the Swamps of Despair.

x-Framework

@sorel @tonibird

x-Framework

Anxious

@sorel @tonibird

x-Framework

Anxious

Contented

@sorel @tonibird

x-Framework

Bored Anxious

Contented

@sorel @tonibird

x-Framework

Bored Anxious

Contented Happy & Excited

@sorel @tonibird

After people reach a stable level of comfort, they are more tolerant of change, risk, and uncertainty.

@sorel @tonibird

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

Use every channel available

Large and small presentations

Weekly check-ins

Drop-ins

Blog

Email

Brown-bag lunches

Shrink the change

Step-by-step approach

Divided our project into increments: Goals, target audience, content, design

One presentation, one topic

Built anticipation

Repeat yourself

At every opportunity, we recapped

Objectives

Roles

Responsibilities

Process

Definition of success

Next Steps

Frame the projectin 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.

Success!

Before

AfterBefore

Before

Every schedule was edited individually

After: Class of 2011, 2006 & 2001

Many pages published at once

The Results

Site launched just before spring reunions.

Alumni smoothly accessed their reunion pages on desktop and mobile.

Site authors were able to update easily in real time.

And now spend less time updating content.

Help requests from alumni are way down.

Alumni now have a persistent page for their reunion information. Wherever

they are in the cycle.

One year later, the site continues to be up-to-date, and has remained organized

and easily navigable.

A shift occurred: Marketing is seen as a

trusted and strategic partner.

Case Study No.2Navigating Unexpected Change

Redesigning Faculty Profiles

Faculty listing page

Faculty profile

The problems

The problems


Profiles were difficult to scan

The problems



Content, such as journal articles, was not shared across the site

The problems




Publication management system out-dated and difficult to use

The problems




Publication management system out-dated and difficult to use

Faculty were building profiles off-site with no benefit to institution

The solutions

The solutions

Fresh new look: Bigger text, images

The solutions


Improved page presentation for high scan-ability

The solutions



Profiles would stay up-to-date as publications, books, courses, etc., were added to Drupal

The solutions



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

Yup, here be dragons.

Changing the profiles would need to address several factors


Faculty care deeply about how they are presented to the academic world


We presented designs early and often; sought extensive input from faculty administration



Faculty vary widely. One size does not fit all





We analyzed the content of profiles and planned for many variations





Faculty are busy and are supported by faculty assistants





Faculty are busy and are supported by faculty assistants



We designed a system that would be easy for assistants to manage



We slew those dragons handily

And then, a new dragon appeared

The dean insisted that faculty be able to edit profiles themselves

at launch.

Relying on faculty assistants to edit would not work.

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.



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.

There were tears.

Then we made a plan.

The Approach

Or, how we avoided the Swamps of Despair.

The IKEA Effect

People place a disproportionately high value on products they helped create.

The IKEA Effect

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

Engage influencers directly

We partnered with academic administration early

Vocal and influential faculty participated in usability testing of our authoring prototype

Individualize your approach to address individual needs

Track the big picture

Communicate individual details

It worked.

Before

Before After

The Results

In the first two weeks, 125 faculty updated profiles and 1000+ publications were added

Today, help requests are way down

Faculty and their assistants easily update profiles without compromising

site consistency

Many faculty changed their attitude towards the website profiles

We shifted the perception of Marketing. We are seen as a trusted partner by the faculty and

by their support teams.

Rethinking News

Case Study No.3Intentionally Driving Organizational Change

News landing page

News landing page

Editorial

News landing page

School news

Editorial

Editorial/ Research article

Editorial/ Research article

Press release/Announcement

The problems

The problems


Navigation did not invite further exploration

The problems



Articles appeared nowhere else on site

The problems



Articles appeared nowhere else on site

Users were unable to distinguish between editorial content and news about the school

The solutions

The solutions

Fresh new look

The solutions

Fresh new look

Leverage CMS to dynamically provide related articles, and to showcase articles across the site

The solutions

Fresh new look


Encourage site exploration from stories

The solutions

Fresh new look


Encourage site exploration from stories

Use navigation, functionality, and design to distinguish between editorial and news stories

Yup, here be dragons.

The Approach

It wasn’t just readers who were confused.

Internal stakeholders were unclear about the distinctions.

We would have to actively change the way stakeholders thought about articles

Existing stories were on a spectrum


Mostly about the research


Mostly about the school

Mostly about the research

The new approach would be audience-centric, designed for specific needs

Editorial


Audience is interested in learning and exploring ideas

School newsEditorial



Audiences want information

about the school


They could no longer be interchangeable


Audiences want information

about the school

Use navigation, functionality, and design to distinguish types of content



Story encourages exploration: Has related topics and editor’s picks



Story encourages exploration: Has related topics and editor’s picks

Story encourages follow-up: Has links to programs, media

toolkit, other school information



Context would be editorial: Navigation includes other business topics



Context would be editorial: Navigation includes other business topics

Context would be school-related: Navigation includes information about the school



Tone is journalistic. Appropriate for syndication in other business media.



Tone is journalistic. Appropriate for syndication in other business media.

Tone is approachable and informative. Invites audiences

to explore further.



Simple link for general media inquiries



Simple link for general media inquiries

Contact info for a specific media relations team member


There was resistance to this new approach, particularly from media relations.

There was resistance to this new approach, particularly from media relations.

We needed to understand why.

Keep asking “why?” to get to the root of the problem

Why did the media relations team want editorial articles to stay the same?

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.

Why did the media relations team feel it was important to keep the media contact name on articles?

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.

Why was it important to use the articles to connect the press to the media team?

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.

Why were they sending them out on BusinessWire as press releases?

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.

Why did they need to distribute the research to reach journalists?

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.

Think beyond the scope of your project


They needed a dissemination channel for research


Social media and email could be the primary dissemination channel




They needed a place on the site for the press to contact them directly




Adding a Newsroom to the site would help media find the information and contacts they wanted


They needed a place on the site for the press to contact them directly

Eventually, we achieved alignment. We were ready to move forward with the new content structure.

Keep stakeholders engaged to avoid backsliding

Achievement Unlocked: Site Launch

Before: News landing page


School news

After: School news

Before

School news story

Before After

School news story


Editorial

After: Insights

Before

Insights story

Before After

Insights story

After: Newsroom

The Results

The team has clarity about press releases versus editorial content

Processes established at launch continue today

Editorial team now includes an art director

Social media proves to be effective at disseminating knowledge

Site metrics show longer and deeper visits to the site

Stanford Business Insights was nominated for a Webby award

“Ok, how do I do this?”

It’s simple.

It’s simple. Tame the dragons.

It’s simple. Tame the dragons stakeholders.

The 50:50 Rule

The 50:50 Rule

50% of your time: project tasks

The 50:50 Rule

50% of your time: project tasks

50% of your time:

stakeholders

How to tame the dragons?

How to tame the dragons?Plan for and manage change.

Your stakeholders will be anxious about change.

Bring them to excitement.

Bringing stakeholders to excitement


Communicate at all organizational levels



Use every channel



Use every channel

Shrink the project



Use every channel

Shrink the project

Repeat yourself



Use every channel

Shrink the project

Repeat yourself

Frame the project in your stakeholders’ language

Invite stakeholders into the process

Inviting stakeholders into the process


Identify influencers and engage them directly




Track the big picture and communicate the details

Address the root problems

Addressing the root problems


Ask “why?” And then ask “why?” again

Follow through. Keep your stakeholders focused and engaged.

Lather, rinse, repeat.

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




Site remains consistent, easily navigated, highly usable, content-rich

Marketing is seen as an effective and valuable partner across the organization

– from The Little Prince by Antoine de Saint-Exupéry

“If you tame me we’ll need each other.”

Thank you.

Toni Bird @tonibird

[email protected]

Sorel Denholtz @sorel

[email protected]

how a web redesign drives organizational change: a cautionary tale

Leadership & Management