Moving 
Minds 
& 
Moving 
Code 
Understanding, 
Exploring 
and 
Defining 
SMB 
Website 
Requirements 
PRESENTED 
BY 
MICHA...
www.pixelpunk.com 
A 
Li@le 
About 
Me 
• I 
design, 
code, 
and 
market 
websites 
that 
are 
simple 
and 
elegant, 
with...
www.pixelpunk.com 
Philosophy 
• Understand 
the 
problem 
– Understand 
the 
organizaLon’s 
industry 
and 
audience 
– Un...
MarkeLng 
Department's 
Role 
(Small 
Business) 
• SomeLmes 
limited 
to 
simple 
“look-­‐and-­‐feel” 
decisions 
and 
the...
www.pixelpunk.com 
Requirements 
• A 
requirement 
is 
defined 
as 
a 
condiLon 
or 
capability 
that 
must 
be 
met 
or 
...
Current 
Performance 
/ 
FoundaLonal 
Metrics 
• Current 
www.pixelpunk.com 
analyLcs 
data 
– What 
are 
the 
current 
st...
www.pixelpunk.com 
Crazy 
Egg 
Quickly 
see 
how 
people 
are 
actually 
using 
your 
site. 
Invest 
5 
minutes 
for 
inst...
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 ...
CompeLLve 
Analysis 
& 
Research 
• Great 
design 
starts 
by 
understanding 
the 
problem 
www.pixelpunk.com 
• Basic 
an...
Usability 
Review/Analysis 
• Analyze 
navigaLonal 
schemes 
and 
link 
structures 
www.pixelpunk.com 
– A 
user-­‐centere...
CreaLve 
ExploraLon 
• Begins 
the 
problem 
solving 
process 
www.pixelpunk.com 
• Start 
developing 
ideas 
to 
visually...
www.pixelpunk.com 
Prototype 
Example 
• Pixel-­‐Perfect 
• Photoshop 
Layers 
for 
easy 
manipulaLon 
• Client-­‐owned 
•...
ProducLon 
& 
ImplementaLon 
• Execute 
on 
the 
final 
design 
www.pixelpunk.com 
– Approved 
prototype 
is 
turned 
into...
New 
Standards 
For 
Coding 
Web 
Sites 
• XHTML 
(1.0 
TransiLonal 
is 
okay) 
/ 
JavaScript 
/ 
CSS 
www.pixelpunk.com 
...
Search 
Engine 
OpLmizaLon 
• Keyword 
www.pixelpunk.com 
PosiLoning 
– Keyword 
discovery 
from 
the 
compeLLve 
analysis...
www.pixelpunk.com 
Google 
Keyword 
SuggesLon 
Tool 
• CompeLLon 
• Monthly 
Searches 
• Local 
Searches
Search 
Engine 
OpLmizaLon 
(conLnued) 
• TacLcal 
On-­‐Site 
OpLmizaLon 
www.pixelpunk.com 
– Title 
Tag 
Syntax 
and 
Op...
Monopolize 
Google 
Search 
Results 
• Organic 
www.pixelpunk.com 
Search 
Results 
– Website 
design 
for 
search 
engine...
www.pixelpunk.com 
• SERP 
Anatomy 
– Plus 
Box 
– PPC 
– Organic 
– Google 
Base 
– Local
Outcome 
EvaluaLon 
• How’d 
www.pixelpunk.com 
I 
do? 
• Measure 
audience 
response 
• What’s 
next? 
How 
do 
we 
move ...
Some 
Basic 
FuncLonal 
Requirements 
(…that 
the 
MarkeCng 
Department 
someCmes 
forgets 
to 
ask 
about) 
• Header 
and...
Some 
Basic 
MarkeLng 
Requirements 
(or 
“capabiliLes”) 
• Current 
Performance 
Analysis 
www.pixelpunk.com 
• CompeLLve...
Thanks 
For 
Listening! 
• Any 
www.pixelpunk.com 
quesLons?
www.pixelpunk.com 
Links 
• Google 
Keyword 
SuggesLon 
Tool 
– adwords.google.com/select/KeywordToolExternal 
• Google 
T...
Upcoming SlideShare
Loading in …5
×

IIBA Pixelpunk Design Presentation

769 views

Published on

Moving Minds and Moving Code - Understanding, Exploring and Defining SMB Website Requirements. Presented to the International Institute of Business Analysis (IIBA), a professional association for business analysts and the business analysis profession.

This session will provide an overview of Michael’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.

Published in: Design, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
769
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

IIBA Pixelpunk Design Presentation

  1. 1. Moving Minds & Moving Code Understanding, Exploring and Defining SMB Website Requirements PRESENTED BY MICHAEL JOHNSON www.pixelpunk.com
  2. 2. 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
  3. 3. 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
  4. 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.) www.pixelpunk.com • 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?”
  5. 5. 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.)
  6. 6. Current Performance / FoundaLonal Metrics • Current www.pixelpunk.com 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.
  7. 7. www.pixelpunk.com Crazy Egg Quickly see how people are actually using your site. Invest 5 minutes for instant customer insight.
  8. 8. www.pixelpunk.com Google AnalyLcs Site Overlay
  9. 9. www.pixelpunk.com Google AnalyLcs Provides insight into your current website traffic and markeLng effecLveness.
  10. 10. www.pixelpunk.com • Install Google’s Webmaster Tools – Site VerificaLon – DiagnosLcs – Crawl Stats – Site Maps
  11. 11. www.pixelpunk.com My Process • CompeLLve Analysis and Research • Usability Review/Analysis • CreaLve ExploraLon & Design Development • ProducLon Management & ImplementaLon • Search Engine OpLmizaLon • Outcome EvaluaLon
  12. 12. CompeLLve Analysis & Research • Great design starts by understanding the problem www.pixelpunk.com • 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.
  13. 13. Usability Review/Analysis • Analyze navigaLonal schemes and link structures www.pixelpunk.com – 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
  14. 14. CreaLve ExploraLon • Begins the problem solving process www.pixelpunk.com • 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.
  15. 15. www.pixelpunk.com Prototype Example • Pixel-­‐Perfect • Photoshop Layers for easy manipulaLon • Client-­‐owned • WYSIWYG
  16. 16. ProducLon & ImplementaLon • Execute on the final design www.pixelpunk.com – 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
  17. 17. New Standards For Coding Web Sites • XHTML (1.0 TransiLonal is okay) / JavaScript / CSS www.pixelpunk.com • 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
  18. 18. Search Engine OpLmizaLon • Keyword www.pixelpunk.com 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.
  19. 19. www.pixelpunk.com Google Keyword SuggesLon Tool • CompeLLon • Monthly Searches • Local Searches
  20. 20. Search Engine OpLmizaLon (conLnued) • TacLcal On-­‐Site OpLmizaLon www.pixelpunk.com – 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
  21. 21. Monopolize Google Search Results • Organic www.pixelpunk.com 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
  22. 22. www.pixelpunk.com • SERP Anatomy – Plus Box – PPC – Organic – Google Base – Local
  23. 23. Outcome EvaluaLon • How’d www.pixelpunk.com I do? • Measure audience response • What’s next? How do we move the needle?
  24. 24. Some Basic FuncLonal Requirements (…that the MarkeCng Department someCmes forgets to ask about) • Header and footer “Includes” www.pixelpunk.com – 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
  25. 25. Some Basic MarkeLng Requirements (or “capabiliLes”) • Current Performance Analysis www.pixelpunk.com • 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
  26. 26. Thanks For Listening! • Any www.pixelpunk.com quesLons?
  27. 27. 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

×