COMPLETE SITE RELAUNCH - Dyndyn.com/wp-content/uploads/2013/05/Dyn.com-Retrospective_ebook.pdf ·...

1 COMPLETE SITE RELAUNCH: A Retrospective On The New Dyn.com+1 888 840 3258 http://dyn.com

150 Dow Street Manchester, NH 03101 USA

COMPLETE SITE RELAUNCH:A Retrospective On The New Dyn.com

Lara Swanson

@LaraSwanson

author



Table Of CONTENTS

✶✶ Marketing

✶✶ Engineering/Operations

✶✶ Client Services Team

MAJOR PLAYERS 4

INTRODUCTION 3

✶✶ DynDNS users didn’t know what Dyn was

✶✶ Content creators had a hard time making edits

✶✶ We needed a big cleanup

Why Did We Do 5-7THIS PROJECT?

What Were THE RISKS? 8

✶✶ Redesign

✶✶ Content clean up

✶✶ Back end/Prep

What Tasks Did We Need To 9-11ACCOMPLISH?

✶✶ Pre-Launch: August 2nd

✶✶ Launch Day: August 3rd

What Did The 12-14LAUNCH LOOK LIKE?

✶✶ Revenue impact

✶✶ Support team impact

✶✶ Engineering excellence

✶✶ Content editing

How Did We 15-16MEASURE SUCCESS?

✶✶ Planning

✶✶ Designing

✶✶ Teamwork

What Did We 17-21LEARN?



August 3rd, 2011

We unified DynDNS.com and Dyn.com, creating one site

that encompassed product pages, company information,

blog posts and support documentation. DynDNS.com was

the site that housed our consumer products and checkout

workflow, while Dyn.com had been the corporate hub.

We launched a massive set of redirect rules and a redesign

as the team huddled in a conference room (dubbed

“the War Room”) with fingers hovering over keyboards

just in case we needed to roll back.

I learned a lot from this launch. It’s the biggest project

I’ve been a part of and I’m proud to have had a part in

leading it to its success.

I can’t believe it’s been a whole year since we launched the new Dyn.com.

INTRODUCTION



✶✶ Designer

✶✶ Marketing Manager

✶✶ Lead Front End Developer (me)

✶✶ Front End Developer

✶✶ Content Manager

Marketing

Engineering/Operations

Client Services Team

✶✶ Support Documentation Content Audit

✶✶ Testing/QA of the New User Experience

✶✶ Sysadmin for Wordpress and SVN Support

✶✶ Sysadmin for Hardware Support

✶✶ Incident Commander for Rollout

✶✶ Engineer to Map the Redirections from the Old Site to the New Site

MAJOR PLAYERS



At conferences, people at our booth or talking to our people

would have no idea that we were behind their DynDNS hostname.

I remember seeing that light bulb go off: “Oh! I’ve used DynDNS

for years!” The lack of connection between DynDNS.com and

Dyn.com didn’t help and we had a big divide between the consumer

userbase and the enterprise userbase. The two different audiences

frankly didn’t know that we offered two distinct types of DNS &

Email Delivery services, meaning consumer users didn’t realize

they could use us at work too.

DynDNS users didn’t know what Dyn was.

I remember seeing that light bulb go off:

“Oh! I’ve used DynDNS for years!”

Why Did We Do THIS PROJECT?



Content creators had a hard time making edits.

Because all of our content on DynDNS.com was hardcoded

in HTML pages, we had to make changes in a release schedule.

Content creators aren’t (and shouldn’t need to be) familiar

with SVN or how to commit changes. Developers had to make

the changes for them. We wanted to make it easier to maintain

content without developer intervention and WordPress was

the obvious solution.

HTML




We needed a big cleanup.

DynDNS.com and Dyn.com both had a lot of legacy code and

content. Our support documentation hadn’t had a refresh in a while

and our design for both sites had a lot of divitis and unsemantic

markup. It was a great opportunity to unify the sites from a design

perspective, but also for alot of behind-the-scenes cleaning.

Dyn redesigns through the years




Five Risks

!

Risk 1We risked the WordPress platform falling over with the stress of all theDynDNS.com traffic.

!

Risk 2 We risked redirects notworking, breaking user experiences and SEO.

! Risk 3We risked a giant revenue dip with the new work-flows, product pages and other content.

Risk 4We risked stress on our client services team as they had to field new questions while they got used to the new design and workflow.

Risk 5We risked the move of two engineers into the marketing team, creating tension and an unsuccessful project.

What Were THE RISKS?

!

!



What Tasks Did We Need To ACCOMPLISH?

2. Code It. We incorporated accessibility standards, clean code that was semantic and easily edited by others and made sure it loaded fast.

Redesign

</>

1. Design It.Our stellar designer createdPSDs for the new WordPress theme. A team made up of myself, a designer, a content author and our manager met routinely to critique and iterate on it.

