moving minds and moving code - understanding, exploring and defining smb website requirements - may...
DESCRIPTION
Believe it or not, understanding, exploring and defining website requirements for a small business website is often quite a bit more challenging than defining those of a large enterprise-level corporation. For one thing, an SMB Marketing Department is smaller; usually a department of one, and that manager's time and resources are usually already stretched to the limit. Also, different aspects of the project may have to be outsourced to different vendors, leading to additional obstacles and complications. Couple that with the fact that the project budget is in the thousands of dollars instead of the 10's or 100's of thousands and the challenges to "do more with less" becomes even more apparent. This session will provide an overview of Michael Johnson's requirements process and design methodology at Pixelpunk Creative for building small business websites that are manageable, extensible and most importantly, provide a positive return on your marketing investment. You don't need an army of account managers, project managers, product developers, usability experts and engineers (along with the associated price tags) to create a successful and profitable website - Michael will show you how. Michael Johnson, is an award winning art director, web designer and internet marketing strategist with over 10 years of commercial online experience and with over 20 years of marketing and advertising experience. As the principal of Pixelpunk Creative, he designs, codes and markets websites that are simple and elegant, with a focus on the user experience, while providing a positive return on his client's online marketing investment. Michael is a long time member of the Ontario County Arts Council and is also an active member of the Rochester Advertising Federation. He was also invited by the Rochester Business Journal to judge this year's "best of the Web" competition. This presentation was delivered at the 13 May 2010 IIBA Rochester NY Chapter meeting.TRANSCRIPT
www.pixelpunk.com
Moving Minds & Moving Code Understanding, Exploring and
Defining SMB Website Requirements
PRESENTED BY MICHAEL JOHNSON
www.pixelpunk.com
A Li@le About Me • I design, code, and market websites that are simple and
elegant, with a focus on the user experience
• Providing a posiLve return on my clients’ online markeLng investment is key
• I began my career in AdverLsing and MarkeLng, and then… – Art Director and PublicaLon Designer – Web Designer and Online Marketer
– Product Manager / Web-‐Based SoSware as a Service
– One-‐Man Show @ PixelPunk CreaLve
www.pixelpunk.com
Philosophy • Understand the problem
– Understand the organizaLon’s industry and audience – Understand the organizaLon’s core goals and objecLves. – EvaluaLng project needs and establishing a strategy for execuLon – Define and measure the success of the project
• Recognize that visitors are on a mission – Help customers on their mission, design for usability
• Plan for the future – Knowing what needs to be taken into account for future growth – Design for extensibility so that the site can grow with changing client needs
www.pixelpunk.com
MarkeLng Department's Role (Small Business) • SomeLmes limited to simple “look-‐and-‐feel” decisions and
the “policing” of current brand guidelines – (Insert Lred and overused “LipsLck-‐on-‐a-‐pig” analogy here.)
• Under pressure to “own” the Website and are held accountable for performance but may not know what quesLons to ask or what features to implement – “What do you mean we can’t make updates?” – “What do you mean we can’t test new markeLng tacLcs?” – “What do you mean, ‘it will take weeks’ to make this simple change?” – “Is our site opLmized?”
www.pixelpunk.com
Requirements • A requirement is defined as a condiLon or capability that
must be met or fulfilled by a system to saLsfy a contract, standard, specificaLon, or other formally imposed documents (IEEE Standard 610.12-‐1990).
• MarkeLng Requirements – Express/Predict the customer's wants and needs for the product or service – Requires soSer skills, analysis – Access to data and the ability to quickly test and adjust to market changes
• FuncLonal Requirements – More tradiLonal occupaLonal skills (wireframes, documentaLon, etc.)
www.pixelpunk.com
Current Performance / FoundaLonal Metrics • Current analyLcs data
– What are the current strengths and weaknesses based on data we already have access to?
– Fix what’s broken, but don’t break what’s currently working. e.g. Don’t break current SEO and referring sources of traffic (301 redirects).
– (Insert the Lred and overused, “throw-‐out-‐the-‐baby-‐with-‐the-‐bathwater” idiomaLc expression here.)
• Sales / Lead-‐Conversion Results – Are there clear goals and points of conversion? Is it working?
• Install Crazy Egg “Heat Mapping” SoSware – Visually understand user behavior. Visualize the user experience.
www.pixelpunk.com
Crazy Egg Quickly see how people are actually using your site. Invest 5 minutes for instant customer insight.
www.pixelpunk.com
Google AnalyLcs Site Overlay
www.pixelpunk.com
Google AnalyLcs Provides insight into your current website traffic and markeLng effecLveness.
www.pixelpunk.com
• Install Google’s Webmaster Tools – Site VerificaLon – DiagnosLcs – Crawl Stats – Site Maps
www.pixelpunk.com
My Process • CompeLLve Analysis and Research
• Usability Review/Analysis • CreaLve ExploraLon & Design Development
• ProducLon Management & ImplementaLon
• Search Engine OpLmizaLon
• Outcome EvaluaLon
www.pixelpunk.com
CompeLLve Analysis & Research • Great design starts by understanding the problem
• Basic analysis of the current business landscape • Understand the demographic
– Get into their heads. Create personas. What would “Jane” do?
– Design a site for “Bob” and “Jane” and people like them, and not your CEO.
• Analyze compeLtor’s relaLve strengths and weaknesses – Compile a “wish-‐list”. E.g. “If we had a million dollars, we’d like to….”
– It doesn't all have to be done at once…you just have to plan for it.
www.pixelpunk.com
Usability Review/Analysis • Analyze navigaLonal schemes and link structures
– A user-‐centered approach which translate users’ navigaLonal requirements into system representaLons
• Ease of use is vital to success – The goal is increased user producLvity
• Sepng and meeLng user expectaLons – Users are on a mission
• “Don’t Make Me Think” –Steve Krug – Usability tesLng on 10 cents a day
www.pixelpunk.com
CreaLve ExploraLon • Begins the problem solving process
• Start developing ideas to visually express the core message
• What’s the “big” idea?
• Pixel-‐perfect Prototypes (The Apple Method)
• Refine. Rinse, wash, repeat. Complete.
www.pixelpunk.com
Prototype Example
• Pixel-‐Perfect
• Photoshop Layers for easy manipulaLon
• Client-‐owned
• WYSIWYG
www.pixelpunk.com
ProducLon & ImplementaLon • Execute on the final design
– Approved prototype is turned into a fully funcLonal website
• XHTML / JavaScript / CSS – Separate structure from design
• Search Engine OpLmizaLon – Based on compeLLve analysis data
• Browser TesLng – Firefox 3+, Safari 4+, Internet Explorer 7+ on PC, Mac, SmartPhones
www.pixelpunk.com
New Standards For Coding Web Sites • XHTML (1.0 TransiLonal is okay) / JavaScript / CSS
• Separate Style From Structure – www.cssZenGarden.com
– Easier to Maintain – Extensible for Future Upgrades
• Accessible to those with DisabiliLes • OpLmized for Search Engines
• Designed for Mobile Devices w/o Massive Code Re-‐Write
www.pixelpunk.com
Search Engine OpLmizaLon • Keyword PosiLoning
– Keyword discovery from the compeLLve analysis – Google Keyword SuggesLon Tool – Google Traffic EsLmator
• InformaLon Architecture – Intelligent internal linking schemes – “Themed” pages
• Page Architecture – Make it easy for the Search Engine spiders to crawl and understand the
importance of each page.
www.pixelpunk.com
Google Keyword SuggesLon Tool
• CompeLLon
• Monthly Searches
• Local Searches
www.pixelpunk.com
Search Engine OpLmizaLon (conLnued) • TacLcal On-‐Site OpLmizaLon
– Title Tag Syntax and OpLmizaLon, Canonical URL/301 Redirect Issues, Page File Size, META DescripLons, URL Parameter LimitaLons, URL Depth, Heading Tags, Hyperlink opLmizaLon, ALT Tag Requirements, Strong/Emphasis Usage, Internal Linking Strategies, Keyword Density and Placement
• Off-‐Site OpLmizaLon – Inbound links determine value of site and count as a “vote” for that site.
– Links are hard to get
– Start with relevant directories, local community sites, trade organizaLons, local professional networks
– Offer compelling content worth linking to
www.pixelpunk.com
Monopolize Google Search Results • Organic Search Results
– Website design for search engine visibility
• GoogleBase – Design Web to conform with GoogleBase rules and provide monthly feeds
• Pay-‐Per-‐Click – Use PPC adverLsing for highly themed targeted ads that land to relevant landing
pages.
• PLUS Box (beta) – Take advantage of new “Plus Box” feature.
• Local Search
www.pixelpunk.com
• SERP Anatomy – Plus Box – PPC – Organic – Google Base – Local
www.pixelpunk.com
Outcome EvaluaLon • How’d I do? • Measure audience response
• What’s next? How do we move the needle?
www.pixelpunk.com
Some Basic FuncLonal Requirements (…that the MarkeCng Department someCmes forgets to ask about)
• Header and footer “Includes” – For analyLcs, conversion code, and other markeLng tools (e.g. Crazy Egg).
• XHTML 1.0 TransiLonal Code – Make sure it validates – Add a couple of empty <DIV> in case you want to add something later
• Content Management System – Avoid proprietary systems -‐ Adobe Contribute is powerful and simple
www.pixelpunk.com
Some Basic MarkeLng Requirements (or “capabiliLes”)
• Current Performance Analysis
• CompeLLve Analysis
• Usability Review/Design with the User in Mind
• Have Some Tools in Place – CrazyEgg, AnalyLcs, Webmaster Tools
• Newsle@ers and Email MarkeLng – Access to FTP and/or network access
• Forms and Lead-‐GeneraLon – “Freeform” lead-‐gen form creaLon w/o relying on technical staff
www.pixelpunk.com
Thanks For Listening! • Any quesLons?
www.pixelpunk.com
Links • Google Keyword SuggesLon Tool
– adwords.google.com/select/KeywordToolExternal
• Google Traffic EsLmator – adwords.google.com/select/TrafficEsLmatorSandbox
• Crazy Egg – www.CrazyEgg.com
• Google AnalyLcs – www.google.com/analyLcs/
• Google Webmaster Tools – www.google.com/webmasters/tools/
• CSS Zen Garden – www.csszengarden.com