Embed Size (px)
Citation preview
HOW LONG DO WEBSITES LAST?and when is it time to redesign
ABOUT ME
➤ Dan Moriarty, @minneapolisdan
➤ Creative Director and Founder of Electric Citizen
➤ Working on Strategic Planning and UX Design
➤ Build first website in 1998
ABOUT ELECTRIC CITIZEN
➤ Minneapolis-based digital agency, @elecitizen or http://www.electriccitizen.com
➤ Strategy, Planning, Design, Development, Support
➤ Specialize in Civic Sector and Drupal
➤ Clients such as UMN, Century College, Viterbo University, City of Bloomington, American Swedish Institute
WHAT WE’LL DISCUSS
➤ What to expect for your website's lifespan
➤ Signs that your site is nearing the end
➤ When to rebuild vs realign
➤ Ways to keep your site alive and kicking
YOUR SITES WON’T SHOULDN’T LAST
FOREVER(as-is)
HOW LONG DO WEBSITES LAST?and when is it time to redesign
1. TECH DOESN’T
LASTall good things must pass
CONSIDER THE SMARTPHONEraise your hand if you own one
keep your hand up if it’s older than 1 year. 2 years. 3? 4? Any older than 2011?
TECH DOESN’T LAST (CONT.)➤ If you do have an older smartphone,
what is your experience using it? Why do people bother upgrading over and over again?
➤ Things get slower
➤ Apps start to crash
➤ You want a smaller phone/bigger phone.
➤ Better features (e.g. camera resolution)
➤ New features (e.g. fingerprint recognition)
➤ You don’t HAVE to upgrade to a new phone. But at some point, you start to get left behind.
EXPECTATIONS SHIFT
➤ Expectations about your technology change
➤ What was an acceptable before is no longer ok. These include:
➤ UI
➤ Performance
➤ Features
➤ Appearance
TECH DOESN’T LAST (CONT.)
➤ What was new 3 years ago can seem dated and slow today. How does that relate to your website?
➤ A website IS technology. But is something more too – content, brand, design, users, devices. This means it’s even easier to fall behind and more work to keep up.
➤ Let’s explore the lifespan of modern website, and how to keep yours from dying, or simply existing like some browser-based zombie.
A website is technology. But
is something more too –
content, brand, design, users, devices, etc.
IS YOUR SITE LIKE A NEW IPHONE? OR AN OLD FLIP PHONE ?
➤ Think of your company’s website like a smartphone. Is it like a brand-new iPhone6 or an old flip phone?
➤ Which best serves the needs of your audience?
➤ What offers the better user experience?
➤ Would you hand your customer a mobile phone from 2011 and tell them to buy something online? To browse the web? To use Skype or Twitter or Facebook? Take a video and post it to YouTube?
➤ Would you work with a 5 year old mobile device and expect the same great user experience as a new phone? But how many do this with their websites?
2. TIMES ARE (ALWAYS)
A’CHANGING“you better start swimmin' or you'll sink like a stone”
Quick Poll: How Old Is Your Site?
First, those who build sites for others. What’s the oldest, unchanged site that you built still running?
Next, for everyone working at an company/organization. When was the last redesign of your site? 1 year? 2? 3-4? 5-6? No idea?
YOU ARE ON THE CLOCK!
➤ From the time your site first launches, you are on the clock
➤ What was new is soon old
➤ Cutting edge features and functionality 3-4 years ago may now seem clunky and hard to use
➤ Expectation change, as a customer of your site AND as an editor of your site
WHAT’S CHANGED FOR WEBSITES THE PAST FEW YEARS?
➤ Responsive Design
➤ Mobile first
➤ End of Flash
➤ Flat design
➤ Full screen images
➤ Background videos and images
➤ Sass and Less
➤ Accessibility
➤ Content written for the web
➤ Usability, trends towards larger type
➤ CMS powered sites
➤ JavaScript Libraries
➤ Search engine algorithms
➤ Social media
➤ Anything else?
1) TECH CHANGES
➤ We’ve looked at changes to site code, site builds. How should you respond?
➤ Can you make changes incrementally? Depends on how far behind you are
➤ Just like repairing a car, at some point you’re spending more on repairs than it would be to get a new one
➤ Switching to Drupal, dynamic CSS, mobile-first approach— all may require a full rebuild
OK, TECH CHANGES. IS THAT ALL? NO!
➤ So far we’re talking mostly development/tech reasons to redesign and rebuild.
➤ But as we said, websites are more than just HTML. What about the UI? design? content? performance? the end users? devices?
➤ There are other changes we need to consider
➤ Tech/code
➤ Design
➤ Content
➤ User
➤ Device
2) DESIGN CHANGES➤ When you think design updates, where
does your mind go?
➤ Look and feel, colors, graphics, video, images. Following the latest trends.
➤ Why follow trends? Because your job as an organization is offer goods or services that your customers or clients feel confident about using.
➤ They need to trust you, and know you are competent. That you care about how you look. That you are professional. And showing up in the equivalent of a pair of parachute pants from 1984 isn’t going work.(usually)
➤ Even if a casual or off-the-wall look and feel is appropriate for your organization, that doesn’t mean it doesn’t need to change.
3) CONTENT CHANGES
➤ Is your content written for mobile users?
➤ Chunking content, keeping it short and to the point.
➤ Can your users find the content they are looking for?
➤ Look at analytics, do user testing, adjust site navigation, search
➤ Is your copy effective?
4) USER CHANGES
➤ Both consumers and editors have expectations changed over time, for what a website should do AND how it should managed
➤ Not requiring knowledge of HTML (WYSIWYG)
➤ Loading and editing images online
➤ Editing website content online
➤ Editing website content on a mobile device
➤ Editing content inline, right on the page, with no page refresh
➤ Personalization of site content
5) DEVICE CHANGES
➤ Monitors come in many different sizes
➤ Mobile devices of different widths mean content needs to work at any size. Media needs to work at any size.
➤ Speed of connections and devices
➤ Location aware devices
➤ Touch sensitive devices
HAVE YOU KEPT UP WITH ALL THESE CHANGES?
Tech • Design • Content • Users • Devices
3. TIME TO REBUILD?
Is it a tear-down or fixer-upper?
YOU NEED TO REBUILD EVERY…
➤ 2 years?
➤ 3 years?
➤ 4 years?
TRENDS IN SITE REBUILDING
➤ Many people are saying you should do this every 2-3 years
➤ http://blog.hubspot.com/marketing/website-redesign-timelines
➤ Some say every 18-24 months. Think of all the changes in past 2 years. Mobile users jumped from 10% to 25% of all Web traffic.
➤ But there is no magic number!
WHEN IS IT TIME?
➤ Don’t redesign just because it’s been a while
➤ When you replace it depends on how we'll you’ve cared for it and what you’re trying to achieve
➤ If your site is no longer serving your audience the best it could, and the path is improvement is long, it’s time to redesign.
➤ Remember user expectations shift, tech changes, design trends change, devices change
EXPECTATIONS SHIFT
➤ What was an acceptable before is no longer ok. These include:
➤ UI
➤ Performance
➤ Features
➤ Appearance
➤ Content
WHEN IS IT TIME?
“Don’t redesign just to do something new, redesign because you have a better answer to the question.”
– Paul Scrivens
WHEN TO REDESIGN?
➤ Obvious problems with site functionality
➤ Not responsive, mobile-first
➤ Site loads slowly
➤ Can’t easily add new functionality
➤ Editors can’t easily manage site content
➤ Traffic is down
➤ Pages are getting cluttered
➤ Compares poorly to your competitors
➤ Rebranding, or your purpose has changed
➤ Bad User Experience
➤ The Tech/UX “Debt” List Is Long* (more on this)
“ Over the course of building a product or website, an organization begins to accrue tech and UX debt.
This debt is made up of all the things you should have done during the initial build but either didn’t get around to or had to cut corners on in order to ship the product on time. Each subsequent iteration inevitably adds more debt to the list.
Your website gets to the point where starting over would be cheaper than fixing all of the items on your debt list
– Jeff Gothelf https://www.smashingmagazine.com/2011/12/clear-indications-time-to-redesign/
TECHNICAL DEBT
PLANNING YOUR REDESIGN
➤ Define the purpose of your site
➤ Study analytics
➤ Website audit - both pages and content
➤ Study comparable
➤ Sitemap
➤ Wireframe
➤ Surveys
➤ User Testing
NY TIMES REDESIGN
➤ Full redesigned site in 2014, with the hope to never do so again (on the same scale)
➤ "We have completely replatformed the whole back-end technology system so that we can get out of the business of doing redesigns" – Denise Warren New York Times
➤ You can learn about it at http://www.nytimes.com/redesign
NY TIMES REDESIGN (CONT.)
➤ Changes included:
➤ New CMS
➤ Cleaner pages, no sidebars or headers
➤ No pagination on articles
➤ Optimized for smartphones and tablets
➤ Options to view larger media
➤ New approach to browsing
➤ Ribbon featuring stories based on how the reader clicked into the story
➤ Related content widget next to story
➤ Arrow to the right of the page is a 3rd option to move from story to story
NY TIMES REDESIGN (CONT.)
➤ They couldn’t have introduced these changes without a full redesign.
➤ The changes they did were to provided a great user experience, taking into account new patterns of UX/UI that didn’t exist before.
➤ related content
➤ no sidebars
➤ full screen media
➤ sliding, offscreen content
➤ collapsed menus
“ At its core, a website is a communication tool. If it’s difficult for users to communicate with your brand digitally, you’re going to lose sales.
– Gabriel Shaoolian
http://www.huffingtonpost.com/gabriel-shaoolian/5-reasons-why-you-should-_12_b_9460374.html
4. HOW ABOUT WE “REALIGN” INSTEAD?
Take the easier road
WHY NOT FULL REBUILD?➤ Completely rebuilding a site is a
disruptive experience
➤ People don’t always like change. They may react negatively. As Jakob Nielsen says, “Users hate change, so it's usually best to stay with a familiar design and evolve it gradually.”
➤ Users don't care about design for its own sake; they just want to get things done and get out.
➤ Other reasons include:
➤ Search engine rank can suffer
➤ Users can’t find what they need
➤ It’s expensive and a lot of f***ing work
BENEFITS OF REALIGNING
➤ You just don’t know what works until you try it.
➤ Iterate on site, adjusting to feedback and analytics, A/B test
➤ You can’t always predict what design, headline, or copy will perform best.
➤ Small simple fixes can (sometimes) accomplish far more than expensive redesigns. Faster to rollout.
➤ amazon.com is an example of iterating. Same basic design, endlessly tweaked over time
TRY FINE TUNING➤ Most website owners don’t know how to
diagnose, much less solve, the problems of a large complex website.
➤ “Without proper diagnostics…any resulting improvements to the user experience will be almost accidental.” – Louis Rosenfeld, Smashing Magazine
➤ You don’t have to solve everything!
➤ Content: A small portion of your website’s content does all the work. The rest has little or no value at all. Focus on the stuff that people actually use and need.
➤ Audiences: one or two matter far more than the others. Focus on those.
➤ Prioritize: focus your efforts on a few key problems
NEW DESIGN FOR NEW USERS APPROACH
➤ Current users are accustomed to the old site design but new users haven’t had the chance to learn it yet.
➤ What if your redesign was only for new users, while keeping the old site up for older users?
➤ 37signals did this with a new Basecamp release. A rewrite from the ground up, it has an entirely new interface. They didn’t force their existing users to switch. They just put the new version out for new customers.
WHEN REDESIGN > REALIGN➤ Jacob Nielsen lists two cases where a full
redesign makes more sense than a realign:
➤ “If you have almost no current users and expect a major design improvement to dramatically expand the user base. In this case, the business loss from punishing your current customers is small enough to be worth taking. Of course, it's still a gamble that you'll actually be able to attract a vastly bigger audience. Remember the old adage: a bird in the hand is better than two in the bush. Unless you're sure that there are millions of users in that bush, you might not want to go there.”
➤ “If your old design has incrementally evolved for so many years that the overall user experience has become overly convoluted and lost any sense of a unified conceptual structure”. (e.g. Microsoft Office 2003)
➤ https://www.nngroup.com/articles/fresh-vs-familiar-aggressive-redesign/
NOT AN EITHER-OR
➤ Despite the clear benefits of a realign strategy, it’s never an either/or, between Redesign and Realign.
➤ Knowing when to redesign or realign often comes down to:
➤ Cost (is it cheaper to simply start over?)
➤ Inability to change or adapt within current codebase
➤ Technical Debt is too large
WEBSITES ARE NEVER “DONE”
At launch time, no one knows for certain what the best approach is.
We carefully estimate and try. We need to iterate– observe, adjust, and try again.
4. HOW TO STAY ALIVE
escape the walking dead
SIGNS YOUR SITE IS DYING
➤ Traffic is down
➤ Audience participation is down
➤ Lack of updates to dynamic content (blog, news, events)
➤ Fails to work on new devices, or adapt to new features
➤ Software is out-of-date, security patches haven’t been applied. CMS is no longer supported
➤ Fails to meet changing expectations
GET BUSY LIVING OR GET BUSY DYING
➤ Websites that aren’t continually updated and maintained are dead or dying
➤ It doesn’t matter if it’s “timeless content” or a “timeless design” — something will change and you need to react to it
➤ This does NOT simply mean a different news story or slider on the homepage. It means carefully planned, carefully executed, regular updates.
YOUR WORK IS NEVER DONE. :(
➤ “Your website should be a living, breathing, changing being. Edit and improve constantly.” – Mike Volpe, Hubspot
➤ Redesigns are not the same as maintenance. Routine updating is something all websites require. You need to plan for both.
LIVING THE GOOD LIFE
➤ Budget time to your site for content updates
➤ Pay attention to users and analytics; pay attention to competitors
➤ Keep up with trends in technology, design,how people consume the web
➤ Keep your code up to date
➤ Continuous Improvement
➤ User testing, feedback
BUDGET FOR NOW AND FUTURE
➤ Budget time/money for continuous improvement to your website
➤ Budget for analytics (traffic, site speed, site security, content effectiveness)
➤ Budget for periodic redesigns. Preferably to specific areas of your site rather than a whole ‘scrap and rebuild.’ But sometimes that’s the only way.
CONCLUSION
➤ Expectations are constantly shifting
➤ Your website will need continuous attention. Budget for it and plan to continuously test, improve and update.
➤ Realign early and often
➤ Keep track of what’s working and what’s not through periodic checkups. Just like going to the doctor or getting your oil changed.
➤ Decide if a full rebuild would be more effective than realignment. Is this car worth repairing or should you just get a new one?
➤ Keep your site alive and plan to eventually replace it. When you replace it depends on how we'll you’ve cared for it and what you’re trying to achieve.
Questions?
Dan Moriarty, @minneapolisdan
REFERENCED
➤ https://www.smashingmagazine.com/2011/12/clear-indications-time-to-redesign/
➤ http://uxmyths.com/post/712537920/myth-you-need-to-redesign-your-website-periodically
➤ https://blog.kissmetrics.com/dont-do-a-redesign/
➤ https://articles.uie.com/radical_redesign/
➤ https://www.nngroup.com/articles/fresh-vs-familiar-aggressive-redesign/
