redesigning bnl.gov

97
Redesigning BNL.GOV A Journey in Five Acts @gary_schroeder (or How We Blew Up the Death Star)

Upload: gary-schroeder

Post on 08-May-2015

803 views

Category:

Technology


0 download

DESCRIPTION

Presented at InterLab 2013, a workshop aimed at web designers, web application developers, online communications professionals, and managers of internet resources throughout the United States Department of Energy laboratory complex.

TRANSCRIPT

Page 1: Redesigning BNL.gov

Redesigning

BNL.GOV

A Journey in Five Acts

@gary_schroeder

(or How We Blew Up the Death Star)

Page 2: Redesigning BNL.gov

Hi. I’m Gary Schroeder @gary_schroeder

Page 3: Redesigning BNL.gov

Redesigning a website is a big, hairy deal that involves extreme challenges, risks, adventures

and intense battles

Page 4: Redesigning BNL.gov

Obviously, it’s just like

Page 5: Redesigning BNL.gov
Page 6: Redesigning BNL.gov

Call to Adventure Our web team was trapped on Tatooine, stuck on a moisture farm with no hope of ever getting into the Academy, a complete life of unfulfilled boredom

UNLESS…

Page 7: Redesigning BNL.gov

OMG, we’re going on a

REDESIGN ADVENTURE

Page 8: Redesigning BNL.gov
Page 9: Redesigning BNL.gov
Page 10: Redesigning BNL.gov

So, what was wrong with BNL.GOV?

Page 11: Redesigning BNL.gov

EVERYTHING

Page 12: Redesigning BNL.gov

BORING Long passages of text that no one would ever read

www.shorpy.com/node/15673

Page 13: Redesigning BNL.gov

OUTDATED Last major update was NINE YEARS ago

Page 14: Redesigning BNL.gov

MISSION? Can anybody tell if we even have a

‘Some kinda scienc-ey stuff?’

Page 15: Redesigning BNL.gov

ORG CHART Death by

No one gives a rip about internal fiefdoms

Page 16: Redesigning BNL.gov

AMATEURS We looked like

(Amateurs have no credibility)

Page 17: Redesigning BNL.gov

APATHY

Page 18: Redesigning BNL.gov

Redesigning a website is a big, hairy deal that involves extreme challenges, risks, adventures

and intense battles

Page 19: Redesigning BNL.gov

CONTENT STRATEGY Since we don’t have one, let’s start with a

Page 20: Redesigning BNL.gov

Content strategy plans for the

creation, publication, and governance

of useful, usable content.

Kristina Halvorson

www.flickr.com/photos/45923218@N00/4835160197

Page 21: Redesigning BNL.gov

Publishing Criteria Why are you publishing this?

Info Architecture Is it logically arranged, findable?

Content Strategy

Messages What do you want them to know?

ID Audiences Who are you trying to reach? (And why?)

Work Flow Routine process for scheduling, producing, publishing

Measure success (or lack of it)

Metrics

Page 22: Redesigning BNL.gov

The content strategist defines not only which content will be published, but why it’s being published in the first place. Without a strategy, we’re just running a production line for content that nobody needs or wants.

www.shorpy.com/node/15585

Page 23: Redesigning BNL.gov
Page 24: Redesigning BNL.gov

A Mentor Journey begins following contact with sages or wizards who give guidance

Page 25: Redesigning BNL.gov
Page 26: Redesigning BNL.gov

Between regular baseline work and a relentless stream of unscheduled work requests, our available resources are fully subscribed. We have insufficient reserve capacity to sustain a project that requires the long-term focus that a full content overhaul requires.

(Actual quote!)

Page 27: Redesigning BNL.gov

Erin Kissane Author of ‘The Elements of Content Strategy’

www.flickr.com/photos/webstock06/6885493653/

Page 28: Redesigning BNL.gov

CORE TEAM

Page 29: Redesigning BNL.gov

CS DELIVERABLES

Accessibility Guides Publishing Workflow

Benchmarks Qualitative Content Audit

Channel Strategies Quantitative Content Audit

Competitive Analyses Resource Review

Content Style Guide SEO Review

Content Templates Success Metrics

Editorial Calendars User Persona

Example Content User Research Plans

Feature Descriptions User Scenarios

Gap Analyses Workflow Recommendations

Page 30: Redesigning BNL.gov

