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

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 ¡