Moving Minds and Moving Code - Understanding, Exploring and Defining SMB Website Requirements - May 2010
1 like661 views
The document discusses requirements for small business websites. It begins with an introduction of the speaker and their philosophy of understanding customer needs and planning for future growth. Common challenges marketing departments face with websites are described. The importance of requirements, current analytics, and usability reviews are covered. The speaker's design process involves competitive analysis, usability testing, creative exploration, implementation, and outcome evaluation. Specific analytics and website tools are also presented.
Moving Minds and Moving Code - Understanding, Exploring and Defining SMB Website Requirements - May 2010
- 1. Moving Minds & Moving Code Understanding, Exploring and Defining SMB Website Requirements PRESENTED BY MICHAEL JOHNSON www.pixelpunk.com
- 2. 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
- 3. 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
- 4. 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
- 5. 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
- 6. 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
- 7. Crazy Egg Quickly see how people are actually using your site. Invest 5 minutes for instant customer insight. www.pixelpunk.com
- 8. Google AnalyLcs Site Overlay www.pixelpunk.com
- 9. Google AnalyLcs Provides insight into your current website traffic and markeLng effecLveness. www.pixelpunk.com
- 10. • Install Google’s Webmaster Tools – Site VerificaLon – DiagnosLcs – Crawl Stats – Site Maps www.pixelpunk.com
- 11. My Process • CompeLLve Analysis and Research • Usability Review/Analysis • CreaLve ExploraLon & Design Development • ProducLon Management & ImplementaLon • Search Engine OpLmizaLon • Outcome EvaluaLon www.pixelpunk.com
- 12. 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
- 13. 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
- 14. 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
- 15. Prototype Example • Pixel-‐Perfect • Photoshop Layers for easy manipulaLon • Client-‐owned • WYSIWYG www.pixelpunk.com
- 16. 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
- 17. 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
- 18. 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
- 19. Google Keyword SuggesLon Tool • CompeLLon • Monthly Searches • Local Searches www.pixelpunk.com
- 20. 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
- 21. 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
- 22. • SERP Anatomy – Plus Box – PPC – Organic – Google Base – Local www.pixelpunk.com
- 23. Outcome EvaluaLon • How’d I do? • Measure audience response • What’s next? How do we move the needle? www.pixelpunk.com
- 24. 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
- 25. 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
- 26. Thanks For Listening! • Any quesLons? www.pixelpunk.com
- 27. 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 www.pixelpunk.com