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.

Internal presentations were arranged.

Approval was anticipated.

Internal presentations were arranged.

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

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

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

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…

And yet, when they presented, more outcries…

There are too many pictures! We won’t have enough good ones!

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?

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

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

Reunion schedules

Reunion schedules

Reunion schedules

The problems

The problems

Visual design was out-of-date

The problems

Visual design was out-of-date

Disorganized and redundant content and navigation

The problems

Visual design was out-of-date

Disorganized and redundant content and navigation

Staff were entering the same content multiple times

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

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

The solutions

The solutions

New visual design and information architecture

The solutions

New visual design and information architecture

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

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

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

You guessed it.

You guessed it. Here be dragons.

These are the organizational changes we expected

These are the organizational changes we expected

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

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

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

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

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

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

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

After

After

After

Before

AfterBefore

AfterBefore

Before

Every schedule was edited individually

Before

Every schedule was edited individually

After: Class of 2011, 2006 & 2001

Many pages published at once

After: Class of 2011, 2006 & 2001

Many pages published at once

After: Class of 2011, 2006 & 2001

Many pages published at once

After: Class of 2011, 2006 & 2001

Many pages published at once

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

Visual design was out-of-date

The problems

Visual design was out-of-date

Profiles were difficult to scan

The problems

Visual design was out-of-date

Profiles were difficult to scan

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

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

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

The solutions

The solutions

Fresh new look: Bigger text, images

The solutions

Fresh new look: Bigger text, images

Improved page presentation for high scan-ability

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

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

Yup, here be dragons.

Changing the profiles would need to address several factors

Changing the profiles would need to address several factors

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

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

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

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

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

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

We slew those dragons handily

And then, a new dragon appeared

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

This had serious implications

Profiles are part of a system. Authors must also add publications, working papers, case studies, books, and more.

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.

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.

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

After

Before

Before After

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

Visual design was out-of-date

The problems

Visual design was out-of-date

Navigation did not invite further exploration

The problems

Visual design was out-of-date

Navigation did not invite further exploration

Articles appeared nowhere else on site

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

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

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

Encourage site exploration from stories

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

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

Existing stories were on a spectrum

Mostly about the research

Existing stories were on a spectrum

Mostly about the school

Mostly about the research

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

Editorial

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

Audience is interested in learning and exploring ideas

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

School newsEditorial

They could no longer be interchangeable

Audience is interested in learning and exploring ideas

Audiences want information

about the school

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

School newsEditorial

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

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

School newsEditorial

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

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

School newsEditorial

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

Context would be editorial: Navigation includes other business topics

School newsEditorial

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

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

School newsEditorial

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

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

School newsEditorial

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

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

School newsEditorial

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

Simple link for general media inquiries

School newsEditorial

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

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

Think beyond the scope of your project

They needed a dissemination channel for research

Think beyond the scope of your project

Social media and email could be the primary dissemination channel

They needed a dissemination channel for research

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

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

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

Before: News landing page

School news

After: School news

After: School news

Before

School news story

Before After

School news story

Before After

School news story

Before: News landing page

Editorial

Before: News landing page

Editorial

After: Insights

After: Insights

Before

Insights story

Before After

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

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

Bringing stakeholders to excitement

Communicate at all organizational levels

Bringing stakeholders to excitement

Communicate at all organizational levels

Use every channel

Bringing stakeholders to excitement

Communicate at all organizational levels

Use every channel

Shrink the project

Bringing stakeholders to excitement

Communicate at all organizational levels

Use every channel

Shrink the project

Repeat yourself

Bringing stakeholders to excitement

Communicate at all organizational levels

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

Inviting stakeholders into the process

Identify influencers and engage them directly

Inviting stakeholders into the process

Identify influencers and engage them directly

Individualize your approach to address individual needs

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

Address the root problems

Addressing the root problems

Addressing the root problems

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

Addressing the root problems

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

Think beyond the scope of your project

Follow through. Keep your stakeholders focused and engaged.

Lather, rinse, repeat.

5 major launches later

5 major launches later

5 major launches later

5 major launches later

5 major launches later

5 major launches later

5 major launches later

5 major launches later

5 major launches later

5 major launches later

5 major launches later

5 major launches later

5 major launches later

5 major launches later

5 major launches later

New roles & responsibilities across the school

5 major launches later

New roles & responsibilities across the school

Fewer web authors overall; marketing can easily support most departments

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

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

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

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

Thank you.

Toni Bird @tonibird

tonibird@stanford.edu

Sorel Denholtz @sorel

soreld@stanford.edu