Moving Minds & Moving Code Understanding, Exploring and - - PowerPoint PPT Presentation

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 ¡

• pLmizaLon, ¡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 ¡