3. Migrate Content. We had to make sure it was all easily editable using custom fields and templates.

1

4. Look To Ensure Consistency.We ensured plugins and our custom code worked effectively across browsers and that the site met basic accessibility needs.

5. Think AboutThe Future.In Phase 2, we created a responsive design for the site and developed a style guide.

x

W

ERROR404!




Content cleanup

i1. Clean UpSupport Docs.Clean support documentation. Chop unused stuff and update outdated pages.

2.Clean Up Product Pages.Clean product/marketing pages. Revamp our messaging to unify and clarify it. Better align our product spectrum with new designs and language.

3. UpdateMarketingPages.Update all “about us” pages.

4. Identity I.A.Create new navigation and the information architecture of the newunified site. We had to take a step back and explain that we’re not just merging two sites, but rather building a brand new one.

5. Update EmailsAudit transactional emails to referencenew URLs.

6. Outside Clean Up.Clean up product names and URL references on other sites like social media and Wikipedia.

7. Analyze Leftovers.In Phase 2, we assessed 404’s and randomleftover pageviews on DynDNS to clean them up.




2.Map Redirects.Map 1:1 redirects from old DynDNS content to new Dyn.com content.

3. CapacityPlanning.Ensure the new Dyn.com could support the influx of traffic that was about to hit it.

4. Internal Demo.Demo for employees to test drive.(especially client services).

5. Eternal Marketing.Notify customers of the impending launch.

Back end/Prep

x

x1. Version Control.Create a new repository and version controlfor the site.



It’s hilarious to look at the timeline leading up to the launch. A brilliant mix of strategic planning and calming/reassuring went into the whole process and subsequent communication.

August 2nd - Pre-Launch

12:25pm I locked the development environment. No more edits until after the launch.

2:45pm Chip on our Operations team pushed everything to staging so we could poke at it for the rest of the afternoon. He emailed the team to let us know and I replied:

This is so awesome.

11:19pm The content manager sent a great email to the team thanking everyone for being so awesome at working together on this project. The email was titled “Tomorrow will be a great day” and included:

Since high school, I’ve been part of enough teams, launches and projects to know that something always seems to go wrong. Someone forgets, didn’t think of something or in general, shit happens that no one expected. It causes issues, gray hair, hair loss, insomnia, random dance parties, etc.

But that hasn’t happened with this relaunch. In fact, it’s been incredibly painless. I’m surprised by that and in the best way possible. Something always happens but here, the bumps in the road have been easy to work with. It’s amazing.

What Did The LAUNCH LOOK LIKE?



August 3nd - Launch Day

9:30am We (engineers, operations, and I) began gathering in the War Room. Occasionally, an executive stopped by to see how things were going.

10:00am 10% of visitors to DynDNS.com saw the new redirects to Dyn.com. We measured the stability of Dyn.com, errors on the site, etc.

11:05am We rolled out the redirects to all visitors. The redirects weren’t for all of DynDNS.com, but about 85% of all DynDNS.com pageviews. We basically targeted the most-visited pages in the initial rollout.

Around that time, we also started getting one complaint from some DynECT users. Though we made it easy to sign in to DynDNS from the new site, it was harder than before to figure out how to log in to DynECT. We fixed that.

12:00pm I could finally breathe. I found something to eat. I hugged pretty much everyone.

12:28pm I published the announcement and details on dyn.com, which included the now-infamous “Fluffy” video.

1:00pm My manager, Matt Toy got out the Captain Morgan rum. I hugged him too.




August 3nd - Launch Day (cont.)

3:30pm Had a randomly scheduled meeting to talk about the six month plan of the newly developing UI/UX team. This was the perfect way to take my mind off of the launch that morning.

4:54pm I sent out release notes for version 1.0.0 of the new Dyn.com:

DynDNS.com – redirects to Dyn.com for 85%+ of landing page traffic – new skin to create continuity between Dyn.com and DynDNS.com

Dyn.com – new theme, optimized for page speed and positive UX – new content, optimized for the evolving Dyn brand

Account management and the checkout process still live on DynDNS.com. We’ll continue to iterate over the next few releases to continue to improve the user experience and page load time.

7:58pm I got a message from Dyn CEO, Jeremy Hitchcock:

Hey, congrats. Looks real nice.

All in all, it actually was a really uneventful day. That’s what I call a successful launch.




Revenue Impact & Support Team Impact

How Did We MEASURE SUCCESS?(Obviously success is not just an uneventful launch day. We had metrics to meet!)

Revenue Impact

We did not expect a positive revenue trend, but our goal was

to not see a negative trend. We met this goal and then some

as in the following quarter, we ended up seeing a 300% increase

in conversion rate through some additional improvements.

In our documentation, we also listed cross-sell (increasing

the number of users who see upsell/enterprise opportunities

and other product types) as a metric. This was an obvious win.

