Post on 26-May-2015
description
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