COMPETITIVE ANALYSIS

Page 31: Redesigning BNL.gov
Page 32: Redesigning BNL.gov

AUDIT Oh boy! It’s time for a content

Page 33: Redesigning BNL.gov

TOTAL DRAG

Page 34: Redesigning BNL.gov

STAKEHOLDER INTERVIEWS

Page 35: Redesigning BNL.gov

Our home page is a blizzard.

There’s too much information

right away.

www.flickr.com/photos/smithsonian/2551851700

Page 36: Redesigning BNL.gov

Our website should facilitate a two-way conversation with industry.

www.flickr.com/photos/anmm_thecommons/8533281990

Page 37: Redesigning BNL.gov

Our site lacks a compelling vision. What’s our version of ‘we helped put a man on the moon’?

www.flickr.com/photos/bergen_public_library/5427117205

Page 38: Redesigning BNL.gov

Potential recruits are our most important audience.

http://www.flickr.com/photos/smithsonian/2552861639

Page 39: Redesigning BNL.gov

The website needs to work better for elected officials, high-level industry reps and community

members.

www.flickr.com/photos/floridamemory/9031464131

Page 40: Redesigning BNL.gov

Audiences Dept. of Energy Current employees

Elected officials (staffers) Students

Community members Journalists/Media

Science-interested public Facility Users

Potential employees Potential facility users

Page 41: Redesigning BNL.gov
Page 42: Redesigning BNL.gov

Top Tasks Find contact information Learn how to apply for a job

Evaluate programs or facilities Find relevant research news

Understand what BNL does Learn how to become a facility user

See available jobs See what BNL offers industry

Page 43: Redesigning BNL.gov

Recommended Site Structure

Page 44: Redesigning BNL.gov
Page 45: Redesigning BNL.gov
Page 46: Redesigning BNL.gov

Content Templates

0. Home Page 1.0 Landing Page 1.1 Sub Page

Page 47: Redesigning BNL.gov

Template 1.0: ‘Our Science’ Landing Page

Intro to BNL’s work Brookhaven’s scientific breakthroughs ensure a successful energy future for our nation. We research: 1. nuclear and particle physics, to understand more about matter, energy, space, and time; 2. photon sciences and nanomaterials, to research new kinds of energy production; and 3. the relationship between climate change, sustainable energy, and the Earth’s ecosystems.

Themes Energy Security: We collaborate with industry and academic partners to reduce the carbon footprint of our economy through efficiency and renewable fuels. Light as a Discovery Tool: Our light sources work as powerful microscopes to help researchers find solutions to the grand energy challenges facing the US. Etc. …

Our Science

Science Powering Industry Short blurb, link to case study, small image.

About BNL Brookhaven carries out critical energy research at the frontier of science and operates world-leading research facilities on behalf of the U.S. Department of Energy.

Page 48: Redesigning BNL.gov

Success Metrics Unique visits Subscriber volume Number of shares

What number indicates ‘success’?

Time on site Is a high number or a low number good? High number might mean they couldn’t find desired content. Low number might mean they didn’t stop to read content.

www.flickr.com/photos/60527064@N00/3538962602

Page 49: Redesigning BNL.gov

What We Had at end of CS consult

• Who we were trying to reach • What we wanted to tell them • What we thought they wanted to do (top tasks) • Suggestions for how to arrange content in a way that

would be easy for them to find it • List of content to dump b/c it had no WHY • Where the content gaps were and what had to be

written to better explain the Lab’s mission, capabilities, national value and achievements

• The attention of management and our own writing staff

Page 50: Redesigning BNL.gov
Page 51: Redesigning BNL.gov

Frustration Far from reaching the goal because there’s a series of obstacles

Page 52: Redesigning BNL.gov

USER INTERFACE Uh oh, we need a new

Page 53: Redesigning BNL.gov
Page 54: Redesigning BNL.gov
Page 55: Redesigning BNL.gov
Page 56: Redesigning BNL.gov
Page 57: Redesigning BNL.gov
Page 58: Redesigning BNL.gov
Page 59: Redesigning BNL.gov

Many of BNL CMS functions write out database records in "slats" format, where each record is returned as a unique <li> where <ul class="slats">.

Page 60: Redesigning BNL.gov

BNL.GOV/COMMON

Page 61: Redesigning BNL.gov