We wanted to measure impact on Qualified Sales Opportunities(QSO)

or leads from the new site. We wanted to see more leads now that

consumers were noticing they could “take Dyn to work”.

We saw a 30% increase in web-based QSO’s.

Support Team Impact

The goal was to keep the number of calls and support

tickets flat or decrease. They remained flat.



Engineering Excellence & Content Editing

Engineering Excellence

We decreased page load time to less than three seconds.

We incorporated emerging web standards (CSS3, HTML5,

responsive design, accessibility).

We created continuity between the applications’ user experience,

which is ongoing. It’s certainly much more standardized than it

was before, but we still have a long way to go. This is the mission

of the new UX team, born in January, 2012.

Content Editing

This redesign qualified as a success as it immediately put

the power of content editing into our marketing team’s hands.

We’d used a ton of custom fields in WordPress to do crazy

dynamic things on pages like our Email Delivery product

comparison page.

How Did We MEASURE SUCCESS?



The Rollout/Rollback Plan

We learned that it’s good to have a rollout plan

and a rollback plan, as it appeases fears. We didn’t

use our rollback plan but I think it was still really

good to have. People were assigned roles and

understood what the rest of the team was doing.

Everybody knew how we would come together

in the War Room and act as a team. The trust in

each other and self-confidence really created

a calm, balanced environment for the launch

instead of one of trepidation. The people involved

and their personalities really mattered when it came

to whether or not the launch would be successful.

What Did We LEARN?

Planning



The Pre-Plan

I re-learned how important pre-planning, documentation

and thorough communication can be. I personally love

this part of a project and I think that’s why I had so much

fun even though the goal was so lofty. I had everything

planned out from wiki pages outlining content that

needed to be audited and who it was assigned to,

to details of the plugins that we planned to install

and the custom tweaks we’d made to them.

Everybody who was working on the project knew

their role, what was expected of them and by when.

Executives could see the overall plan without the

nitty gritty details. Employees who had nothing to do

with the launch still got to see what was happening

in the demo, so they could get excited and there

were no bad surprises.

What Did We LEARN?

Planning



The Post-Launch

We learned how important it is to plan post-launch

schedules too. There was a disconnect of expectations

between teams as to what we were going to do for the

month after the launch. We had planned for a break,

but others expected lots more releases. Documenting

plans for the following month of work would have

helped mitigate that.

What Did We LEARN?

Planning



DesigningWe learned that iterative design-by-committee can work if you have

the right people in the room. One out of the four people was a designer,

but the rest had a good grasp on our audience and what we needed to

accomplish with the site.

From the designer:

“I learned that a website design revamp, even of a large site,

need not be arduous (we had the homepage nailed in 2 revisions

– sweet!). Keep what works of the old site, enhance what doesn’t

and stay true to brand. Just create something better and understand

that through A/B testing, refinement can come later (a website is

never finished, right?). Oh, and keeping the layout clean and

grid-based helps to accommodate for unforeseen needs of

the layout down the road. (This has proven to be key –

I’m still amazed at how flexible Dyn.com’s design is.)”

From the front-end developer:

“I learned the importance of forging ahead and following through

with the conceptualized design. Unless it’s something big that

should be rethought, it’s not worth deviating too much from

the plan. Small design refactors can always be done later

post-launch.”

What Did We LEARN?



Teamwork

I learned I needed a bigger team. Shortly after the launch, I hired two

stellar front end developers which allowed me to train new folks on

clean code so I could delegate more and focus on strategic planning.

I learned how important it was to celebrate the success with the rest

of the company. Though we were thrilled with the result, a lot of

employees had (or still have) no idea about the amount of work that

went into it. On the surface, it looks like a list of redirects and a

redesign. In actuality, it was hundreds of commits, a content audit,

optimization for accessibility and page load time and rewriting

of the scope about a million times.

From the marketing manager:

“Even with a year of hindsight, it still amazes me how a

group of people that were literally thrown together weeks

earlier were able to come together and successfully

release such a monstrous undertaking. Goes to show you

how much trust and teamwork (talent and planning too)

can mean to a project. And that engineers really can have

a home in a marketing team.”

What Did We LEARN?

auth

or

deta

ils

Lara Swanson is a user experience/user interface expert. Follow her thoughts on coding semantically, nitpicking page load time and the importance of baking for coworkers on Twitter: @LaraSwanson

COMPLETE SITE RELAUNCH: A Retrospective On The New Dyn.com+1 888 840 3258 http://dyn.com


COMPLETE SITE RELAUNCH - Dyndyn.com/wp-content/uploads/2013/05/Dyn.com-Retrospective_ebook.pdf ·...

Documents

Transcript of COMPLETE SITE RELAUNCH - Dyndyn.com/wp-content/uploads/2013/05/Dyn.com-Retrospective_ebook.pdf ·...