website redesign: top 10 dos and don'ts
TRANSCRIPT
Don’t
Do
Website Redesign: Top 10 Dos and Don’ts
• Who is this presenta-on for? – Website 201 “students”
– Looking to modernize that site from 2005? – “upgrading” your web development partner
• Not really “Dos & Don’ts”… and not really 10
• Par-cipa-on is required
4
Ryan P. Tuttle
• VP of Collinson Digital
• Interactive marketing guy since ’97
• Worked for a handful of agencies
• Spent a few years on the client side marketing TV
• Ran digital agency, and did lots of digital marketing stuff for brands like these
• Who is in marke-ng? Stakeholder?
• Who wants to be?
• How old is your current site?
• What do you like about your current site?
• What don’t you like?
Site Evolu:on
2000 2001
2006
Current
Why Redesign?
“Winner” 2006 Don’t
Reasons to Redesign • Out-‐of-‐Date • The Compe--on • Brand or Aspira-on change • You want more control • Site is broken – Bad informa-on – Difficult to use/navigate – Actually broken – Missing key informa-on
• Get aZen-on, get press
Is your style out of date?
• Are you s-ll rocking the 70’s look?
• Is your site op-mized for modern monitors?
• Appropriate graphics and graphical treatment
Current Resolu-on Stats
Staying ahead of the compe--on?
• Watch what your direct compe-tors are doing
• Compe--on is any other site your users may visit instead of your site
Brand Change
Content Management System (or so_ware)
Once logged in, ‘edit’ tab appears on page and takes you to the editor controls
A full WYSIWYG editor
Site is Broken “A machine is broken when it no longer does what it was designed to do.”
– Vacuum Cleaner Salesman
Does the site s-ll give users the informa-on you need them to have? Did it ever?
Was the site built to handle the growing user base?
Was it built to work with modern browsers?
Get AZen-on
The Dos & Don’ts “The Process”
• Document: Capture your goals and requirements. This process is cri-cal to elimina-ng mistakes down the road and ensuring that your project lives up to your expecta-ons.
• Design: Extend (or build) your brand online, blending your marke-ng message with the latest technology and innova-ons.
• Build: Building, customizing, and configuring your site to func-on with the most up to date technologies and third party components.
• Refine: Test and launch the site. Using analy-cs and user feedback, con-nue to monitor the site’s effec-veness.
(A) Web Design & Development Process
Document
The documenta-on phase may include: • project plan and -meline • business requirements • crea-ve brief • site map • wireframes • user profiles • content strategy guides
Do
Personas
Personas
Wireframes Do
Content Strategy • What content is needed
• Not just where the content goes, but how it is connected and in the order a user ought to experience your message
• How should the informa-on be conveyed
Do
Design
• Simple is good
• Make a good first impression
• Consistency is key, with your brand and throughout the site
Use Awesome Pictures Do
Build
• Request that standard programming languages be used
• Request that code is commented
• Use the latest technologies and formalng – This may be HTML 5 or CSS 3
• Demand that the site be built using the best search engine op-miza-on (SEO) prac-ces
Don’t reinvent the wheel
• When an established third party applica-on will work, don’t build one yourself
• Most common func-ons have applica-ons or scripts available out of the box
• Many -mes these third-‐party apps are free*
*provided you don’t resell them and other minor constraints
Don’t
Refine • Constantly test your site • Find out what users are doing and what they are not doing
• Get to know your website analy-cs • Adjust the site accordingly
The Dos & Don’ts “The Nuts and Bolts”
• Set goals for your site before you start the process
• KPIs should be measurable
• Get before and a_er metrics
• Don’t set false goals – Goals that seem well intended but aren’t helping your organiza-on
– Goals that mislead
KPIs (Key Performance Indicator)
Don’t
Do
• Facebook is King (for now) • TwiZer is your friend • Photo sites • Music sites
• Others
Social Network Integra-on
Do
Mobile Enabled
Mobile Enabled
Do
• CMS implementa-on can be very expensive • Developers may tend to choose what they are familiar with
• Things to consider: – How much traffic does my site get or will it get in the short term?
– How many people need access? – How will approvals work?
Complicated CMS (Content Management System)
Don’t
Don’t reinvent the wheel; do use established so_ware
• YouTube • Google Analy-cs • Drupal, Joomla, Wordpress
Do
Flash or HTML5?
Flash • Most people have the plugin
• Consistent cross browser
• Bulky, file size and memory use • Need source file to make
changes*
HTML5 • Good for Smartphones but
not 100% on all browsers • S-ll in development
• Easy (er) edits
• More search engine friendly
What about AJAX?
Hos-ng
• May be the best -me to change from a host you aren’t happy with
• Could be a cost savings • Cloud compu-ng usually means less (no) down -me and backed up data
The Future? • Living in an app world
• Living in a social network world
Q & A
Thank You!
• On Twitter @ryanptuttle
• On Facebook http://facebook.com/Collinson.Media
• http://linkedin.com/in/ryanptuttle