HOME PAGE The Big Bone of Contention, the

www.flickr.com/photos/38611695@N00/2210578063/

Page 62: Redesigning BNL.gov

Home Page Content Priorities

Page 63: Redesigning BNL.gov

START SKETCHING

Page 64: Redesigning BNL.gov
Page 65: Redesigning BNL.gov
Page 66: Redesigning BNL.gov
Page 67: Redesigning BNL.gov

RESPONSIVE Yup, it’s

Page 68: Redesigning BNL.gov

NEW CONTENT Time to write

www.shorpy.com/node/15322

Page 69: Redesigning BNL.gov

CORE TEAM

Page 70: Redesigning BNL.gov

NO PROJECTS WITHOUT

MILESTONES

Page 71: Redesigning BNL.gov
Page 72: Redesigning BNL.gov
Page 73: Redesigning BNL.gov

Template 1.0: ‘Our Science’ Landing Page

Intro to BNL’s work Brookhaven’s scientific breakthroughs ensure a successful energy future for our nation. We research: 1. nuclear and particle physics, to understand more about matter, energy, space, and time; 2. photon sciences and nanomaterials, to research new kinds of energy production; and 3. the relationship between climate change, sustainable energy, and the Earth’s ecosystems.

Themes Energy Security: We collaborate with industry and academic partners to reduce the carbon footprint of our economy through efficiency and renewable fuels. Light as a Discovery Tool: Our light sources work as powerful microscopes to help researchers find solutions to the grand energy challenges facing the US. Etc. …

Our Science

Science Powering Industry Short blurb, link to case study, small image.

About BNL Brookhaven carries out critical energy research at the frontier of science and operates world-leading research facilities on behalf of the U.S. Department of Energy.

Page 74: Redesigning BNL.gov

‘RIGOROUSLY FRIENDLY’

www.flickr.com/photos/x-ray_delta_one/8755526695

Page 75: Redesigning BNL.gov

Document Control

Page 76: Redesigning BNL.gov
Page 77: Redesigning BNL.gov
Page 78: Redesigning BNL.gov
Page 79: Redesigning BNL.gov

The Final Ordeal Culminating in a great battle

Page 80: Redesigning BNL.gov

Communications ALD

Stakeholder Relations

Chief Information Officer

Deputy Director for Ops

Management Council

PRESENTATIONS

Page 81: Redesigning BNL.gov

THE DIRECTOR In which we present to

Page 82: Redesigning BNL.gov
Page 83: Redesigning BNL.gov

I applaud your motivation and expect that the results will be fantastic. However, I was shocked earlier this month when CERN rolled out their new web pages. Perhaps it was the way I used the old web pages, but it is much harder to find the links which were trivially available on the old CERN site.

Page 84: Redesigning BNL.gov
Page 85: Redesigning BNL.gov

Goal Achieved After a thrilling escape from death, the goal is finally won and order is restored

Page 86: Redesigning BNL.gov
Page 87: Redesigning BNL.gov
Page 88: Redesigning BNL.gov
Page 89: Redesigning BNL.gov

PARTY TIME

Page 90: Redesigning BNL.gov

I had friends on that Death Star…

Page 91: Redesigning BNL.gov

PUT THE PHONE BOOK LINK BACK ON THE FRONT PAGE!!!!!

billyhunt.smugmug.com/Projects/Screamotron3000

Page 92: Redesigning BNL.gov

billyhunt.smugmug.com/Projects/Screamotron3000

Where is the phone directory? It used to be right on the home page.

Page 93: Redesigning BNL.gov

billyhunt.smugmug.com/Projects/Screamotron3000

You changed the way to look up phone numbers. The old way was much simpler. If it ain’t broke, don’t fix it.

Page 94: Redesigning BNL.gov

billyhunt.smugmug.com/Projects/Screamotron3000

The menu bar at the top is way too small !

Page 95: Redesigning BNL.gov

billyhunt.smugmug.com/Projects/Screamotron3000

I have large margins of dead space on the left and right sides that I don’t recall seeing before.

Page 96: Redesigning BNL.gov

billyhunt.smugmug.com/Projects/Screamotron3000

I know it’s job security for you folks to revise web pages, but this revision was not only unnecessary, it was in the retrograde direction.

Page 97: Redesigning BNL.gov

NO, THERE IS ANOTHER ‘That redesign was our last one.’